Vue插件（概念、功能、開發）

一、組件和插件

1.組件：是對某些功能或某模塊的封裝

2.插件：是對一系列組件的封裝

二、插件的功能

插件通常用來爲 Vue 添加全局功能。插件的功能範圍沒有嚴格的限制——一般有下面幾種：

1. 添加全局方法或者 property。如：vue-custom-element

2. 添加全局資源：指令/過濾器/過渡等。如 vue-touch

3. 通過全局混入來添加一些組件選項。如 vue-router

4. 添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。

5. 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router

 三、插件的開發

（一）、創建項目 vue-msg

vue create vue-msg

（二）、創建plugins目錄

1.創建提示組件：vue-msg\plugins\vue-msg.vue：

<template>
    <div>
        <div class="msg-content" :class="{active:msgStatus}">{{text}}</div>
    </div>
</template>
<script>
export default {
    name: 'vue-msg',
    data() {
        return {
            text: '',
            msgStatus: false
        }
    },
    methods: {
        showMsg(msg,time) {
            this.text = msg
            this.msgStatus = true
            setTimeout(() => {
                this.msgStatus = false
            }, time)
        }
    }
    
}
</script>
<style>
    .msg-content {
        display: none;
        padding: 10px 20px;
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
        background-color: rgba(0,0,0,0.5);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .active {
        display: inline-block;
    }
</style>

（三）、創建插件打包入口文件:vue-msg\plugins\index.js:

注意：作爲vue插件需要有install方法以供初始化，具體原因參考之前的文章：vue.use()原理和Vue插件的開發使用：https://blog.csdn.net/MiemieWan/article/details/102593344

// 插件打包入口文件
import msg from './vue-msg.vue'
const plugin = {};
//作爲vue插件需要有install方法以供初始化
plugin.install = (Vue) => {
    // vue中掛上組件
    Vue.component(msg.name, msg)

    // 設置全局變量
    Vue.prototype.myMsg = '我是小紅果';
}

export default plugin;

（四)、打包插件

package.json：

  "name": "vue-msg-123111", // 修改名字
  "version": "1.1.1", // 修改版本號
  "private": false, // 改爲公開
  "main": "lib/vue-msg.umd.min.js", // 用戶引用插件時的入口文件
  "license": "MIT", // 添加執照
  "description": "測試插件", // 添加描述
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    // 添加打包項：打包到文件夾lib，名字爲vue-msg, 打包入口plugins/index.js
    "lib": "vue-cli-service build --target lib --name vue-msg --dest lib plugins/index.js "
  },

打包：

npm run lib

生成lib文件夾：

（五）發佈到npm

登錄：輸入用戶名、密碼、郵箱

npm login

發佈：

npm publish

（六）使用插件

創建新項目用於測試插件：

vue create vue-test

安裝插件：

npm i vue-msg-123111

在main.js中引入插件及其css並初始化插件：

import Vue from 'vue'
import App from './App.vue'
import VueMsg from 'vue-msg-123111'
import 'vue-msg-123111/lib/vue-msg.css'

Vue.config.productionTip = false
Vue.use(VueMsg);

vm = new Vue({
  render: h => h(App),
}).$mount('#app')

在App.vue中使用插件：

<template>
  <div id="app">
    <button @click="showTip">顯示提示</button>
    <vue-msg ref="msg"></vue-msg>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    showTip() {
      // ref能獲取到msg組件的所有數據和元素
      this.$refs.msg.showMsg('提示兩秒後消失', 2000) // 使用插件組件中的方法
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果：