xx前端开发规范

开发规范的目的

1. 提高团队开发效率
2. 有利于项目的后期维护
3. 使开发更加标准化
4. 使开发更加流程化

前端使用的技术栈

• vue（2.0+）
• vue-router
• vueX
• axios
• es6
• webpack(4.0+)
• less
• elementUI(按需加载的方式)
• vue-cli(2.0+)
• 运用vuecli2.0+搭建的项目(webpack 3.0+)

规范前首先要参考vue的风格指南 链接描述
es6参考阮一峰ES6 链接描述

项目结构（基于脚手架）

├── build// 项目构建(webpack)相关代码
│   ├── build.js// 生产环境构建代码
│   ├── check-versions.js// 检查node、npm等版本
│   ├── utils.js// 构建工具相关
│   ├── vue-loader.conf.js// webpack loader配置
│   ├── webpack.base.conf.js// webpack基础配置
│   ├── webpack.dev.conf.js// webpack开发环境配置,构建开发本地服务器
│   └── webpack.prod.conf.js// webpack生产环境配置
├── config// 项目开发环境配置
│   ├── dev.env.js// 开发环境变量
│   ├── index.js// 项目一些配置变量
│   └── prod.env.js/ 生产环境变量
├── dist//项目打包后的文件
├── node_modules//依赖
├── src// 源码目录
│   ├── assets//资源目录
│   │   │── img//图片目录
│   │   │── js//js目录
│   │   │── font//字体和字体图标目录
│   │   └── css//css目录
│   ├── less//less目录
│   │   │── reset.less//重置css样式
│   │   │── public.less//定义一些公关的颜色、字体大小等变量，方便以后统一改风格
│   │   └── commonElement.less//重置elementUI样式
│   ├── components//组件目录
│   │   │── public//公共组件
│   │   └── Module//单个页面，或者单独模块的组件
│   ├── page//页面目录
│   │   └── Module//单个页面
│   ├── request
│   │   └── api.js//ajax请求全局封装位置(统一用axios)
│   ├── config//配置页面
│   │   └── config.js//ajax请求路径以及环境的配置（统一管理）
│   ├── router//路由文件
│   │    └── index.js//路由管理
│   ├── store//vueX目录(如果使用vuex)
│   │   │── state.js//状态管理
│   │   │── mutation.js//更改 Vuex 的 store 中的状态的唯一方法
│   │   │── action.js//Action 提交的是 mutation，而不是直接变更状态（异步操作）
│   │   └── module//也可以根据页面或者组件分模块
│   ├── util//工具函数文件
│   │    └── util.js//工具函数
│   ├── APP.vue // 页面入口文件
│   └── main.js // 程序入口文件，加载各种公共组件
├── static// 静态文件
├── .babelrc// ES6语法编译配置       
├── .editorconfig// 定义代码格式  
├── .postcsssrc// postcss配置文件  
├── index.html// 入口页面 
├── package.json// 项目基本信息,包依赖信息等             
├── README.md// 项目说明

github模板地址： https://github.com/suidagang/...

引入less

引入
npm install less less-loader --D
//引入注意（@前面加~）
@import "~@/less/variable.less";

基于组件化开发

• 组件化开发的好处

   提高开发效率
   方便重复使用
   简化调试步骤
   提升整个项目的可维护性
   便于协同开发
   使其高内聚，低耦合，达到分治与复用的目的。

• vue组件化开发规范

    单文件系统，样式局部作用域
    基本组成结构：