寫在前面

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

一、搭建精簡版（webpack-simple）vue開發模板

注：隨著vue-cli3的發布，vue init webpack/webpack-simple xxx的語法已經被新版 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

官方參考文檔：傳送門

開始創建vue開發模板：

vue init webpack-simple public-element-prompt-component //創建webpack-simple模板項目

創建成功圖示如下：

image.png

image.png

image.png

二、開始開發組件

在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;

官網參考文檔：傳送門

四、修改package.json等配置文件

package.json文件配置圖示如下：

image.png

···
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

六、發布到npm

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

賬號注冊完成后就是發布流程了：

npm login //登錄npm，需要正確填寫用戶名、密碼及郵箱

npm publish //發布到npm

image.png

七、測試使用組件

發布成功后，你的注冊郵箱會受到來自npm的郵件，提示你的npm包已經成功發布。這時候我們可以去npm與cnpm搜索上傳的包：
npm地址：傳送門
cnpm地址:傳送門

image.png

在其他項目中使用該組件：

cnpm install public-element-prompt-component --save-dev  //安裝發布的npm包

用于測試的test項目，目錄如下：

image.png

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>

執行效果如下：

image.png

image.png

結束語

后續如果有版本更新，只需要修改package.json中的版本號重新發布即可~~

以上就是關于開發vue公共組件并發布到npm的操作步驟，有什么不足之處希望大家不吝評價~~
水平有限，各位看官不要嫌棄哈~~
傳送門

感謝瀏覽~