DaWeb前端web框架

简介

---

DaWeb是一个纯粹的前端UI框架,主要适用于一些后台管理系统. 本项目使用了大量的web前端技术.其主要特点有:

1. 基于使用ES2015, Less编写,并且使用WebPack/CookingJs+EsLint+VsCode编辑构建; 可自动检查代码错误并自动修复部分错误, 同时支持浏览器自动刷新.
2. 使用最新版本的vuejs2+vue-router 2+axios+element-ui+Echarts3, 整体界面及UI组件时尚美观,并且支持换肤;
3. 采用响应式设计,自适应主流pc浏览器和移动端浏览器;
4. 所有业务数据(包含导航菜单,用户信息,表格数据,表单数据等)都从后台使用REST API方式获取,并且可以切换到debug模式,使用本地假json数据独立测试;方便前后端开发工程师并行开发;

类库依赖

---

技术选型详细介绍参见前端设计理念 及技术选型 - 前端部分

类库依赖版本详见:package.json文件dependencies和devDependencies部分

使用方法

---

1. 安装nodejs, 去官网下载v7.x版本NodeJs,并安装;
2. 在命令行下安装cnpm:

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

3. 进入web目录,安装相关全局工具和相关依赖:

   cd DaWeb
   cnpm install -g vue-cli webpack eslint gulp cooking-cli
   cnpm install
   

4. 运行dev开发模式

   npm run dev
   

5. 运行lint检查代码文件(注:dev模式自动检查,build是也检查,lint一般只是快速检查时使用)

   npm run lint
   

6. 运行build工具编译生成静态文件(发布时使用)

   npm run build
   

开发流程

---

新增一个功能页面

1. 在views目录中编写相关代码;

2. 在\src\router.js中增加对应的路由信息:

   
   
   

   添加路由信息
3. 在\static\data\allMenus.json中增加对应的菜单项信息.
   注意:此文件仅供本地测试环境使用,正式环境请在对应的action后台添加菜单项并分配给对应的角色;
   
   

   添加导航菜单项

新增一个后台Action

1. 参考esAction.js文件, 在目录\src\actions下新建对应的action文件,并编写相关的数据获取方法;
2. 参考allEsData.json文件, 在目录\static\data\下准备对应的本地测试数据;

注意事项

---

1. 出于一些工程化及团队管理的要求,我们使用eslint进行了严谨的js,html,css编写检查, 编写代码时请仔细阅读编译提示信息并纠正你的代码;
2. 由于nodejs包管理的版本混乱及难以维护,所以我们目前只支持最新版本的类库; 如果你的本地开发环境出现问题,请及时更新你的nodejs,并删除node_modules目录,再执行以下命令重新安装依赖类库.

   cnpm install -g vue-cli webpack eslint gulp cooking-cli
   cnpm install

3. 由于我们开发人员的精力有限,所以我们强力推荐你使用VsCode编辑器,并随同代码附带相关配置文件; 如果你需要使用其他IDE,请自行解决.