webSciprt
## 注册npm账户并在本机添加npm用户 - 进入https://www.npmjs.com/,注册账户 - 打开终端,输入npm login - 输入账号名、密码、邮箱,登录成功后将添加至npm的本地配置中; ![-w486](https://img2018.cnblogs.com/blog/1179638/201905/1179638-20190519233213994-1828920324.jpg) ## 创建npm包项目 1. 新建空文件夹,由于基于vue封装插件,所以建议使用webpack-simple模版项目来开发, `vue init webpack-simple v-testnpm` ![-w576](https://img2018.cnblogs.com/blog/1179638/201905/1179638-20190519233214071-4972968.jpg) 1. cmd命令进入项目,并安装依赖,运行模版 ``` cd v-testnpm npm install npm run dev ``` 1. 在根目录下的src文件夹中创建lib文件夹,lib作为我们的插件目录; 2. 在src/lib下编写我们的插件v-testnpm.vue ``` ``` 1. 在src/lib创建index.js ``` import vTestnpm from './v-testnpm.vue' const comment = { install: function(Vue) { Vue.component(vTestnpm.name, vTestnpm) } } // 这里的判断很重要 if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(comment) } export default comment ``` 2. 在main.js中引入我们的插件并注册使用 ``` import Vue from 'vue' import App from './App.vue' import vTestnpm from './lib/index'; Vue.use(vTestnpm); new Vue({ el: '#app', render: h => h(App) }) ``` 1. 在App.vue中使用v-testnpm ``` ``` 2. 项目成功运行后,查看实际效果 ![-w541](https://img2018.cnblogs.com/blog/1179638/201905/1179638-20190519233214067-1769747907.jpg) 1. 修改package.json文件 ![-w486](https://img2018.cnblogs.com/blog/1179638/201905/1179638-20190519233214272-1744355172.jpg) 将private改为false,增加main,main是打包后的入口文件 1. 修改webpack.config.js文件 ![-w511](https://img2018.cnblogs.com/blog/1179638/201905/1179638-20190519233214241-989659847.jpg) - entry:是入口文件,src目录下插件lib的index.js文件 -filename:/打包后输出的文件名字,这里需要和package.json文件下main应该写为:'dist/v-testnpm.js' 1. 打包插件并上传npm ``` npm run build npm login npm publish ``` -- 最后我们在实际项目中,安装自己的插件使用就可以了

相关文章: