Vue项目初始化实用功能总结（二）

文章内容概述

        主要包括本人工作过程中大佬所写的项目中个人认为较为实用的技术进行总结（不涉及项目源代码，仅为官方文档或自行编写的参考代码），主要包括：

1. 自定义指令directive;
2. 自定义插件，并使用Vue.use()使用;
3. localforage实现类似于本地存储;
4. require.context实现Vue项目工程自动化;
5. i18n插件实现项目中英文切换;

一、自定义指令

        请看：Vue项目初始化实用功能总结（一）

二、自定义插件

        自定义插件实现原理及简短介绍

        Vue中自定义插件的定义其实是比较广泛的，自己写的一些js文件，有一些特定的功能（只要是需要用js代码实现的，都可以称之为特定功能），也可以将其看成某种类型的插件，这些有特定功能的插件都可以通过Vue.use()被注册进Vue项目中。

在介绍如何使用Vue.use()注册组件前，这里先介绍一下它的使用原理：

        从官方文档中我们可以看出，Vue.use()只能接收两种值，Function 或者 Object，通过全局方法 Vue.use() 使用插件，Vue.use 会自动阻止多次注册相同插件，它需要在你调用 new Vue() 启动应用之前完成，Vue.use() 方法至少传入一个参数，该参数类型必须是 Object 或 Function。

        如果是 Object 那么这个 Object 需要定义一个 install 方法；如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行，当 install 执行时第一个传入的参数就是 Vue实例本身，其他参数是 Vue.use() 执行时传入的其他参数。

        Vue官网中Vue.use()介绍

        查看官方文档可以看出，显然对象和函数传入是有所不同的：

1.  对于对象形式的插件而言，需要暴露一个install方法 
2.  对于函数形式的插件而言，直接作为默认暴露即可 

        语言描述相对较为抽象，这里使用代码进行说明。

        首先是对象形式的插件：

const handler = {
  install: () => {
    console.log("这里是需要注册的插件")
  }
}
export dedfault handler

         对象中包括了一个install方法，方法中可以执行任意操作（不一定能执行成功），该方法会在Vue.use()时执行。

import handler from "./handler.js"

Vue.use(handler)
 
const app = new Vue().$mount('#app')

        对于函数形式的插件，可以使用如下写法：

// 默认Vue.use()会传入一个 Vue 作为参数给内部的函数
function handler(Vue){
  console.log(Vue)
}
export default handler

        handler方法同样会在Vue.use()时执行。 

        自定义插件使用技巧

        自定义插件不仅仅局限于常用的Element-ui组件库、Echarts图表等，也可以是自行编写的各类具有实际功能的代码，通过这些代码，可以实现一些有趣的功能，包括发送网络请求的函数、执行特定功能、挂载数据等。

const handler = {
    // 执行某种事件
    doSomething(){
        // .......
    },
    // 对于需要消息订阅的项目而言，这里可以发送网络请求，获取消息通知中的数据
    // 对于多租户的项目而言，可以进行租户区分等。
    async getMessageData(){
        const res = await getMessage();
        // .......
    },
    async getUserList(){
        const res = await getUser();
        // .......
    },
    // 这里发送的网络请求，如果多个模块需要，则可以将其赋值进Vue.prototype中，方便调用
}

const install = (Vue) => {
    Vue.prototype.$vueFuc = handler
}

// 暴露出一个install方法，用于Vue.use()注册
export default { install }

        自定义插件补充介绍

        此处为介绍Vue.use()函数源代码，并不影响实际使用，不感兴趣的可以直接忽略。

        在Vue.use()官方给出的源代码逻辑如下：

export function initUse (Vue: GlobalAPI) {
 Vue.use = function (plugin: Function | Object) {
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  if (installedPlugins.indexOf(plugin) > -1) {
   return this
  }
  const args = toArray(arguments, 1)
  args.unshift(this)
  if (typeof plugin.install === 'function') {
   plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
   plugin.apply(null, args)
  }
  installedPlugins.push(plugin)
  return this
 }
}

        首先，Vue.use被赋值了一个函数，函数传参限制类型为 Function | Object 。

        即如上代码中的：

plugin: Function | Object

        对应了上述所说的，Vue.use()传参为函数或是对象时的区别，传入其他类型的数据则会报错。

        其次，Vue.use()对传入的插件是否注册过进行判断，注册过则不再进行注册，返回 this 。

        对应了上述Vue.use()可以自动阻止多次重复注册的功能，即如上代码中的：

  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  if (installedPlugins.indexOf(plugin) > -1) {
         return this
  }

        然后，将Vue.use()执行时传入的其他参数统一处理，并对传入的插件类型进行判断，对 Function | Object 不同类型进行不同处理。

  const args = toArray(arguments, 1)
  args.unshift(this)
  if (typeof plugin.install === 'function') {
   plugin.install.apply(plugin, args)
  } else if (typeof plugin === 'function') {
   plugin.apply(null, args)
  }

         如果是传入的插件是对象类型，且对象中含有install方法，则执行install方法，如果传入的是函数类型，则直接执行函数。

        最后，push进数组，等待 new Vue() 被调用后执行函数。

        总结

        自定义插件可以是各种类型的js文件，但必须满足如下条件：

• 必须 export 暴露一个对象或是函数，为对象时必须含有install方法。
• 必须使用Vue.use()注册。
• 注册必须在 new Vue() 之前。

        对于自定义插件的灵活应用，大家可以自行探索，此处给出几种可行的思路：

• 对于多租户的项目，可以在此处获取所有租户的数据，在用户登录时，根据用户输入的登录信息，切换至不同租户。
• 对于集成了消息通知的项目，可以在此处获取消息通知的类型。
• 可以在插件中写入多个函数，并通过install方法，将其注册至Vue.protoype上，便于后续调用。
• 插件中执行某些事件，可以根据具体项目需求自行决定，并暴露为一个函数。 

三、 localforage

        请看：Vue项目初始化实用功能总结（三）