引言：
大家好，今天来聊一聊如何基于vue-cli脚手架快速搭建一个属于自己的组件库。
下面我将从开发、测试、发布三步骤，带大家体验如何进行搭建项目。
希望对大家接下来的开发能够提供帮助。
一、项目搭建及组件开发
1.搭建一个vue项目
这步大家都懂就略过了，还不懂的xdm自己扇自己两巴掌。
2.创建组件目录及开发
在src目录下新建一个components文件夹（文件名没有硬性要求），在该文件下进行组件编写，开发完成后，项目下的开发可作为组件库文档，打包的文件则发布到npm。这里以编写一个toast消息弹出和button组件示例：
button.vue
toast.vue
toast.js
当前文件是用来动态挂载toast组件。 Vue.extend()相当于面向对象中的继承，传入一个组件，可返回一个组件的子类构造函数，ToastConstructor如下图所示：
然后可通过new关键字创建一个组件示例（VueComponent），可用于在适当的时机挂载到网页上，instance实例如下图所示： 
注意：此时是没有el属性的，因为还没有进行挂载，只有当组件调用mount()方法后才会进行挂载。
3.创建组件库入口文件
在components目录下新建一个index.js文件，作为入口文件，在该文件中进行组件的注册及导出。
到这里组件库开发相关代码已经完成了，接下来就是做打包相关配置了。
4.package.json配置
在做配置前首先需要了解一下相关属性：
name：项目的名称，发布时使用的包名
version：版本号
private：是否私有，设置为false可进行发布
license：许可证
main：项目入口文件，import或require时执行的文件
description：项目描述
files：白名单，如何配置了，发布时只会上传该数组中的文件夹
scripts：定义脚本执行命令，可通过npm run [属性名]运行
接下来开始进行配置，我们要在script对象里添加一条打包命令
"lib": "vue-cli-service build --target lib --name vue2-plugin-test --dest lib src/components/index.js"
--target lib：这个选项指定了构建的目标为一个组件库（library），即将源代码构建成可复用的组件库形式。
--name: 这个选项指定了构建后的组件库的名称。
--dest：构建后生成的文件的目录名称。
src/components/index.js：入口文件的路径，指定了需要构建的Vue组件库的入口文件。
配置示例如图：
然后在项目根目录执行npm run lib即可进行打包，执行完后，可看到项目下多个lib目录
我这里使用的时MIT开源协议，main属性的文件夹路径是打包后的文件路径，并且使用的是打包后的umd模块化格式的文件，以下是关于UMD和CommonJs打包文件的简要介绍：
- UMD文件：UMD是一种通用的模块化格式，兼容多种环境（浏览器、Node.js等）。UMD文件通常使用UMD包装器函数将模块定义包裹起来，使其适应不同的环境。UMD允许通过全局对象或AMD/CMD模块加载器导入和使用模块。
- CommonJS文件：CommonJS是一种主要用于Node.js的模块化格式。CommonJS模块使用
require和module.exports来导入和导出模块。CommonJS模块的特点是同步加载，因为在Node.js中，模块是在运行时动态加载的。
二、调试npm
1. 创建软链接：
通过执行 npm link 命令，在当前包的根目录下创建一个软链接，将该包关联到全局的 node_modules 目录中。这样一来，该包就可以在全局范围内像其他全局安装的包一样被访问和使用。如需要取消软链接可执行npm unlink 包名
2. 新建一个vue项目，引入组件库
在该项目下通过npm link 包名（package.json当中的name属性值） 命令，将全局安装的包创建软链接到当前项目的 node_modules 目录，以便在当前项目中像正常依赖包一样使用该包。
在新创建的项目中，以当前组件库为例，执行npm link vue2-test-ui，执行后可以在node_modules 目录中看到该项目文件
接下来，就可以引入组件使用了，在项目main.js文件中注册组件
页面中使用
测试正常：
三、发布npm
1.注册npm（已经有账号的跳过这一步）
npm官网，还没账号的可自行去注册。
2.登录npm
在编写组件库项目的根目录终端执行npm login，按照提示依次输入账号密码。
3.发布npm
终端执行npm publish，执行成功后即可在npm官网查看。
项目引入发布后的组件库
npm install vue2-test-ui
下载的包如下所示
结语
以上是基于vue-cli脚手架进行组件库的搭建和开发，如果想要对组件库做性能优化，自动按需引入等，还得需要webpack相关的配置，有兴趣的可以自行扩展学习了。