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.youkuaiyun.com/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>

效果：