简介
DaWeb是一个纯粹的前端UI框架,主要适用于一些后台管理系统. 本项目使用了大量的web前端技术.其主要特点有:
- 基于使用ES2015, Less编写,并且使用WebPack/CookingJs+EsLint+VsCode编辑构建; 可自动检查代码错误并自动修复部分错误, 同时支持浏览器自动刷新.
- 使用最新版本的vuejs2+vue-router 2+axios+element-ui+Echarts3, 整体界面及UI组件时尚美观,并且支持换肤;
- 采用响应式设计,自适应主流pc浏览器和移动端浏览器;
- 所有业务数据(包含导航菜单,用户信息,表格数据,表单数据等)都从后台使用REST API方式获取,并且可以切换到debug模式,使用本地假json数据独立测试;方便前后端开发工程师并行开发;
类库依赖
技术选型详细介绍参见前端设计理念 及技术选型 - 前端部分
类库依赖版本详见:package.json文件dependencies和devDependencies部分
使用方法
- 安装nodejs, 去官网下载v7.x版本NodeJs,并安装;
- 在命令行下安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org - 进入web目录,安装相关全局工具和相关依赖:
cd DaWeb cnpm install -g vue-cli webpack eslint gulp cooking-cli cnpm install - 运行dev开发模式
npm run dev - 运行lint检查代码文件(注:dev模式自动检查,build是也检查,lint一般只是快速检查时使用)
npm run lint - 运行build工具编译生成静态文件(发布时使用)
npm run build
开发流程
新增一个功能页面
- 在views目录中编写相关代码;
-
在\src\router.js中增加对应的路由信息:
添加路由信息 - 在\static\data\allMenus.json中增加对应的菜单项信息.
注意:此文件仅供本地测试环境使用,正式环境请在对应的action后台添加菜单项并分配给对应的角色;
添加导航菜单项
新增一个后台Action
- 参考esAction.js文件, 在目录\src\actions下新建对应的action文件,并编写相关的数据获取方法;
- 参考allEsData.json文件, 在目录\static\data\下准备对应的本地测试数据;
注意事项
- 出于一些工程化及团队管理的要求,我们使用eslint进行了严谨的js,html,css编写检查, 编写代码时请仔细阅读编译提示信息并纠正你的代码;
- 由于nodejs包管理的版本混乱及难以维护,所以我们目前只支持最新版本的类库; 如果你的本地开发环境出现问题,请及时更新你的nodejs,并删除node_modules目录,再执行以下命令重新安装依赖类库.
cnpm install -g vue-cli webpack eslint gulp cooking-cli
cnpm install
- 由于我们开发人员的精力有限,所以我们强力推荐你使用VsCode编辑器,并随同代码附带相关配置文件; 如果你需要使用其他IDE,请自行解决.
