簡介
DaWeb是一個純粹的前端UI框架,主要適用于一些后臺管理系統(tǒng). 本項目使用了大量的web前端技術(shù).其主要特點(diǎn)有:
- 基于使用ES2015, Less編寫,并且使用WebPack/CookingJs+EsLint+VsCode編輯構(gòu)建; 可自動檢查代碼錯誤并自動修復(fù)部分錯誤, 同時支持瀏覽器自動刷新.
- 使用最新版本的vuejs2+vue-router 2+axios+element-ui+Echarts3, 整體界面及UI組件時尚美觀,并且支持換膚;
- 采用響應(yīng)式設(shè)計,自適應(yīng)主流pc瀏覽器和移動端瀏覽器;
- 所有業(yè)務(wù)數(shù)據(jù)(包含導(dǎo)航菜單,用戶信息,表格數(shù)據(jù),表單數(shù)據(jù)等)都從后臺使用REST API方式獲取,并且可以切換到debug模式,使用本地假json數(shù)據(jù)獨(dú)立測試;方便前后端開發(fā)工程師并行開發(fā);
類庫依賴
技術(shù)選型詳細(xì)介紹參見前端設(shè)計理念 及技術(shù)選型 - 前端部分
類庫依賴版本詳見:package.json文件dependencies和devDependencies部分
使用方法
- 安裝nodejs, 去官網(wǎng)下載v7.x版本NodeJs,并安裝;
- 在命令行下安裝cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org - 進(jìn)入web目錄,安裝相關(guān)全局工具和相關(guān)依賴:
cd DaWeb cnpm install -g vue-cli webpack eslint gulp cooking-cli cnpm install - 運(yùn)行dev開發(fā)模式
npm run dev - 運(yùn)行l(wèi)int檢查代碼文件(注:dev模式自動檢查,build是也檢查,lint一般只是快速檢查時使用)
npm run lint - 運(yùn)行build工具編譯生成靜態(tài)文件(發(fā)布時使用)
npm run build
開發(fā)流程
新增一個功能頁面
- 在views目錄中編寫相關(guān)代碼;
-
在\src\router.js中增加對應(yīng)的路由信息:
添加路由信息 - 在\static\data\allMenus.json中增加對應(yīng)的菜單項信息.
注意:此文件僅供本地測試環(huán)境使用,正式環(huán)境請在對應(yīng)的action后臺添加菜單項并分配給對應(yīng)的角色;
添加導(dǎo)航菜單項
新增一個后臺Action
- 參考esAction.js文件, 在目錄\src\actions下新建對應(yīng)的action文件,并編寫相關(guān)的數(shù)據(jù)獲取方法;
- 參考allEsData.json文件, 在目錄\static\data\下準(zhǔn)備對應(yīng)的本地測試數(shù)據(jù);
注意事項
- 出于一些工程化及團(tuán)隊管理的要求,我們使用eslint進(jìn)行了嚴(yán)謹(jǐn)?shù)膉s,html,css編寫檢查, 編寫代碼時請仔細(xì)閱讀編譯提示信息并糾正你的代碼;
- 由于nodejs包管理的版本混亂及難以維護(hù),所以我們目前只支持最新版本的類庫; 如果你的本地開發(fā)環(huán)境出現(xiàn)問題,請及時更新你的nodejs,并刪除node_modules目錄,再執(zhí)行以下命令重新安裝依賴類庫.
cnpm install -g vue-cli webpack eslint gulp cooking-cli
cnpm install
- 由于我們開發(fā)人員的精力有限,所以我們強(qiáng)力推薦你使用VsCode編輯器,并隨同代碼附帶相關(guān)配置文件; 如果你需要使用其他IDE,請自行解決.
