vue项目基建

路由模块化 , 高频全局组件模块化

// require.context   获取文件名称 和 获取文件导出内容
require.context("文件路径", 是否有子文件, 正则匹配文件名)
 例：let fileName =  require.context('./', false, /\.vue/)
                    fileName.keys() // 获取所有文件名
                    fileName.keys().forEach(item => {
                          console.log(fileName(item).default)   // 获取每个文件默认导出
                   })

权限

组件级: 全局自定义指令
<button :v-xxx="true"> 删除 </button>
Vue.directive('xxx', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el, binding, vnode) {
          // el 指令所绑定的元素，可以用来直接操作 DOM。
          // binding 当前指令信息,传的值
          // vnode  Vue 编译生成的虚拟节点, 包含当前vue实例的所有属性, store, data , methods 等等
          // vnode.context.$store.state.xxxx
          if(binding.value) {
            el.parentNode.removeChild(el)
          }
        }
    })

页面级:  路由守卫
  router.beforeEach((to, form, next) =>{
    if(to.meta.token) {
      if(token) {
        next()
      } else {
        next({
          path: "/login"
        })
      }
    }else {
      next()
    }
  })