基于vue开发一个UI仓库包发布到npm

152 阅读1分钟

背景

公司有多个系统,都是基于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);