经过简易配置动态在线生成Vue+ELementUI 脚手架

时间 2020-01-10

标签经过简易配置动态在线生成 vue+elementui vue elementui 脚手架繁體版

原文原文链接

经过简易配置动态在线生成Vue+ELementUI 脚手架

好比咱们要创建这样一个结构的管理系统：npm

首页
页面1
页面2api
- 页面2-1
- 页面2-2
- 页面2-3数组
  - 页面2-3-1
  - 页面2-3-2
页面3
页面4

那么咱们就只须要这样写即可以直接搭建好你须要的架构了bash

[
    {label: '首页'},
    {label: '页面1'},
    {label: '页面2', children: [
        {label: '页面2-1'},
        {label: '页面2-2'},
        {label: '页面2-3', children: [
            {label: '页面2-3-1'},
            {label: '页面2-3-2'}
        ]},
    ]},
    {label: '页面3'},
    {label: '页面4'}
]

点击提交就能够生成你要的架构了，若是你已经安装了vue的开发环境了，那解压后架构

cd project
npm i //cnpm i
npm run dev

即可以启动了code

动态路由

并且也许你还会根据角色的不一样来动态路由，没错，也很是方便路由

编辑 src/permission.js 中的这段代码就能够了开发

function getRoutes() {
    return new Promise(resolve => { 
        /**
         * api.call("/User/getRoutes").then(res => {
         *      //res.data为route Name数组
         *      resolve(filter(routes, res.data))
         * })
         */   
        resolve(filter(routes, []))
    })
}

好比a用户没有 '页面1', '页面2-3-1' 两页面, 那么，数组为routes.js中的name属性get

function getRoutes() {
    return new Promise(resolve => { 
        resolve(filter(routes, ['YeMian1', 'YeMian2/YeMian2-3/YeMian2-3-1']))
    })
}

好比b用户没有 '页面2' 模块

function getRoutes() {
    return new Promise(resolve => { 
        resolve(filter(routes, ['YeMian2']))
    })
}