用@vue/cli发布npm包

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.环境准备

安装node,npm,@vue/cli

2.初始化项目

用@vue/cli创建新项目

vue create mtest-ui

删除public,main.js,App.vue等无关文件，新增packages文件夹存放自己的vue组件

这里我写了一个actionsheet的vue组件放到packages文件夹中

并且在src目录中新增了个js，目录像这样：

其中lib目录是后续打包生成的先不用管

其中index.js是为了把packages中的组件提供一个统一入口来import

代码如下：

import showActionSheet from './packages/actionsheet/index';
// ...如果还有话继续添加const components = [
showActionSheet,
// ...如果还有的话继续添加
]const install = function (Vue) {
components.map(component => {
Vue.component(component.name, component);
})
}/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}export default {
install,
showActionSheet
// ...如果还有话继续添加
}

3.配置修改

3.1修改package.json

将private选项设置为false,这样别人才能使用你的npm包

scripts中新增：

"lib": "vue-cli-service build --target lib --name mtest-ui --dest lib ./src/index.js"

设置import该npm包时查询的入口文件

"main": "lib/mtest-ui.umd.min.js",

运行以下命令即可生成打包后的各个构建版本的文件。

npm run lib

生成的各个构建版本文件：