vue-admin-demo
v1.0.2
Published
Admin by Vue
Downloads
2
Readme
项目开发手册
彭康德,周浩
开发环境及工具配置说明
###开发环境
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)
###接口