Vue插件Plugins的简单例子

通过vue插件,我们能够给vue原型挂载属性、注册全局组件或过滤器。
(PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project

  初学vue的时候,一直都觉得插件(plugins)这个功能生涩难懂,但是在公司项目里见过不少。后来基于vue开发了一段时间,再回顾官方文档,写个插件其实也非常简单。
  这篇文章就是通过一个简单的例子,总结一下这个过程,加深记忆,也希望可以帮助后来的人。

一、插件是什么

  我们在vue中,经常会通过全局方法Vue.use()来使用插件,且这一步需要在你调用 new Vue() 启动应用之前完成。例如:Vue.use(VueRouter)Vue.use(Vuex)Vue.use(MintUI)。但是用axios时,就不需要用Vue.use(axios),就能直接使用,这是为什么呢?
  因为axios没有install。有人打趣说,axios是国际的,不去买vue的账,因此它没去实现vue的插件。但是如果我们自己去写个插件,去实现类似Vue.prototype.$axios = Axios这种事情,也是可以的。

  由上可知,所谓vue的插件,就是有install的组件(这么说可能比较狭隘,但有这么个意思),具体实现方式看完之后就明白了。

  而vue插件有什么用呢,随便举个例子:例如在一个项目中,有很多部分需要复用,比如加载的loading动画,弹出框。如果一个一个的引用也稍显麻烦,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件的需求。

二、使用方法

  首先通过vue-cli创建一个vue项目,很简单,执行命令:

vue create my-project

  编写插件的总体流程:声明插件 - 写插件 - 注册插件 - 使用插件
  下面开始编写一个安装器插件,通过这个过程来学习。

1. 声明插件

  首先在 src目录 下创建一个 plugins目录,然后在该目录下创建一个installer.js,如下图所示:
vue_plugins_create.png
  它要实现的功能其实只用包含一个叫作install的函数(无论导出的是对象还是其它,必须具备install函数)。这里我们定义一个构造函数Installer(安装器)。

2. 注册插件

  在main.js中引入插件,如下图所示:
vue_plugins_register.png
  因为Installer本身包含一个install函数,所以可以给它直接用Vue.use(Installer)

  这个时候执行npm run serve然后访问页面,可以看到执行了在installer.js里的console.log(Vue)内容,即在插件中可以拿到Vue。

3. 写插件

  下面开始编写插件,我们实现两个功能:
  ● 注册全局组件
    ৹ 注册一个test组件
  ● 挂载属性
    ৹ 挂载一个$log属性,这里是一个函数
installer.js代码如下:

// vue插件必须具备Install函数
function Installer() {
  // 自身初始化行为
}

Installer.install = function(Vue) {
  // 接收Vue的构造函数,给原型挂载属性 或 注册全局组件 或 过滤器
  // console.log(Vue);

  // 1.注册全局组件
  Vue.component("test", {
    template: `<h1>我是在Installer(安装器)插件中注册的全局组件</h1>`
  });

  // 2.挂载属性(方法一)
  // 这个方法不好,因为未来可以通过 this.$log = xxx 来实现子类对象修改父类属性
  /*
  Vue.prototype.$log = function() {
    console.log("hello world");
  };
  */

  // 2.挂载属性(方法二)
  // 给原型定义属性的获取和设置(不给设置,只给获取)
  let log = function() {
    console.log("Installer(安装器)插件中的log函数");
  };
  Object.defineProperty(Vue.prototype, "$log", {
    // 定义set:设置$log属性时的行为 或者 不定义set:不能设置$log属性
    set: function(newV) {
      console.log(`你不能设置:${newV}`);
      // 不让 $log = newV
    },
    get: function() {
      return log;
    }
  });
};

export default Installer;

4. 使用插件

  回到Home.vue,使用插件,如下图所示:
vue_plugins_use.png
  执行npm run serve然后访问页面,打开console,查看结果,如下图所示:
vue_plugins_result.png

三、可能的报错

  如果执行npm run serve后访问页面出现报错,
vue_runtime-only_build_error.png
  报错原因:
  这里引用的是vue.runtime.esm.js,造成的不能正常运行。
  解决方法:
  这里我们使用的是vue-cli3x搭建的vue项目,在项目的根目录下添加配置文件vue.config.js,目的是修改在引入vue时,不要采用runtime形式的文件,而采用 dist/vue.esm.js形式文件,然后将下面这段代码复制粘贴到vue.config.js中:

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  configureWebpack: config => {
    config.resolve = {
      extensions: [".js", ".vue", ".json", ".css"],
      alias: {
        vue$: "vue/dist/vue.esm.js",
        "@": resolve("src")
      }
    };
  }
};

  重启服务,刷新,正常显示。


参考
https://cn.vuejs.org/v2/guide/plugins.html
https://blog.csdn.net/weixin_41791279/article/details/87936892


  目录