项目开发手册
彭康德,周浩
开发环境及工具配置说明
开发环境
windows/mac/linuxnode 8.xWebStorm 2017.xgit
开发语言
es6scsshtmljsx
注意
请不要在项目范围内使用ts或jade等语言
编码风格设置
WebStorm编码风格设置:Settings->Edit->Code Style->javaScript点击右上角“set from...”,选择Predifined Style,选择google编码风格,点击右下角确定
模块引入原则
引入新模块必须知会项目组内所有开发人员,并向项目管理员提申请,由管理员统一引入
编码规范
分号使用原则
在每一个语句结束必须使用**;**结尾
引号使用原则
字符串字面量表达式统一使用单引号(标签属性除外),例如let str = 'hello world';<div class="show"></div>
对象声明原则
不变动的对象使用const声明成常量,变动的**必须**使用let声明,**不允许**使用var声明对象
全局组件命名原则
全局组件声明必须以**ymy-**开头
代码提交
提交代码前必须:1.格式化代码2.编译通过3.测试通过 代码提交时间:下午6点前 代码更新时间:上午9点前 必须描述清楚提交内容
安装和启动
# 安装依赖npm install# 开发环境启动npm run dev# 编译npm run build# 编译并显示报表npm run build --report# 执行单元测试npm run unit# 执行自动化测试npm run e2e# 运行所有测试npm test
注意
npm install失败,请安装cnpm(npm install -g cnpm --registry=https://registry.npm.taobao.org),再运行cnpm安装依赖包。发现所有依赖包下载成功,运行仍然提示缺少模块异常,请重新编译异常模块(npm rebuild 异常模块),如果编译提示缺少某些环境,例如 python ruby等,请升级node版本或安装相关依赖环境并配置环境变量
项目结构
|-- build // 项目构建(webpack)相关代码| |-- build.js // 生产环境构建代码| |-- check-version.js // 检查node、npm等版本| |-- dev-client.js // 热重载相关| |-- dev-server.js // 构建本地服务器| |-- utils.js // 构建工具相关| |-- webpack.base.conf.js // webpack基础配置| |-- webpack.dev.conf.js // webpack开发环境配置| |-- webpack.prod.conf.js // webpack生产环境配置|-- config // 项目开发环境配置| |-- dev.env.js // 开发环境变量| |-- index.js // 项目一些配置变量| |-- prod.env.js // 生产环境变量| |-- test.env.js // 测试环境变量|-- src // 源码目录| |-- components // vue公共组件| |-- store // vuex的状态管理| |-- App.vue // 页面入口文件| |-- main.js // 程序入口文件,加载各种公共组件|-- static // 静态文件,比如一些图片,json数据等| |-- data // 群聊分析得到的数据用于数据可视化|-- .babelrc // ES6语法编译配置|-- .editorconfig // 定义代码格式|-- .gitignore // git上传需要忽略的文件格式|-- README.md // 项目说明|-- favicon.ico|-- index.html // 入口页面|-- package.json // 项目基本信息
代理设置
修改配置文件config/index.js,例如var srcUlr = 'http://localhost:8080';
项目架构
相对路径
@:指向src目录,定义在build/webpack.base.conf.js下
注意
项目内所有模块引入必须使用@相对路径(node_modules除外)
模块引入
同步加载
import 变量名 form ‘模块路径’
延迟加载
const 变量名 = resolve => require([‘模块路径’], resolve)
全局变量
所有全局变量统一在src/main.js内声明,声明方式:import 'expose-loader?变量名!文件路径'httpClient:http客户端实例,支持队列,支持Loading效果_:lodashjs实例,提供常用函数,具体参照http://lodashjs.com/docs/Promise:用于兼容ie10
注意
请不要命名与全局变量相同的变量名
全局组件
所有全局组件统一在src/main.js内声明,声明方式:Vue.use(组件);elementUI:通用ui组件集,具体参照http://element.eleme.io
路由
路由文件 src/router/index.js
路由配置模板
路由详情请参阅:https://router.vuejs.org/zh-cn/advanced/data-fetching.html
简单路由
{ path: '', //路由路径 component: 组件对象 //组件}应用场景:整个页面跳转到新页面
嵌套路由
{ path: '', //路由路径 component: 包含<router-view>的组件对象, //组件 children: [ { path: '', component: 组件对象 }]}<router-view>为渲染出口应用场景:页面部分内容需要跳转
组件
公共组件
业务组件
业务组件存放目录:src/components/business
系统组件
业务组件存放目录:src/components 系统组件清单layout:布局组件,用于包裹菜单与导航,并提供路由内容包裹page:分页组件panel:面板组件sidebar:菜单组件topbar:导航组件
非公共组件
业务页面
业务页面存放目录:src/pages
工具
条件过滤
文件目录:src/uitls/validate.js 引用:import { isPhone } from '@/utils/validate'使用:isPhone(value)