寫(xiě)在前面
作為一名合格的前端開(kāi)發(fā)，想必大家都會(huì)有過(guò)這樣的煩惱：上個(gè)項(xiàng)目寫(xiě)過(guò)這個(gè)功能（組件），這個(gè)項(xiàng)目又有相似的需求，又要擼一遍，費(fèi)時(shí)費(fèi)力還煩人。。。于是我想到了做成公共組件發(fā)布到npm上，下個(gè)項(xiàng)目使用時(shí)直接npm install xxx豈不是美滋滋？想法已經(jīng)有了，那就開(kāi)始著手干吧~~
一、搭建精簡(jiǎn)版（webpack-simple）vue開(kāi)發(fā)模板
注：隨著vue-cli3的發(fā)布，vue init webpack/webpack-simple xxx的語(yǔ)法已經(jīng)被新版 vue create xxx所取代，因此，如果你使用的是vue-cli3，需要先行安裝@vue/cli-init以便使用vue-cli 2.x版本語(yǔ)法：
vue -V //查看vue-cli版本
npm install -g @vue/cli-init //全局安裝@vue/cli-init
官方參考文檔：傳送門(mén)
開(kāi)始創(chuàng)建vue開(kāi)發(fā)模板：
vue init webpack-simple public-element-prompt-component //創(chuàng)建webpack-simple模板項(xiàng)目
創(chuàng)建成功圖示如下：
創(chuàng)建完成后進(jìn)入項(xiàng)目目錄，安裝相關(guān)依賴(lài) (
cnpm install)，并運(yùn)行(
npm run dev)測(cè)試項(xiàng)目是否成功運(yùn)行。出現(xiàn)以下界面則表示項(xiàng)目創(chuàng)建成功：
二、開(kāi)始開(kāi)發(fā)組件
在src目錄下新建文件夾（名字隨意），并新建一個(gè).vue文件，圖示如下：
文件代碼如下：
<template> <div class='PublicComponent'></div></template><script>export default { name: 'PublicComponent', data() { return { } }, props:{ msgConfig:Object, confirmConfig:Object, promptConfig:Object }, watch: { msgConfig: function (val, oldVal) { if (val != oldVal) { this.showMassage(val); } }, confirmConfig: function (val, oldVal) { if (val != oldVal) { this.showConfirmModal(val); } }, promptConfig: function (val, oldVal) { if (val != oldVal) { this.showPromptModal(val); } } }, methods: { showMassage(config) { this.$message(config); }, showConfirmModal(config) { this.$confirm(config.message, config.title, config.options ? config.options : {}).then(config.yesCallback).catch(config.cancelCallback ? config.cancelCallback : () => { }); }, showPromptModal(config) { this.$prompt(config.message, config.title, config.options ? config.options : {}).then(config.yesCallback).catch(config.cancelCallback ? config.cancelCallback : () => { }); } }}</script>
三、在組件平級(jí)目錄下新增index.js文件
代碼如下：
import PublicComponent from './PublicComponent.vue'// Declare install function executed by Vue.use()export function install(Vue) { if (install.installed) return; install.installed = true; Vue.component('PublicComponent', PublicComponent);}// Create module definition for Vue.use()const plugin = { install,};// Auto-install when vue is found (eg. in browser via <script> tag)let GlobalVue = null;if (typeof window !== 'undefined') { GlobalVue = window.Vue;} else if (typeof global !== 'undefined') { GlobalVue = global.Vue;}if (GlobalVue) { GlobalVue.use(plugin);}export default PublicComponent;
官網(wǎng)參考文檔：傳送門(mén)
四、修改package.json等配置文件
package.json文件配置圖示如下：
webpack.config.js文件配置，主要修改入口(
entry)及出口信息(
output)：
···module.exports = { // entry: './src/main.js', entry: './src/component/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', // filename: 'build.js' filename: 'public-component.js',//與package.json中main相對(duì)應(yīng) library: 'Public-component', libraryTarget: 'umd', umdNamedDefine: true }...}
相關(guān)配置參考：傳送門(mén)
五、打包測(cè)試
以上步驟完成后，我們可以進(jìn)行打包測(cè)試了：
npm run build //打包
打包完成圖示如下：
六、發(fā)布到npm
首先你需要擁有一個(gè)npm賬號(hào)！需要擁有一個(gè)npm賬號(hào)！擁有一個(gè)npm賬號(hào)!
重要的事情說(shuō)三遍~~
附上npm賬號(hào)注冊(cè)地址：傳送門(mén)
賬號(hào)注冊(cè)完成后就是發(fā)布流程了：
npm login //登錄npm，需要正確填寫(xiě)用戶(hù)名、密碼及郵箱npm publish //發(fā)布到npm
發(fā)布成功圖示如下：
七、測(cè)試使用組件
發(fā)布成功后，你的注冊(cè)郵箱會(huì)受到來(lái)自npm的郵件，提示你的npm包已經(jīng)成功發(fā)布。這時(shí)候我們可以去npm與cnpm搜索上傳的包：
npm地址：傳送門(mén)
cnpm地址:傳送門(mén)
在其他項(xiàng)目中使用該組件：
cnpm install public-element-prompt-component --save-dev //安裝發(fā)布的npm包
用于測(cè)試的test項(xiàng)目，目錄如下：
由于項(xiàng)目依賴(lài)于
element-ui，因此
main.js需要進(jìn)行修改
相關(guān)靜態(tài)資源文件，如
index.css，字體文件等，請(qǐng)放在static目錄下，并在index.html中引入。
mian.js具體代碼如下：
import Vue from 'vue'import App from './App.vue'import { Button, Message, MessageBox } from 'element-ui';Vue.use(Button);Vue.prototype.$message = Message;Vue.prototype.$confirm = MessageBox.confirm;Vue.prototype.$prompt = MessageBox.prompt;Vue.config.productionTip = falsenew Vue({ render: h => h(App),}).$mount('#app')
App.vue代碼如下：
<template> <div class='hello'> <el-button @click='showComponent' type='danger' plain>刪除</el-button> <publicComponent :msgConfig='publicComponentObj.msgConfig' :confirmConfig='publicComponentObj.confirmConfig'></publicComponent> </div></template><script>import PublicComponent from 'public-element-prompt-component'export default { name: 'HelloWorld', props: { msg: String }, data() { return { publicComponentObj: { confirmConfig: {}, msgConfig: {}, } } }, methods: { showComponent() { const tempObj = { message: `確認(rèn)移出選中成員嗎？`, title: '提示', options: { type: 'warning' }, yesCallback: () => { const tempMsgObj = { message: '刪除成功', type: 'success', showClose: true, duration: 3000 } this.publicComponentObj.msgConfig = tempMsgObj; } } this.publicComponentObj.confirmConfig = tempObj; } }, components: { PublicComponent }}</script><!-- Add 'scoped' attribute to limit CSS to this component only --><style scoped></style>
執(zhí)行效果如下：
官方文檔：
傳送門(mén)結(jié)束語(yǔ)
后續(xù)如果有版本更新，只需要修改package.json中的版本號(hào)重新發(fā)布即可~~
以上就是關(guān)于開(kāi)發(fā)vue公共組件并發(fā)布到npm的操作步驟，有什么不足之處希望大家不吝評(píng)價(jià)~~
水平有限，各位看官不要嫌棄哈~~
傳送門(mén)
感謝瀏覽~
