编写VUE组件
按照正常程序编写组件
1、发布组件
建立index.js文件，导出我们的组件
import wyPayVue from './demo-pay.vue' // 导入组件
const WyPay = {
install(Vue, options) {
Vue.component(wyPayVue.name, wyPayVue)
}
}
export default WyPay
修改webpack.config.js文件的导入导出
entry: './src/lib/index.js',
filename: 'demo-pay.js'
library: 'demo-pay',
// library指定的就是你使用require时的模块名，这里便是require("vue-pay-vue")
libraryTarget: 'umd',
//libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
umdNamedDefine: true
// 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
修改 package.json 文件
"name": "wy-pay-vue"
"private": false,
"main":"dist/wy-pay-vue.js"
运行npm run build 命令
打开NPM官网，注册账号并且验证邮箱
在项目最外层目录打开cmd，输入npm login
登陆成功后输入npm publish，按回车
pc上登陆我们的npm账号，查看是否发布成功
2 、发布到NPM可能遇到的问题：运行npm publish 报401或者403的错
检查仓库是否被设成了淘宝镜像库：npm config get registry
如是，则设回原仓库: npm config set registry=http://registry.npmjs.org
如发布成功，则再次将仓库地址设为淘宝镜像地址:npm config set registry=https://registry.npm.taobao.org/
3、其他问题
多次publish：多次发布得修改package.json文件内的版本
publish忽略掉无用文件：增加.npmignore文件
3、使用组件
引入：import CustomUI from 'custom-ui' 全局注册：Vue.use(CustomUI)
