用@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

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

构建步骤就完成了。

4.npm发布

没有npm账号的先注册账号

npm adduser

然后登陆

npm login

发布

npm publish

注意：发布的包只能在24个小时内撤销,并且要加上--force参数（npm官方不建议撤销）

npm unpublish --force

包的升级：

在package.json中修改版本号并且重新npm publish就可以了