对比react来说,vue发npm包尤为简单。vue-cli脚手架中已经集成了打为npm包的方式,直接省去了webpack或者rollup这一步。
在package.json文件中,写入命令
"scripts": {
"lib": "vue-cli-service build --target lib --name antd-vue-yan --dest lib ./src/components/index.js"
},
// --target lib 打包为npm包,默认不写就是打包成应用
// --name antd-vue-yan 包名
// --dest lib ./src/components/index.js 从src/components/index.js入口文件打包到lib目录中
这样打包后有一个问题,css被抽离了,使用时还要单独引入
可以在vue.config.js文件中配置一下
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
css: {
extract: false
}
})
这样打包后就不用单独引入css了。
最后在lib目录中执行npm发包命令即可。具体可看react组件发布到npm的教程