提示，这里需要先学习一下Vue插件的API： https://cn.vuejs.org/v2/api/#Vue-use

在package.json中加一条命令，用于指定打包目标为库

1
2
3
4
5
{
   "scripts": {
       "lib": "vue-cli-service build --target lib packages/index.js"
   }
}

在命令行输入 yarn lib
image text
image text
打包完成，可以看到多了个dist文件夹，里面将我们的组件打包成了一个js文件，字体图标也打包好了，以后使用的话只要用dist文件夹就行了

接下来让我们整个项目用 pc-hub 管理一下，把打包好的dist放到npm上，提醒一下在index里要有install，不然不能作为Vue的插件也不能全局使用

接下来将my-ui上传到github上，这个不写了，主要是如何将组件库发布到npm上，需要做一点修改，首先将package.json中的 “private”: false 其次name属性要是npm上没有的包名，main属性设置为dist文件夹中以.umd.min.js结尾的文件路径，其他随意，以我的为例是:

1
2
3
4
5
6
7
8
{
    "name": "syhmy-ui",
    "private": false,
    "main": "dist/my-ui.umd.in.js",
    "auther":{
        "name": "ShiYuhao"
    }
}

在打包文件夹中在新建一个.npmignore，跟.gitignore功能相似，只要用到dist即可

1
2
3
4
5
6
7
8
9
# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

把打包好的文件上传到npm，如果装了nrm的，需要保证当前的源是npm的源，因为有些人会把源改到taobao去，得改回来，不然就不是上传到了npm。然后需要一个npm账号，没有的话注册一个
如图所示登陆成功，输入命令
image text

1
npm public

即可把包发布到npm上
image text
以后要更新你发布的npm包的话，要在package.json中修改版本号
如图，npm包可以正常下载，当成插件全局注册好后就可以使用了