vue制作npm插件

Posted 2020-11-30 zz-zrr

1. vue init webpack-simple xxxxx（项目名）
2. 先npm i安装依赖，再npm run dev打开看看是否初始化成功(记得进入项目里面执行)。
3. 修改package.json里面private为false,增加"main":"dist/build.js",
4. 在根目录新建文件.npmignore，里面的文件名是会忽略上传到npm的，
5. 在src下新建文件夹Components，新建文件index.js；
6. 在Components新建文件夹Test，新建文件index.vue，写自己代码；
7. 修改webpack.config.js，module.exports中的entry为‘./src/Components/index.js‘
8. Components下index.js写上代码import Test from ‘./Test/index.vue‘; const vue_plugs = { install(Vue, options) { Vue.component(Test.name, Test) } }; if (typeof window !== ‘undefined‘ && window.Vue) { window.vue_plugs = vue_plugs Vue.use(vue_plugs) }; export default vue_plugs;
9. 执行npm run build（记得 每次更新都需要执行npm run build）.
10. 项目根目录下执行npm adduser,输入npm的账号密码还有邮箱，缺一不可。（注：如果已有帐号，则输入npm login登录，账号密码还有邮箱，也是缺一不可，如果报错code E409，是因为使用的淘宝npm，导致登录失误，因为登录的是淘宝的npm 仓库源，淘宝应该不会给你提供登录服务把npm registry换成官方的就可以了，运行代码：nrm use npm,如果报错，是因为没有安装nrm，运行代代码npm install -g nrm安装nrm再执行代码：nrm use npm即可）；
11. 可以运行npm whoami查看当前用户是否是自己；
12. 运行代码npm publish进行发布；