Vue组件的发布和使用

1、编写VUE组件

按照正常程序编写组件

2、发布组件

• 建立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账号，查看是否发布成功

发布到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/

其他问题

多次publish：多次发布得修改package.json文件内的版本

publish忽略掉无用文件：增加.npmignore文件

3、使用组件

引入：import CustomUI from 'custom-ui'
全局注册：Vue.use(CustomUI)