你不可不知的vue那些事

全局组件注册

高频率使用的组件，我们不要再傻傻的用import单个引入了，弊端：既笨拙，繁琐又低效

我们要对高频率使用的组件放在一个单独文件下，用单独的js文件管理3343

index.js

// 首字母大写，返回整个字符串
function changeStr(str) {
    return str.chartAt(0).toUpperCase() + str.slice(1);
}
// 通过webpack的API
// false 是否匹配同级下的子目录，查找vue结尾的文件
const requireComponent = require.context('./', false, /\.vue$/);

// 返回当前目录文件下带vue的文件
const install = (Vue) => {
    requireComponent.keys().forEach(fileName => {
        // 获取第i个组件
    let config = requireComponent(fileName);
  
    // 获取组件名字
    let component = changeStr(
        fileName.replace(/^\.\//, '').replace(/\.\w+$/, '');
    )
  
    Vue.component(componentName, config.default || config);
    });
}
export default {
    install,
}

main.js文件

import index from '@/components/component/index.js';

// 全局注册
Vue.use(index);

路由文件引入配置

对于业务逻辑很强大，有很多子页面，路由配置都按模块单独分开写，还可实现页面懒加载，当要使用当前页面文件时，才加载，不会项目一启动就全部加载出来

index.routes.js

export default {
    path: './index',
  name: 'index',
  component: () => import('@/views/index.vue'),
  childer: [], // 配置子路由
}

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';

Vue.use(VueRouter);

// 分区存放路由功能模块
const routerList = [];
function importAll(r) {
    r.keys().forEach(
    (key) => routerList.push(r(key).default); // 拿到页面类的default
  )
}
importAll(require.context('../index.router.js', true, /\.routes\.js/));

// 存放核心路由文件
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  ...routerList,
]

Render函数

弥补template的不足而生的，在template里面，存在一值多判断

如下文件示例，就是傻瓜式低级操作

Render.vue

如下文件，高级骚操作

Render.vue

button.vue

组件权限判断组件显隐

组件显隐，用display: block/none; 太low啦，任何一个会F12的，有可能一改，如果后台逻辑处理的不够好，就会造成系统崩溃

array.js

export function checkArray(key) {
    let arr = ['success', '2', '3', '4', 'demo'];
  let index = arr.indexOf(key);
  if (index > -1) {
    return true;
  } else {
    return false;
  }
}

main.js

import checkArray from '../array';
Vue.directive('display-key', {
    inserted (el, binding) {
        let displayKey = binding.value;
        if (displayKey) {
            let hs = checkArray(displayKey);
            if (!hs) {
                el.parentNode && el.parentNode.removeChild(el);
            } else {
        // 抛出异常
        throw new Error('need Key! Like v-display-key = "displayKey"');
      }
        }
    }
})

button.vue