# 前端介绍

在这款经典的旗舰版前后端分离框架中，前端UI部分我们采用了全新的设计方案，本着精益求精的心态，力求更完美，这款前端框架完全适配手机端、PAD端以及PC电脑端，真正的实现了多端兼容，极大的提升了用户的使用体验，极简的代码书写风格，极大的方便了开发者和使用者；前端框架基于Vue+ElementUI编写，为了方便用户的使用和二次开发，框架中封装了大量的组件，如 数据表组件(ElDataTable) 、Icon选择组件(ElIconPicker)、地图选择组件(ElMapPicker)、标签组件(ElTagsInput) 以及 图片上传组件(UploadImage)等等一系列常规的前端UI组件，极大的简化了开发，提升了开发效率；

# 项目结构

evui
├── dist                // 编译目录(可以线上部署使用)
├── node_modules        // 项目依赖库(依赖安装后自动生成)
├── public              // 公共资源目录
├── src                 // 核心模块
│       └── assets                    // 资源目录
│       └── components                // 前端组件
│       └── config                    // 前端配置
│       └── router                    // 路由
│       └── store                     // 存储
│       └── styles                    // 样式
│       └── utils                     // 工具类目录
│       └── views                     // 视图目录
│       └── App.vue                   // 应用入口
│       └── main.js                   // 主JS文件
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
├── vue.config.js
├── yarn.lock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 访问配置

本项目为前后端分离项目，后端服务配置部署后，前端即可通过URL地址请求后端的服务获取数据并完整展示，此时需要配置统一的后端服务访问地址，前端项目全局配置文件 config/setting.js 可以根据实际情况配置相关的参数，配置文件内容如下：

/**
 * 项目统一配置
 */
export default {
    version: '1.0',
    name: 'LV8.x+EleVue旗舰版',  // 项目名称
    baseURL: process.env.VUE_APP_BASE_URL,  // 接口地址
    whiteList: ['/login', '/forget'],  // 路由白名单(不需要登录的)
    keepAliveList: [],  // 需要缓存的组件名称
    menuUrl: '/index/getMenuList',  // 菜单数据接口
    parseMenu: null,  // 自定义解析接口菜单数据
    parseMenuItem: null,  // 自定义解析接口菜单每一个数据格式
    userUrl: '/index/getUserInfo',  // 用户信息接口
    parseUser: (res) => {  // 自定义解析接口用户信息
        res.data.roles = res.data.roles.map(d => d.roleCode);
        res.data.authorities = res.data.authorities.map(d => d.authority);
        return res;
    },
    tokenHeaderName: 'Authorization',  // token传递的header名称
    tokenStoreName: 'access_token',  // token存储的名称
    userStoreName: 'user',  // 用户信息存储的名称
    themeStoreName: 'theme',  // 主题配置存储的名称
    homeTitle: '主页',  // 首页Tab显示标题,null会根据菜单自动获取
    watchResize: true,  // 是否监听屏幕尺寸改变
    showSetting: true,  // 是否显示主题设置抽屉
    /* 主题默认配置 */
    sideStyle: 1,  // 侧边栏风格,0默认,1暗色
    headStyle: 0,  // 顶栏风格,0默认,1暗色,2主色
    tabStyle: 1,  // 标签页风格,0默认(下划线),1圆点,2卡片
    bodyFull: true,  // 内容区域宽度铺满
    layoutStyle: 0,  // 布局风格,0默认,1顶部菜单风格,2混合菜单风格
    theme: null,  // 默认主题
    showTabs: true,  // 是否开启多标签
    logoAutoSize: false,  // logo是否自适应宽度
    fixedLayout: true,  // 是否固定顶栏和侧栏
    colorfulIcon: false,  // 侧栏是否多彩图标
    sideUniqueOpen: true  // 侧边栏是否只保持一个子菜单展开
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

参数说明如下：

baseURL 参数地址即为后端服务的访问地址，因此需要将后端服务器的地址配置到这个参数中，以实现对后端服务的正常访问；
menuUrl 菜单访问地址，即后端服务器获取菜单列表的地址，此接口获取的菜单数据将实现左侧导航菜单的显示；
userUrl 用户信息获取地址，此接口主要获取当前登录用户信息，以便前端拿到相应的用户信息进行存储和渲染；

备注

其他参数上述都有详细的注释和说明，运行项目之前可以详细的阅读各参数的具体作用以便更好的了解前端系统

# 环境变量

前端框架采用的多环境变量部署的机制，分为 开发环境、测试环境、线上环境，设计多环境部署的初衷是为了更好的进行开发、测试与发布，具体配置如下：

开发环境(.env.development)

NODE_ENV=development
VUE_APP_BASE_URL="http://admin.evl8.pro/"

1
2

测试环境(.env.test)

NODE_ENV=test
VUE_APP_BASE_URL="http://admin.evl8.pro/"

1
2

线上环境(.env.production)

NODE_ENV=production
VUE_APP_BASE_URL="http://api.evl8.pro/"

1
2

温馨提示

具体的环境变量配置以子本地的配置的环境为准，以上为案例介绍

← 快速部署快速部署 →