vue搭建后台项目

前端这点事 299 0

项目搭建步骤

1.vue-create-app vue-vuex-antd-mange-pro  
初始化一个名为vue-vuex-antd-mange-pro基础项目  
vue-create-app是官方的@vue/cli3脚手架,具体安装参考https://cli.vuejs.org/zh/guide/installation.html
2.新建 src/assets, 在assets下新建fonts、images、js、style文件夹用来存放项目的静态文件,  
js其实就是utils放进来的,作为公共js文件夹。  
@/assets/js下面的permission.js 是用来匹配后台返回用户的权限路由用的,一个简单的递归函数而已。
3.新建 src/component, 里面新建Header、Aside、Content等组件,作为公共组件(后台管理的头部、侧菜单栏、内容部分)
4.新建 src/http/request.js, 简单封装下axios,export常用的get、post、patch、put、upload等请求,  
相应页面的请求写在相应的页面名字的js里.
5.新建 src/layout,ps: 个人觉的正常的业务逻辑需要用户先登陆,不然就是login,login是不需要header、aside、content的,  
所以路由可以设计成除了login类似的,都是作为layout的子路由去处理,类似下面这种路由嵌套:
    const routes = [
        {
            path: "",
            component: resolve => require(["@/layout"], resolve),
            name: "管理界面",
            meta: {},
            children: [
            {
                path: 'test',
                component: resolve =>
                require(["../views/test/frist"], resolve),
                name: "测试页面1",
                meta: {},
            }
            ]
        },
        {
            path: "/404",
            component: resolve => require(["@/views/404"], resolve),
            name: "404",
            meta: {}
        },
        {
            path: '/login',
            component: resolve => require(["@/views/login"], resolve),
            name: "登陆",
            meta: {}
        }
];
6.store就简单的模块化就好了,页面使用vuex提供的映射,把需要的全局状态映射到组件内部即可,  
我这里也将vuex模块化一下,方便项目变大以后扩展。
7.views存放页面,没什么说的
8.app.vue 基本不做处理。
9.新建.env、.env.development、.env.staging、.env.prod等多环境配置文件,满足不同命令打包时使用不同环境的配置.
10.项目性能优化(主要包括:cdn、gzip压缩css和js、去除console.log、只打包有过修改的文件、图片压缩、打包日志)

项目运行

运行项目:yarn dev || npm run dev
运行模拟后端权限接口:yarn server || npm run server
运行ui界面: vue ui

项目路由配置和权限配置说明

设计权限思路:我们当时项目是由后端返回当前用户的实际权限菜单,前端本地保存一份完成的菜单路由,  
通过递归匹配后端返回的权限菜单,生成最终的菜单,再concat错误路由的菜单,通过router.addRoutes(final_routes)生成最终的路由。
实际操作: 项目中设置一个开关,用来开启或关闭是否校验后端返回的用户权限。
关闭校验:这样就可以直接使用本地asyncRoutes,去开发页面; 
开启校验,调用后端返回的用户权限,并且在项目中,我给路由也拆成模块,方便在项目开启和关闭路由权限判断时,  
调用router.addRoutes去添加errRoutes到尾部(注:这里只能在尾部追加错误路由,不然会导致所有路由跳转404页面);

关于接口地址说明

1.没有设置代理:
如果.env相关的配置文件也没有设置api地址,此刻走项目启动时候的默认地址 + 定义接口的相对路径
如果设置了.env里面的接口地址,此时就是.env的地址 + 定义接口的相对路径
2.设置了代理,在满足第一条的情况下,不管你设置.env设置成啥域名,最后请求地址都会转发到需要转发的地址上。
(可以理解成代理的权利比较大,只要有代理就先走代理!)

更多vue.config.js的配置

官方文档: Configuration Reference.


附上项目地址:https://github.com/zzxiexin/vue-vuex-antd-mange-pro


标签: Vue

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~