vue開發(fā)公共組件并發(fā)布到npm

15所 2019-11-03

展開全文

寫在前面

作為一名合格的前端開發(fā)，想必大家都會有過這樣的煩惱：上個項目寫過這個功能（組件），這個項目又有相似的需求，又要擼一遍，費時費力還煩人。。。于是我想到了做成公共組件發(fā)布到npm上，下個項目使用時直接npm install xxx豈不是美滋滋？想法已經(jīng)有了，那就開始著手干吧~~

$\color{red}{本博客以創(chuàng)建一個element-ui公共提示信息組件為例~}$
$\color{red}{項目名稱：public-element-prompt-component}$

一、搭建精簡版（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)建完成后進入項目目錄，安裝相關依賴 (cnpm install)，并運行(npm run dev)測試項目是否成功運行。出現(xiàn)以下界面則表示項目創(chuàng)建成功：

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相對應      library: 'Public-component',      libraryTarget: 'umd',      umdNamedDefine: true  }...}

相關配置參考：傳送門

五、打包測試

以上步驟完成后，我們可以進行打包測試了：

npm run build //打包

打包完成圖示如下：

image.png

六、發(fā)布到npm

首先你需要擁有一個npm賬號！需要擁有一個npm賬號！擁有一個npm賬號!
重要的事情說三遍~~
附上npm賬號注冊地址：傳送門

賬號注冊完成后就是發(fā)布流程了：

npm login //登錄npm，需要正確填寫用戶名、密碼及郵箱npm publish //發(fā)布到npm

發(fā)布成功圖示如下：

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需要進行修改
相關靜態(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 = 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: `確認移出選中成員嗎？`,                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>