01一劳永逸的组件注册

通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？
其实，我们可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。
我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。

  1. //  global.js文件
  2. import Vue from 'vue'
  3. function changeStr (str) { 
  4.   return str.charAt(0).toUpperCase() + str.slice(1)
  5. }
  6. const requireComponent = require.context('./', false, /\.vue$/)// 查找同级目录下以vue结尾的组件
  7. const install = () => {  
  8.   requireComponent.keys().forEach(fileName => { 
  9.     let config = requireComponent(fileName)   
  10.     console.log(config) // ./child1.vue 然后用正则拿到child1  
  11.     let componentName = changeStr(    
  12.       fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))  
  13.     Vue.component(componentName, config.default || config) 
  14.   })}
  15. export default {  install 
  16.                 // 对外暴露install方法
  17.                }

最后我们就可以随时随地在页面中使用这些高频组件，无需再手动一个个引入了。

02高精度权限控制

——自定义指令directive
我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。
针对这种情况，我们可以通过全局自定义指令来处理：我们先在新建个 array.js 文件，用于存放与权限相关的全局函数；

  1. // array.js
  2. export function checkArray (key) {
  3.   let arr = ['1', '2', '3', '4', 'demo']
  4.   let index = arr.indexOf(key)
  5.   if (index > -1) {
  6.     return true // 有权限
  7.   } else {
  8.     return false // 无权限
  9.   }
  10. }

然后在将 array 文件挂载到全局中:

  1. // main.js
  2. import { checkArray } from "./common/array";
  3. Vue.directive("permission", {
  4.   inserted (el, binding) {
  5.     let permission = binding.value; // 获取到 v-permission的值
  6.     if (permission) {
  7.       let hasPermission = checkArray(permission);
  8.       if (!hasPermission) { // 没有权限 移除Dom元素
  9.         el.parentNode && el.parentNode.removeChild(el);
  10.       }
  11.     }
  12.   }
  13. });

最后我们在页面中就可以通过自定义指令 v-permission 来判断：

  1. <div class="btns">
  2.   <button v-permission="'1'">权限按钮1</button>  // 会显示
  3.   <button v-permission="'10'">权限按钮2</button>  // 无显示
  4.   <button v-permission="'demo'">权限按钮3</button> // 会显示
  5. </div>