項目地址
凱爾前端：https://github.com/Mrshenxh/Kayle
項目技術選型
凱爾前端技術選型為vue+ant-design-vue+vuex。
vue優(yōu)點：
1、輕量級框架
2、雙向綁定
3、簡單易學
4、組件化
5、虛擬DOM
ant-design-vue介紹：
ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫，它其實是Ant Design的Vue實現(xiàn)，組件的風格與Ant Design保持同步，組件的html結構和css樣式也保持一致。
vuex：vue上更方便的持久化工具。
項目結構
dist:
通過yarn build命令生成的部署文件夾。
node_models:
項目插件文件夾
public：
項目頭資源配置文件夾
src/assets：
靜態(tài)圖片文件夾
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，避免出現(xiàn)跨域等問題
項目本地環(huán)境
將項目從git拉取之后，執(zhí)行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: 主要針對核心接口，錄制接口相關模塊組件(后續(xù)遷移優(yōu)化)
components/testplan: 測試計劃相關組件，包括創(chuàng)建計劃，計劃列表，計劃詳情頁，計劃展示等組件
components/userBackEnd: 登錄注冊頁背景
