1. 环境准备
因为我们此次封装的是Vue组件，所以我们直接在Vue脚手架项目里面进行封装即可。
（1）初始化Vue项目
vue create my-components
（2）运行项目
npm run serve
2. 组件封装
2.1 新建package文件夹
2.2 编写json-view组件
2.3 使用Vue插件模式
这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
在json-view组件目录下新建index.js文件，代码如下：
//package/index.js
import PigButton from "../package/pig-button/index.vue"; // 引入封装好的组件
const coms = [PigButton]; // 将来如果有其它组件,都可以写到这个数组里
// 批量组件注册
const install = function (Vue) {
coms.forEach((com) => {
Vue.component(com.name, com);
});
};
export default install; // 这个方法以后再使用的时候可以被use调用
上传代码主要的的一项工作就是将我们封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行。
3. 组件打包
到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。
修改我们项目得package.json文件，配置打包命令：
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"package": "vue-cli-service build --target lib ./src/package/json-view/index.js --name allride-json-view --dest allride-json-view"
},
其中需要注意的是，预防打包后的图片文件路径查找不到，因此需要将publicPath改成相对路径
打包命令解释：
- --target lib 关键字 指定打包的目录
- --name 打包后的文件名字
- --dest 打包后的文件夹的名称
然后执行打包命令：
npm run package
打包执行完成后我们项目目录下就会多出一个allride-json-view文件夹，存放的是打包后的文件。
4. 发布到npm
4.1 初始化package.json
想要发布到npm仓库，我们还得在allride-json-view文件夹下初始化一个package.json文件。进入allride-json-view目录，执行命令：
npm init -y
4.2 发布到npm仓库
（1）注册账号
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。
（2）设置npm源
有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：
npm config set registry=https://registry.npmjs.org
（3）添加npm用户
进入allride-json-view目录，添加npm用户，执行命令：
npm adduser
这里会让你填写用户名等等，如果之前设置过即可跳过此步。
（4）发布npm
在allride-json-view目录下执行命令：
npm publish
5. 从npm安装使用
直接执行安装命令：
npm install allride-json-view // 由于名字重复，改了个名字
然后在main.js引用注册，代码如下：
import AllrideJsonView from "allride-json-view";
import "allride-json-view/allride-json-view.css";
Vue.use(AllrideJsonView);
这里单独引用了css，就和element-ui一样需要单独引入样式文件。
