Vue 高级使用 组件动态导入 Render

创建项目

vue create super-vue

组件导入

公用组件一般都会写在components中

import HelloWorld from "@/components/HelloWorld.vue";

这样导入

如果组件多了，就会每次都这样傻瓜般导入

优化

global.js

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())  // ["./HelloWorld.vue", "./child.vue"]
requireComponent.keys().forEach(fileName=>{
    const config = requireComponent(fileName);
   // console.log(config,'config')
   const componentName = changeStr(
       fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')
   )
   // console.log(componentName)
   Vue.component(componentName, config.default || config);
})

之后在main.js导入

import global from "./components/global"

以后项目可以按照这样，修改匹配规则，公共组件一键导入，之后就不要在每个项目文件中单独导入了。

组件动态导入

import Index from "./views/index.vue";

    {
      path: "/index",
      name: "index",
      component: Index
    },

优化

如果模块化

导入 模块话虽然可以方便让我们导入的文件少写，但模块多了，还是会烦

router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
// import Index from "./views/index.vue";
// import Login from './router/login.router.js'

Vue.use(Router);

const routerList = [];

function importAll(r){
  r.keys().forEach(
    (key)=>{ 
      console.log(r(key))
      routerList.push(r(key).default)
    }
  )
}
console.log(routerList)
importAll(require.context('./router',true,/\.router\.js/))
export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    ...routerList,
    {
      path: "/",
      name: "home",
      component: Home
    },
    // {
    //   path: "/index",
    //   name: "index",
    //   component: Index
    // },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
});

Render

• template里一值多判
• 代码冗余，杂乱

<!-- button -->
<script>
export default {
    props: {
        type:{
            type:String,
            default:'normal'
        },
        text: {
            type: String,
            default:'normal'
        }
    },
    render(h){
        return h('button',{
            // v-bind
            class:{
                 btn:true,
                'btn-success':this.type === 'success',
                'btn-danger':this.type === 'dangerous',
                'btn-warning':this.type === 'warning',
                'normal':this.type==='normal',
            },
            // dom 属性
            domProps: {
                innerHTML: this.text || '默认'
            },
            // 事件
            on: {
                click: this.handleClick
            }
        })
    },
    methods: {
        handleClick() {
            this.$emit('myClick','参数')
        }
    }
}
</script>
<style scope>
    .btn{
        width: 200px;
        height: 40px;
        line-height:40px;
        text-align: center;
       
    }
    .normal{
         color: white;
    }
    .btn-success{
        color: green
    }
    .btn-danger{
        color: red
    }
    .btn-warning{
        color: orange
    }
</style>

<Button :type="type" :text="text" @myClick ="parDome"></Button>

import Button from './button'

  methods: {
    parDome(a){
        console.log(a,111)
    }
  }

权限设置

array.js

export function checkArray(key){
    let arr= ['1','2','3','4']

    let index = arr.indexOf(key);

    if(index>-1){
        return true
    }else {
        return false
    }
}

main.js

import {
  checkArray
} from './common/array'

Vue.directive('display-key', {
    inserted(el, binding) {
      let displayKey = binding.value;

      if (displayKey) {
        let hasPermission = checkArray(displayKey)
        // 如果没有权限 删除dom节点
        if (!hasPermission) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      } else {
        throw new Error('需要key值')
      }
    }
  }
)

    <!-- 注意单引号 -->
    <div v-display-key="'2'">
      <button>我是权限一</button>
    </div>
    <div v-display-key="'12'">
      <button>我是权限二</button>
    </div>
    <div v-display-key="'3'">
      <button>我是权限三</button>
    </div>

github:项目地址