项目地址
凯尔前端：https://github.com/Mrshenxh/Kayle
项目技术选型
凯尔前端技术选型为vue+ant-design-vue+vuex。
vue优点：
1、轻量级框架
2、双向绑定
3、简单易学
4、组件化
5、虚拟DOM
ant-design-vue介绍：
ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。
vuex：vue上更方便的持久化工具。
项目结构
dist:
通过yarn build命令生成的部署文件夹。
node_models:
项目插件文件夹
public：
项目头资源配置文件夹
src/assets：
静态图片文件夹
src/components：
组件文件夹
src/router：
项目路由模块
src/store：
项目持久化，即vuex配置中心
src/utils：
公共方法层
src/views：
项目view层，每个route对应一个view
src/App.vue
项目默认指向的vue
src/main.js：
项目主入口js文件，初始化如ant-design-vue，vuex，router，json-viewer等全局组件
babel.config.js:
按需加载组件样式和代码的配置文件。需要安装插件yarn add babel-plugin-import --dev 使用
vue.config.js:
devServer配置文件。配置相关proxy，避免出现跨域等问题
项目本地环境
将项目从git拉取之后，执行npm install 或者 yarn install安装项目依赖即可。vue.config.js中，将target下对应的ip地址暂止修改为本地的server地址。同时，util/commonconfig.js中，修改hostIp为贝蒂server地址。
项目views
views/User/Login.vue：登录页
view/User/Register.vue： 注册页
view/interface/instruction.vue: 使用说明
view/interface/intermodule.vue: 核心接口页
view/interface/testplan.vue: 测试计划页
view/interface/transcribe.vue: 录制页面
项目store
store/index.js：
vuex入口文件，所有用到的持久化均需要在此引入注册。
store/modules/auth.js：
用户信息持久化存储，包括 userId, userName, nickName, userIcon, userMessage。
store/modules/mitmproxy.js：
用户临时代理信息持久化存储，包括 port, host_list, mitm_id, expire_time。
项目components
components/layout: 基础布局文件夹，包括页头，页尾，slider等。
components/modulelist: 主要针对核心接口，录制接口相关模块组件(后续迁移优化)
components/testplan: 测试计划相关组件，包括创建计划，计划列表，计划详情页，计划展示等组件
components/userBackEnd: 登录注册页背景
