vue + element-ui 搭建后台管理页面

发表于 | 分类于

终于轮到我自己全权负责一整个后台管理页面，基于前后端分离的基础上，毫不犹豫地选了 vue + element-ui 同学。

准备工作

  1. 跟紧时代的脚步，使用 vue-cli v3.0　新建项目。

  2. 引入 element-ui

  3. 正式开发前请一定和产品经理确认好开发文档。

项目分割

拿到原型图，确认好功能后，开始项目分割；

本次因为只是个简单的后台项目，大部分内容就是表单数据展示，以及对数据的增删改查，所以只是分为侧边列表和具体的操作页；

大概项目列表如下：

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
dist/   // 打包目录
  |
public/
  |
  |- favicon.ico  // 图标
  |- index.html   // html 模板
src/
  |
  |- api/  // 项目数据交互接口 
  |- assets/   // 静态文件：静态图片，基础 scss
  |- components/   // 项目组件库 
  |- store/   // vuex 状态管理 
  |- utils/   // 工具函数 
  |- views/   // 视图层
    |
    |- Admin/  // 管理员管理
    |- RedPackage/  // 红包管理
    |- Robot/  // 机器人管理
    |- Supervison/  // 聊天监管
    |- System/   // 系统管理
    |- User/   // 用户管理
    Home.vue   // 主视窗入口 （头，侧边栏）
  App.vue   // 主项目视图文件
  Main.js   // 主程序文件
  router.js   // 路由文件
.eslintrc.js 
.gitignore
.postcssrc.js
babel.config.js 
package.json
README.md    // 项目说明文档

之后每个分类下面不同页面再分开，例如红包管理：

1
2
3
4
5
|- RedPackage/  // 红包管理
  |
  |- index.vue
  |- packState.vue
  |- sendPack.vue

index.vue 是接入口，具体页面就放到各自的模块里。

接着一顿操作猛如虎，三天就完成了项目，撒花，撒花。。。然后是测试，重构阶段。