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

文章内容概述

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

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

一、自定义指令

        Vue中普通的指令主要包括v-on、v-model、v-if、v-show等，功能多但不够全面，针对一些定制化的需求，而该需求在项目中使用较多时，可以考虑使用自定义指令实现。

全局自定义指令

        如果某个自定义指令多处被使用，可以对该指令进行全局的挂载，全局挂载指令通常在main.js文件中，通过Vue.directive()实现。

        当想实现自定义指令复用或自定义指令较多时，可以使用一个专门的js文件存放自定义指令：

const directs = {
    focus: {
        inserted: () => {
            //写入你希望执行的事件
            //如此处为focus，可以将事件写为 当前元素获取焦点: DOM元素.focus()
        }
    }
}

export default directs

        在main.js中引入该js文件中的内容，并通过Vue.directive统一将自定义指令注册至全局。

        对 directs.js 中的指令进行遍历，依次将其注册。

import directs from "./directs.js"

Object.kes(directs).forEach(dir) => {
    Vue.directive(dir, directs[dir])
}

局部自定义指令

        对于模块化项目而言，可以在每个模块中通过如上“全局自定义指令”中的方式实现批量注册自定义指令，每个模块中使用各自的自定义指令js文件（此方法使用较少）

自定义指令组成

钩子函数

        自定义指令中，通过钩子函数实现组件不同阶段的响应事件：

Vue.directive('focus',{
    bind() {
      // 只会在指令绑定到 HTML 元素上时触发一次
      console.log('bind triggerd')
    },
    inserted() {
      // 该HTML元素插入到父元素上时触发
      console.log('inserted triggerd')
    },
    updated() {
      // 组件更新时触发（data中的数据更新等 会触发render函数的情况发生时 触发）
      console.log('updated triggerd')
    },
    componentUpdated() {
      // 组件更新完成后触发
      console.log('componentUpdated triggerd')
      
    },
    unbind() {
      // 只会在指令解绑时触发一次
      console.log('unbind triggerd')
    }
  })

钩子函数中的参数

        各个钩子函数中都有相同的几个参数,，以bind为例：

const directs = {
    focus: {
        bind(el, bindValue){
            // el：绑定该指令的元素，可以直接操作 该DOM元素。
            // bindValue：指令操作对象，可以接收指令传参，如 v-model = "123" 传递的 123 可以通过bindValue对象的value属性拿到，具体包括属性如下：
               // name：指令名 ( 'v-' 后面那一小戳，一般用不上);
               // value：指令的绑定值;
               // oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子函数中可用。
               // expression：字符串形式的指令表达式， 如v-focus = " 'abc' + 'cde' "，这里拿到的值就是'abc' + 'cde'这个表达式（并非结果）。
               // arg：传给指令的参数。
               // modifiers：指令所使用的修饰符组成的对象，如v-focus.relative.now，该参数获取的值则为{ relative: true, now: true }。
               // vnode：编译生成的虚假DOM。
               // oldVnode：上一个虚拟DOM，仅在 update 和 componentUpdated 钩子函数中可用。
        }
    }
    
}

使用技巧

        在上一节中提到了两个属性：arg 和 value，都是接收指令传递的参数，两者有何不同呢？

        从视觉上看，两者的不同主要体现在书写方面，如使用 v-focus = "参数"，此时传递的参数需使用 value 进行接收，v-focus:"参数”，此时则需要使用 arg 进行接收。

        （因技术水平有限，可能有其他方面的区别，恳请大佬指正！）

        在 “钩子函数” 一节中有提到update钩子函数，该钩子函数会在绑定该指令的DOM元素状态发生改变时触发，包括但不限于大小、颜色、选中与否等状态的改变，可以利用这些功能灵活组合实现想要的效果。

        这里提供一个有趣的思路：在DOM元素变化大小时，颜色逐渐变化，设置多个阈值，实现颜色之间的切换，而update钩子函数拥有特殊的简写形式：

Vue.directive('color-size', function (el, binding) {
  if(el.style.width > 1000){
    el.style.backgroundColor = "white"
  } else if(el.style.width > 500 && el.style.width <= 1000){
    el.style.backgroundColor = "red"
  } else {
    el.style.backgroundColor = "yellow"
  }
})

        如上的判断会在DOM元素状态变更时自动触发。

        自定义指令还可实现判断用户权限，实现按钮的是否显示或是否可以操作，从而限制用户的新增、编辑、查看等。

二、自定义插件

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