Vue插件使用

Vue插件：

首先先从Vue的文档中找出关于Vue插件的定义、使用规则。以此来反推如何开发一个属于自己的插件。

Vue插件功能：

• 添加全局方法或者property
• 添加全局资源：指令、过滤器等
• 通过全局混入添加一些组件选项
• 添加实例方法，通过把他们添加到Vue.prototype上实现
• 一个库，提供一个自己的API，同时提供以上的一个或多个功能。

Vue如何使用插件：

• 通过全局方法Vue.use()使用插件。其实调用插件类的install(静态方法)方法，同时或传入Vue实例，也可以传入其他可选对象。

  Vue.use(MyPlugin) ==> Myplugin.install(Vue)
  

• Vue.use()会自定阻止多次注册相同的插件

• 以上过程可以称为加载插件的过程，通过观察VueRouter的使用会发现可以通过 new VueRouter()的方式传递插件需要的参数。

Vue开发插件：

基于以上内容介绍我们可以实现一个简单版初始化的代码，如下：

let _Vue = null
class MyPlugin {
  static install (Vue) {
    if (MyPlugin.install.installed) {
      return
    }
    MyPlugin.install.installed = true
    _Vue = Vue
  }
}

接下来我们接着完善，补充一个自定义组件：

import Vue from 'vue'
import MyPlugin from './MyPlugin'
Vue.use(MyPlugin)

CustomView.vue

<template>
  <div>
    自定义组件01
  </div>
</template>
​
<script>
export default {
  name: ' custom-view'
}
</script>

MyPlugin.js

import CustomView from './CustomView.vue'
let _Vue = null
export default class MyPlugin {
  static install (Vue) {
    if (MyPlugin.install.installed) {
      return
    }
    MyPlugin.install.installed = true
    _Vue = Vue
    _Vue.component('custom-view', {
      render (h) {
        return h(CustomView)
      }
    })
  }
}

疑问：

是否会有疑问,为什么没有使用template模板渲染，那如果就是单纯的喜欢使用template模板怎么办？

先说方法如下：

更完整的配置在这里：cli.vuejs.org/zh/config/#…

//vue.config.js
module.exports = {
  // 选项...
  runtimeCompiler: true
}

原因如下：

• Vue的构建版本不一样
• Vue的构建版本有：运行时版本、完整版
• 运行时版本，不支持template编译（不带编译器，编译的作用是将template模板转成render函数）
• 完整版：包含运行时和编译器，同时代码的体积也会相对大一点，程序运行时会将模板转换成render函数
• 通过Vue Cli创建的项目使用的是运行时版本