編寫VUE組件
按照正常程序編寫組件
1、發(fā)布組件
建立index.js文件，導(dǎo)出我們的組件
import wyPayVue from './demo-pay.vue' // 導(dǎo)入組件
const WyPay = {
? ? install(Vue, options) {
? ? ? ? Vue.component(wyPayVue.name, wyPayVue)
? ? }
}
export default WyPay
修改webpack.config.js文件的導(dǎo)入導(dǎo)出
entry: './src/lib/index.js',
filename: 'demo-pay.js'
library: 'demo-pay',
// library指定的就是你使用require時(shí)的模塊名纲熏，這里便是require("vue-pay-vue")
libraryTarget: 'umd',
//libraryTarget會(huì)生成不同umd的代碼,可以只是commonjs標(biāo)準(zhǔn)的辐赞，也可以是指amd標(biāo)準(zhǔn)的寺擂，也可以只是通過script標(biāo)簽引入的球涛。
umdNamedDefine: true
// 會(huì)對(duì) UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define亡脸。
修改?package.json?文件
"name": "wy-pay-vue"
"private": false,
"main":"dist/wy-pay-vue.js"
運(yùn)行npm run build 命令
打開NPM官網(wǎng)恰梢，注冊(cè)賬號(hào)并且驗(yàn)證郵箱
在項(xiàng)目最外層目錄打開cmd，輸入npm login
登陸成功后輸入npm publish梗掰，按回車
pc上登陸我們的npm賬號(hào)嵌言，查看是否發(fā)布成功
2 、發(fā)布到NPM可能遇到的問題：運(yùn)行npm publish 報(bào)401或者403的錯(cuò)
檢查倉(cāng)庫(kù)是否被設(shè)成了淘寶鏡像庫(kù)：npm config get registry
如是及穗，則設(shè)回原倉(cāng)庫(kù): npm config set registry=http://registry.npmjs.org
如發(fā)布成功摧茴，則再次將倉(cāng)庫(kù)地址設(shè)為淘寶鏡像地址:npm config set registry=https://registry.npm.taobao.org/
3、其他問題
多次publish：多次發(fā)布得修改package.json文件內(nèi)的版本
publish忽略掉無用文件：增加.npmignore文件
3埂陆、使用組件
引入：import CustomUI from 'custom-ui' 全局注冊(cè)：Vue.use(CustomUI)
