Vue项目组织规范

一、 项目搭建环境

1. 开发环境：node
2. Vue项目搭建工具
   a) Webpack + vue-cli
3. 项目安装
   a) vue init webpack projectName
   b) cd projectName
   c) npm install
   d) npm run dev
4. 开发工具
   a) Vscode
5. 代码检测工具
   a) ESLint

二、 开发规范

1. 目录结构

|— build					构建脚本目录
	|— build.js				生产环境构建（编译打包）脚本
	|— check-versions.js		版本验证工具
	|— utils.js				构建相关工具方法（主要用来处理css类文件的loader）
	|— vue-loader.conf.js		处理vue中的样式
	|— webpack.base.conf.js		webpack基础配置
	|— webpack.dev.conf.js		webpack开发环境配置
	|— webapck.prod.conf.js		webpack生产环境配置
|— config				项目配置
	|— dev.env.js			开发环境变量
	|— index.js				主配置文件
	|— prod.env.js			生产环境变量
	|— test.env.js			测试环境变量
|— node_modules				项目依赖模块
|— mock					mock数据目录，用于本地数据模拟
|— src					项目源码目录
	|— assets				资源目录，资源会被webpack构建
	    |— js				公共js文件目录
	    |— css				公共样式文件目录
	    |— images			图片存放目录
	|— components			公共组件目录
	    |— com1				组件1
	        |— images			静态资源
	|— com1.vue		template/style/script
	    |— com2				组件2
	        |— images			静态资源
		   |— com2.vue		template/style/script
	|— common 
	    |— network 			存放项目的网络模块，接口
	|— tools			自己封装的一些工具
	|— App.vue				根组件
	|— main.js				入口js文件
	|— routers				前端路由目录
	    |— index.js
	|— pages				前端页面文件
	|— vuex				应用级数据管理
		|— index.js			组装模块并导出，统一管理导出，也可命名为store.js
		|— state.js			单一状态树，定义应用数据结构及初始化状态
		|— getters.js			获取state中的状态，仅单向获取数据，不做任何修改
		|— actions.js			调用mutation方法对数据进行操作	
		|— mutation-types.js		存放vuex常用的变量
		|— mutations.js		定义state数据的修改操作
	|— api				抽离出的api请求
|— static				纯静态资源，不会被webpack构建，eg:没有npm包模块
|— test					测试
	|— unit				单元测试
	|— e2e				e2e测试
|— .babelrc				babel的配置文件
|— .editorconfig			编辑器的配置文件
|— .gitignore				git的忽略配置文件
|— .postcssrc.js			postcss的配置文件
|— index.html				html模板，入口页面
|— package.json				npm包配置文件，依赖包信息
|— README.md				项目介绍

2. 文件、组件命名规范，结构规范

a) 组件命名

组件文件名应该始终以单词大写开头（PascalCase），组件名也是以单词大写开头，当多个单词拼写成的组件时，单词开头大写，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况，这样增加可读性。组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的vue文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。文件夹名称应统一格式，小写开头，统一以page结尾，比如homePage，loginPage，listPage这样子的命名。公用组件应该统一放到public文件下，公共的样式文件应该抽取放到统一的文件去统一管理，比如:TodoItem.vue,TodoList.vue。

b) 基础组件命名

• i. 当项目中需要自定义比较多的基础组件的时候，比如一些button，input，icon，建议以一个统一的单词Base开头，或者放到base文件夹统一管理，这样做的目的是为了方便查找。
• ii. 页面级组件应该放到相对应页面文件夹下，比如一些组件只有这个页面用到，其他地方没有用到的，可以直接放到页面文件夹，然后以父组件开发命名。
• iii. 项目级组件一般放到公共文件夹public下给所有的页面使用。

c) 组件结构

i. 组件结构一个遵循从上往下是template，script，style的结构

d) 组件样式

i. 单个组件样式一般可直接写到组件下style标签下，为了防止样式污染，可添加scoped 属性，也可以通过设置作用域来防止样式污染，写样式的时候尽量少写元素选择器，为了提高代码查找速度，可以用类选择器。

e) 多属性编写格式

i. 当组件定义很多的props属性值时，应该每个特性属性一行。

f) Props定义

i. 当定义组件时，应该对传入组件的props进行严格的定义，至少指定类型，设定默认值，定义好规范方便他人使用。

g) 位v-for 增加键值Key，这样加快查找速度

h) 当页面用到一些共享的状态的时，建议使用vuex

3. 文件格式

a) UTF-8

4. 页面中class命名要求

a) 命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
b) 采用下划线命名，例如”shop_list”,避免和第三方ui库命名冲突

5. 资源路径编译规则

a) 如果是绝对路径，会原样保留
b) 如果路径以.开头，将会被看做相对模块依赖
c) 如果路径以@开头，也会被看作一个模块依赖，需要在webpack配置中配置即可。
d) 文件扩展名例如.js,.vue可以省略，也可以在webpack中配置

6. CSS

a) css使用stylus，.vue以局部css来写值作用于当前文件。

7. 注释规范

• a) 每个方法的顶部加上注释
• b) Html中每个功能区的开头和结束都写上注释
• c) 每个功能区的css也注明开始和结束
• d) 每个字段和变量后面加上注释
  以下情况填写注释：
• a. 公共组件的使用说明
• b. 各组件中重要函数或者类说明
• c. 复杂的业务逻辑处理说明
• d. 特殊情况的代码处理说明，对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明
• e. 注释块必须以/(两个星号)/
• f. 单行注释使用 //

8. 编码规范

尽量按照ESLint格式要求编写代码

• a) 使用ES6风格编码源码
  定义变量使用let,定义常量使用const
  使用export,import模块化
• b) 组件props原子化
  提供默认值
  使用type属性校验类型
  使用props之前先检查prop是否存在
• c) 避免this.$parent
• d) 谨慎使用this.$refs
• e) 无需将this赋值给component变量
• f) 调试信息 console.log() debugger使用完及时删除

9. Js中的命名规范

• 自定义变量名
  i. 驼峰式，首字母小写命名规范书写
  ii. 数字类型以n开头，字符串以s开头，布尔类型以b开头，对象以o开头，数组以a开头。Eg:nAge=29、sName=”Jone”
• 自定义常量名
  i. 常量名采用大写+ _下划线规范书写
• 函数名
  i. 驼峰式，首字母小写命名规范
  ii. 以操作类型+操作对象
  iii. 操作类型如下：
  新增类(add)、编辑类(edit)、删除类(delete)、查询单个类(get)、查询列表类(search)、打印类(print)、上传类(upload)、下载类(download)、导入类(import)、导出类(export)、检验类(check)、重置类(reset)、同步类(syn)、分页类(page)

三、 接口请求

• 请求用Axios ，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 。
• Axios请求接口加密。

四、 Vue官方风格指南

https://cn.vuejs.org/v2/style-guide/

五、开发文档参考