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选项设置为true,这样别人才能使用你的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就可以了
原文：https://www.cnblogs.com/luoyanan/p/10845760.html