項(xiàng)目地址
凱爾前端：https://github.com/Mrshenxh/Kayle
項(xiàng)目技術(shù)選型
凱爾前端技術(shù)選型為vue+ant-design-vue+vuex代芜。
vue優(yōu)點(diǎn)：
1膳凝、輕量級框架
2帆精、雙向綁定
3姨伤、簡單易學(xué)
4、組件化
5肌幽、虛擬DOM
ant-design-vue介紹：
ant-design-vue是螞蟻金服 Ant Design 官方唯一推薦的Vue版UI組件庫贪庙，它其實(shí)是Ant Design的Vue實(shí)現(xiàn)，組件的風(fēng)格與Ant Design保持同步团赁，組件的html結(jié)構(gòu)和css樣式也保持一致育拨。
vuex：vue上更方便的持久化工具。
項(xiàng)目結(jié)構(gòu)
dist:
通過yarn build命令生成的部署文件夾欢摄。
node_models:
項(xiàng)目插件文件夾
public：
項(xiàng)目頭資源配置文件夾
src/assets：
靜態(tài)圖片文件夾
src/components：
組件文件夾
src/router：
項(xiàng)目路由模塊
src/store：
項(xiàng)目持久化熬丧，即vuex配置中心
src/utils：
公共方法層
src/views：
項(xiàng)目view層，每個(gè)route對應(yīng)一個(gè)view
src/App.vue
項(xiàng)目默認(rèn)指向的vue
src/main.js：
項(xiàng)目主入口js文件怀挠，初始化如ant-design-vue析蝴，vuex，router绿淋，json-viewer等全局組件
babel.config.js:
按需加載組件樣式和代碼的配置文件嫌变。需要安裝插件yarn?add?babel-plugin-import --dev 使用
vue.config.js:
devServer配置文件。配置相關(guān)proxy躬它，避免出現(xiàn)跨域等問題
項(xiàng)目本地環(huán)境
將項(xiàng)目從git拉取之后腾啥，執(zhí)行npm install 或者 yarn install安裝項(xiàng)目依賴即可。vue.config.js中冯吓，將target下對應(yīng)的ip地址暫止修改為本地的server地址倘待。同時(shí)，util/commonconfig.js中组贺，修改hostIp為貝蒂server地址凸舵。
項(xiàng)目views
views/User/Login.vue：登錄頁
view/User/Register.vue： 注冊頁
view/interface/instruction.vue: 使用說明
view/interface/intermodule.vue: 核心接口頁
view/interface/testplan.vue: 測試計(jì)劃頁
?view/interface/transcribe.vue: 錄制頁面
項(xiàng)目store
store/index.js：
vuex入口文件，所有用到的持久化均需要在此引入注冊失尖。
store/modules/auth.js：
用戶信息持久化存儲啊奄，包括 userId, userName, nickName, userIcon, userMessage渐苏。
store/modules/mitmproxy.js：
用戶臨時(shí)代理信息持久化存儲，包括?port, host_list, mitm_id, expire_time菇夸。
項(xiàng)目components
components/layout: 基礎(chǔ)布局文件夾琼富，包括頁頭，頁尾庄新，slider等鞠眉。
components/modulelist: 主要針對核心接口，錄制接口相關(guān)模塊組件(后續(xù)遷移優(yōu)化)
components/testplan: 測試計(jì)劃相關(guān)組件择诈，包括創(chuàng)建計(jì)劃械蹋，計(jì)劃列表，計(jì)劃詳情頁羞芍，計(jì)劃展示等組件
components/userBackEnd: 登錄注冊頁背景
