本文共 1443 字，大约阅读时间需要 4 分钟。

1、全局注册组件

import vue from 'Vue'function changeStr(str) {  return str.charAt(0).toUpperCase() + str.slice(1);}const requireComponent = require.context('.', false, /\.vue$/);console.log(requireComponent.keys())requireComponent.keys().forEach(fileName => {  const config = requireComponent(fileName);  console.log(config)  const componentName = changeStr(    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')  )  console.log('componentName', componentName, config.default)  if (componentName != 'Home') {    vue.component(componentName, config.default || config)  } else {    console.log(fileName, 'ssss')  }});

2、引入路由

var routerList = []function importAll(r){  r.keys.forEach(    el => routerList.push(r(key).default)  );}importAll(require.context('./router',true,/\.routes\.js/))

3、render方法实现button 选择，v-if  v-else-if v-else

4 、权限控制

import { hasPromise } from './components/common/array'export function hasPromise(key) {  var arr = [1, 2, 3, 4, 5];  let index = arr.indexOf(key);  if (index > -1) {    return true;  } else {    return false;  }}//main.js Vue.directive('display-key', {  inserted(el, binding) {    let displayKey = binding.value;    if (!hasPromise(displayKey)) {      el.parentNode && el.parentNode.removeChild(el)    } else {      throw new Error('需要key')    }  }})

5、watch

watch: {    progress: {      handler(oldVlau, newValu) {        this.$refs.progress.style.width = val * 100 + "%";      },      immediate: true    }  },

转载地址：http://temsi.baihongyu.com/