凯尔前端项目结构

项目地址

凯尔前端：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: 登录注册页背景