通过简易配置动态在线生成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']))
    })
}
阅读 1.1k
15 声望
0 粉丝
0 条评论
15 声望
0 粉丝
文章目录
宣传栏