我们在使用 Vue 进行日常开发时，我们经常会用到一些开源的 UI 库, 如:Element-UI, echarts 等，只需一行命令, 即可方便的将这些库引入我们当前的项目:
npm install echarts
或者
yarn add echarts
但是当我们自己开发了一个UI Component, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗?
这样做是很方便, 但是有两个问题:
当该 component 需要更新时, 我们需要手动维护所有用到该 component 的更新
当有多个 component 需要共享时, 手动复制过于繁琐
那么, 我们为什么不发布一个 UI 组件库给自己用呢?
但是我们怎么把组件发布出去呢？
答案是： npm 包管理器
作为一个前端，肯定都用过 npm 下载各种包，各种组件。但是你有没有发布过自己的组件或者包呢？
以下教你制作一个 Vue 组件，并发布到 npm上面，然后下载使用。
初始化 project
这里我们使用官方的 vue-cli 初始化一个 Vue 项目
npm install -g @vue/cli
或者
yarn global add @vue/cli
然后新建一个vue项目
vue create my-personal-component
用vscode打开项目，下面我用vue3.0写了一个简单的页面展示
在components文件夹下面新建一个MyComponent.vue文件，内容如下图
App.vue文件的内容如下
通过yarn serve命令启动项目，提示sass-loader没有安装
通过如下命令安装sass-loader(在安装sass-loader的过程有个坑，会一直报错，我查阅了很多资料，才发现安装7.0.3版本不会报错)
npm i -D [email protected]
由于sass-loader是依赖于node-sass，所以必须安装node-sass，安装命令如下
npm install node-sass --save-dev
查看package.json (配置信息)
再次启动项目，运行成功
配置 project
下面我们来配置当前项目, 以使其可以发布到 npm 上.
首先我们编辑入口文件 src/components/index.js, 使其被作为 UI 库导入时能自动在Vue中注册我们的 Component:
接下来我们添加 build 项目的脚本到 package.json 的 scripts 中:
其中 --name libraryName 指定的是要发布的Library的名称 (运行 npm run build-bundle)
可以看到 build 生成了各种版本可以用于发布的js文件
这里我们选择默认发布我们的 *.common.js 文件, 所以我们在 package.json中添加main属性
指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件
最后, 我们再配置 package.json中的 files属性, 来配置我们想要发布到 npm 上的文件路径.
我们这里将用户引用我们的组件库可能用到的所有文件都放进来:
在发布之前我们再编译一次, 让build出的文件为我们最新的修改:
npm run build-bundle
npm 发布
首先我们注册一个 npm 账号 (如果已有账号, 可以跳过此步骤)
没有的可以去官网注册 www.npmjs.com/
然后打开终端
使用 npm login 登录注册号的状态
输入你的用户名->密码->邮箱
(最好使用QQ邮箱注册，其他邮箱可能会有问题)
登录后可以使用 npm whoami 查看登录状态
登录成功如下图
通过cd 打开my-personal-component文件夹
接下来我们就可以使用下面的命令发布我们的 UI 组件库了
npm publish --access public
发布成功如下图
需要注意的是package.json中指定的version属性: 每次要更新我们的组件库都需要更新一下version(毕竟同一个version的代码不同,很容易让人产生疑惑)
这样子我们就发布好了我们第一个组件。
可以在 npm 点击我的 profile 查看。
注意：登录npm账号之后，可能会出现报错，如下图
解决方案是命令行输入 npm config set registry https://registry.npmjs.org/ 后，再重新登录
注意：在发布之前, 我们修改一下项目的名称(注意不要和已有项目名称冲突), 推荐使用 @username/projectName 的命名方式.例如@jack/my-personal-component这种方式，但是我试过这种命名方式，发布的时候会提示如下报错
我上网查了很多资料，说是使用邮箱注册npm账号后没有点击邮件验证，后来我重新验证了邮箱(进入邮箱，点击链接即可)还是报错，最后通过把项目的名称改成下面这样的形式才可以正常发布
测试使用
这样我们就完成了自己的 UI 组件库的发布, 接下来我们可以在任何需要使用到该组件库的项目中使用
然后新建一个vue测试项目
vue create test-vue
执行以下命令
npm install --save my-personal-component
在package.json中会显示安装的依赖
然后在index文件 (如src/main.js) 中引入该组件库:
import 'my-personal-component'
接下来我们就可以在 Vue的template中使用组件库中的 Component了:
重启项目，运行成功如下
最后
经过上面这些步骤后, 我们就拥有了一个属于自己的组件库了. 我们可以随时更新, 发布自己新版的组件库.
而依赖了该组件库的项目只需要使用简单的 npm 命令即可更新