使用vue cli 的lib模式打包库,并发布npm包


1.打包

一般情况下运行 npm run bulid 会打包一个应用,
它会到main.js 做为入口,找到app.vue,再而找到app里引入的其他vue组件。

而我们在打包库时,不想打包app.vue,此时必须使用 lib模式打包

vue-cli-service build --target lib --name windbell src/index.js
//windbell 是打包后的文件名 src/index.js是打包时的入口文件

在src/index.js文件里导入写好的vue组件,并导出

科普 umd:就是统一模块打包,即可使用common.js 也可以 es6的

2.发布

修改package.json 里的入口文件 main:"dist/windbell.umd.js"
创建 .npmignore 文件用来屏蔽掉不想上传的文件。只想上传dist\

npm adduser //登录
npm publish  //发布

3.使用

创建一个测试项目

npm i windbell

在文件里引入

import * as wb from 'windbell'
import 'windbell/dist/windbell.css'