项目开发手册

彭康德，周浩

开发环境及工具配置说明

###开发环境

windows/mac/linux
node 8.x
WebStorm 2017.x
git

###开发语言

es6
scss
html
jsx

####注意

请不要在项目范围内使用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)

###接口