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

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

地址： 在线生成

比如我们要建立这样一个结构的管理系统：

• 首页
• 页面1

• 页面2

  • 页面2-1
  • 页面2-2

  • 页面2-3

    • 页面2-3-1
    • 页面2-3-2
• 页面3
• 页面4

那么我们就只需要这样写便可以直接搭建好你需要的架构了

[
    {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

便可以启动了

动态路由

而且也许你还会根据角色的不同来动态路由，没错，也非常方便

编辑 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属性

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']))
    })
}