寫在前面
作為一名合格的前端開發(fā)，想必大家都會有過這樣的煩惱：上個項目寫過這個功能（組件）隧膏，這個項目又有相似的需求，又要擼一遍嚷那，費時費力還煩人胞枕。。魏宽。于是我想到了做成公共組件發(fā)布到npm上腐泻，下個項目使用時直接npm install xxx豈不是美滋滋决乎？想法已經(jīng)有了砚婆，那就開始著手干吧~~
一耗拓、搭建精簡版（webpack-simple）vue開發(fā)模板
注：隨著vue-cli3的發(fā)布，vue init webpack/webpack-simple xxx的語法已經(jīng)被新版 vue create xxx所取代和屎，因此窄坦，如果你使用的是vue-cli3唤反，需要先行安裝@vue/cli-init以便使用vue-cli 2.x版本語法：
vue -V //查看vue-cli版本
npm install -g @vue/cli-init //全局安裝@vue/cli-init
官方參考文檔：傳送門
開始創(chuàng)建vue開發(fā)模板：
vue init webpack-simple public-element-prompt-component //創(chuàng)建webpack-simple模板項目
創(chuàng)建成功圖示如下：
image.png
創(chuàng)建完成后進入項目目錄，安裝相關(guān)依賴 (
cnpm install)鸭津，并運行(npm run dev)測試項目是否成功運行彤侍。出現(xiàn)以下界面則表示項目創(chuàng)建成功：
image.png
image.png
二、開始開發(fā)組件
在src目錄下新建文件夾（名字隨意）逆趋，并新建一個.vue文件盏阶，圖示如下：
image.png
文件代碼如下：
<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>
三、在組件平級目錄下新增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)參考文檔：傳送門
四闻书、修改package.json等配置文件
package.json文件配置圖示如下：
image.png
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相對應(yīng)
library: 'Public-component',
libraryTarget: 'umd',
umdNamedDefine: true
}
...
}
相關(guān)配置參考：傳送門
五、打包測試
以上步驟完成后魄眉，我們可以進行打包測試了：
npm run build //打包
打包完成圖示如下：
image.png
六砰盐、發(fā)布到npm
首先你需要擁有一個npm賬號！需要擁有一個npm賬號坑律！擁有一個npm賬號!
重要的事情說三遍~~
附上npm賬號注冊地址：傳送門
賬號注冊完成后就是發(fā)布流程了：
npm login //登錄npm岩梳，需要正確填寫用戶名、密碼及郵箱
npm publish //發(fā)布到npm
image.png
七晃择、測試使用組件
發(fā)布成功后冀值，你的注冊郵箱會受到來自npm的郵件，提示你的npm包已經(jīng)成功發(fā)布宫屠。這時候我們可以去npm與cnpm搜索上傳的包：
npm地址：傳送門
cnpm地址:傳送門
image.png
在其他項目中使用該組件：
cnpm install public-element-prompt-component --save-dev //安裝發(fā)布的npm包
用于測試的test項目列疗，目錄如下：
image.png
由于項目依賴于
element-ui，因此main.js需要進行修改相關(guān)靜態(tài)資源文件浪蹂，如
index.css抵栈，字體文件等，請放在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 = false
new 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: `確認移出選中成員嗎创葡？`,
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í)行效果如下：
image.png
image.png
官方文檔：傳送門
結(jié)束語
后續(xù)如果有版本更新浙踢，只需要修改package.json中的版本號重新發(fā)布即可~~
以上就是關(guān)于開發(fā)vue公共組件并發(fā)布到npm的操作步驟，有什么不足之處希望大家不吝評價~~
水平有限灿渴，各位看官不要嫌棄哈~~
傳送門
