Vue组件的发布和使用

编写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)