上一篇总结了后端服务接口的开发，这篇我们主要来总结下前后端分离开发中的前端部分，主要是开箱即用的框架介绍和之前章节组件的梳理和部分的扩展内容，总体希望通过之前简单的产品管理页面啰嗦的几次分享和这两次总结，能够从0-1的快速搭建起一个平台，说明一个够用测试平台开发没有想象中那么难。
往期推荐
- 【提测平台】分享3-正式开发产品需求&项目初始化
- 【提测平台】分享4-实现数据库绑定和产品线显示功能
- 【提测平台】分享5-实现产品线的添加
- 【提测平台】分享6-产品线修改和软硬删除功能实现
- 【提测平台】分享7-实现产品搜索和优化时间显示
- Python Flask API实现方法-测试开发【提测平台】阶段小结(一)
技术简介
在【提测平台】的分享项目中，前端技术主要框架和递进是 Vue -> element ui -> vue-admin-template
Vue.js 是一套用于构建用户界面的 渐进式框架 简单、灵活、高效，只需初中级的 javascript、html、css知识就可以开发界面了，同时现在社区有很多的第三方库，快速集成开发，这里不得不提一开始由一个 “尤雨溪” 开发开源出来的，不得不说是大神。
Element ui 是一套基于Vue开发，饿了吗团队维护，为开发者、设计师和产品经理准备的开源组件库，旨在快速搭建页面。在我看来是一个套进一步降低开发门槛，开箱即用好看统一的组件库，最新的更新版本是3.x的，而本项目使用的是2.x 的版本，无大影响，记住够用就行，目前类似组件库框架很多，比如阿里 antd等
vue-admin-template 是一个后台前端解决方案，它基于 vue 和 element-ui 实现，它进一步二次开发，完整一个开箱即用的后端平台，比如登录、菜单、路由、模版、布局...都定义好了，使用开发只需要按照规则使用开发即可，当然说明下目前也都是基于前两个2.x 版本开发的。template 生态是个基础分支，它的admin 是由大量参考成型一套页面，可以用来参考学习和直接粘贴复制使用的。
以上递进到最后一层，说句实话只需要最简单的js语法知识，就可以开始搞了前端了，当然是对于测试开发个小工具，小平台之类的，更负责定制化的东西还是要专业的前端，毕竟术业有专攻。
扩展：除了vue，目前前端技术特别流行的还有react、angular，组件框架还有antd、iview，后台整套的有andpro，其实基于上述前端不管是个人和还是国内很多互联网大公司都有不少类似的开源项目或者内部使用二次开发项目。
至于对于使用哪种，网上有很多对比文章可以自行搜索，这里我也不想纠结这些，还是那句话，够用、适合，尤其是对自己和项目能够快速开始就是最好的。目前从各公司测试团队使用情况，以及个人入门掌握情况，还是比较推荐vue系列的，另外一个就是后台，开箱即用是antd pro 后台也比较推荐，有react和vue两个版本，下个项目分享或许会用到。
框架使用回顾
代码脚手架 在之前的技术选型的文章中已经给过官方的给出的结构说明图，这里在贴出来回顾下，目前所用到目录涉及全部在src下边，如 /api 封装请求后端接口，/router 定义菜单路由，/views 页面-核心部分，并在此涉及到element组件使用和javasript的代码逻辑实现。
├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json