node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

ymy-paas-web

项目开发手册

彭康德,周浩

开发环境及工具配置说明

开发环境

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)

接口