Vue中安装插件的方式

一. 认识Vue插件

• 1.1. 通常向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：
  • 1.1.1. 对象类型：一个对象，但是必须包含一个install的函数，该函数会在安装插件时执行

      // 方式一：传入对象的情况
      app.use({
        install: function(app) {
          console.log('传入对象的install被执行：',app);
        }
      })
    

  • 1.1.2. 函数类型：一个function，该函数会在安装插件时自动执行

      // 方式二：传入函数的情况，直接在执行函数的时候传入app
      app.use(function(app){
        console.log('传入函数被执行：',app);
      })
    

• 插件可以完成的功能没有限制，比如下面的几种都是可以的：
  • 添加全局方法或者property, 通过把它们添加到config.globalProperties上实现；
  • 添加全局资源：指令/过滤器/过渡等
  • 通过全局mixin来添加一些组件选项；
  • 一个库，提供自己的API，同时提供上面提到的一个或多个功能；

1.2 全局指令导入使用插件方式

• 1.2.1. 在directives文件夹，index.js文件，修改导出函数名：
  • 具体代码如下：

      import directiveFocus from "./focus";
      import  directiveUnit from "./unit";
      import directiveFtime from "./ftime";
    
      export default function directives (app) {
        directiveFocus(app)
        directiveUnit(app)
        directiveFtime(app)
      } 
    

• 1.2.2. 在main.js文件中，导入并执行directives函数
  • 具体代码如下：

      import { createApp } from 'vue'
      import App from './01_自定义指令/App.vue'
      import directives from './01_自定义指令/directives/index.js'
      // 使用插件的方式，可以直接链式调用，使用use插件方式去调用的时候，把directives当成一个函数去调用，并且传入App
      // 写法上的转变，并没有说这个东西比原来的要好， 使用插件的方式去写的话，比起调用函数的话稍微优雅一点点
      createApp(App).use(directives).mount('#app')