背景
公司有多个系统,都是基于Vue搭建的框架,这个时候会出现一些相同的东西,系统与系统之间是相互隔离的组件没有办法做到公用,这个时候就需要有一个顶层的设计。
将相同的东西抽离出来,形成公共的组件,多个系统之间只需要维护一套代码,代码更加方便管理。
准备
npm 官网申请账号www.npmjs.com/
需要填写账号、密码、邮箱。
生成项目
使用vue脚手架生成项目,最好使用系统的命令窗口git,vsCode有时候用起来不方便。
1、vue create [项目名] 项目名字要求在npm的包管理器中没有使用过的名字唯一性。
2、可以使用空格选中和取消一些配置项。
3、开发你需要的一些组件。
发布
1、打包需要上传到npm的带及配置打包命令
打包命令配置package.json中的script中添加
命令格式:“【命令名】”:“vue-cli-service build --target lib --name 【ming】 【entry 入口】”
eg “lib”:"vue-cli-service build --target lib --name kb-ui ./src/packages/index.js"
2、配置引用入口 package.json下配置 "main":"【打包文件lib目录min.js目录】"
3、添加.npmignore文件那些文件目录不上传到npm,
4、登录npm login输入账号、密码、邮箱
5、每次修改代码都需要修改package.json中的版本号,执行npm publish上传
生成版本号badge.fury.io/for/js 选中npm包名生成madown地址copy
放入到README.md文件中,上传到git就会有一个版本号,点击可以跳转去到npm
6、上传git
git init
git remote add origin 【git地址】
git add .
git commit -m "commit"
git push origin master
使用
npm install -kb-ui -S
main.js中
import kbUi from "kb-ui"
import "kb-ui/dist/kb-ui.css"
Vue.use(kbUi);