封装自己的组件库

前置知识+

1. vue
2. vue-cli
3. vue-loader
4. npm 平台账号和package.json

组件开发

插件开发

打包以及后续

1. package.json中private字段一定配置为 false
2. main字段需要指明入库的入口文件,例如main: lib/cqui.umd.min.js
3. 编写readme,组件库的使用文档
4. 在package.json中script字段添加build->vue-cli-service build --target lib --name lib(使用 vue-cli-service 的 lib 模式打包到 lib 目录)
5. 运行npm run build

上传 github 维护

组件库的开发需要不断的维护迭代,我们使用 github 来把我们的源代码做管理,不想开源的可以使用 gitee

配置下.gitignore忽略的文件

发布到 npm

发布之前需要创建.npmignore, 来忽略非打包后组件库的文件,尤其是源代码,如果也一并发布会非常占用体积拉取时间

在项目下命令行使用npm login登录账号,注意一定要确认 npm 使用的是原镜像https://registry.npmjs.org

npm publish发布(每次迭代需要手动更新package.json的 version),稍后就能在https://www.npmjs.com/看到自己的 package 了~