1、編寫VUE組件
按照正常程序編寫組件
2凤瘦、發(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)的梆靖，也可以只是通過(guò)script標(biāo)簽引入的控汉。
umdNamedDefine: true
// 會(huì)對(duì) UMD 的構(gòu)建過(guò)程中的 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ā)布成功
發(fā)布到NPM可能遇到的問(wèn)題：運(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/
其他問(wèn)題
多次publish：多次發(fā)布得修改package.json文件內(nèi)的版本
publish忽略掉無(wú)用文件：增加.npmignore文件
3舆乔、使用組件
引入：import CustomUI from 'custom-ui' 全局注冊(cè)：Vue.use(CustomUI)
