vue开发规范，看这篇就完事了！！

一、目录结构

|— 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			生产环境变量
|— node_modules			    项目依赖模块
|— server					项目部署文件
|— src						项目源码目录
	|— assets				资源目录，资源会被webpack构建
	    |— js				公共js文件目录
	    |— css				公共样式文件目录
	    |— images			图片存放目录
	|— components			项目开发的vue组件
 	|— routers				前端路由目录
	|— store				vuex目录，定义项目状态管理
		|— store.js			组装模块并导出，统一管理导出，也可命名为index.js
	|— App.vue				vue项目的根组件
	|— main.js				入口js文件
|— static					纯静态资源
|— theme					element-ui样式库
|— .babelrc					babel的配置文件
|— .editorconfig			编辑器的配置文件
|— .gitignore				git的忽略配置文件
|— .postcssrc.js			postcss的配置文件
|— element-variables.scss	element变量
|— isIe.js					判别浏览器的js文件
|— index.html				html模板，项目入口页面
|— package-lock.json		项目实际安装  的各个npm package的具体来源和版本号
|— package.json				npm包配置文件，依赖包信息
|— README.md				项目介绍

二、UI框架选择

1.PC端Vue项目UI框架：Element UI
2.移动端Vue项目UI框架：vant UI

三、文件夹、组件命名规范、组件结构规范

1. 文件夹：
   文件夹名称应统一格式，小写开头，见名思意，page页面下的文件夹名称统一以page结尾，例如：firstPage。
   其余文件夹名称统一按照项目结构目录命名规范统一命名。
2. 组件：
   组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况。
   组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的vue文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。
   公用组件应该统一放到public文件下。
3. 基础组件：
   当项目中需要自定义比较多的基础组件的时候，比如一些button，input，icon，建议以一个统一的单词Base开头，或者放到base文件夹统一管理，这样做的目的是为了方便查找。
   页面级组件应该放到相对应页面文件夹下，比如一些组件只有这个页面用到，其他地方没有用到的，可以直接放到页面文件夹，然后以父组件开头命名，例如：HomeHeader.vue,HomeNav.vue。
   项目级组件一般放到公共文件夹public下给所有的页面使用。
4. 组件结构：
   组件结构遵循从上往下template，script，style的结构。

四、组件样式

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

五、 文件格式

UTF-8格式

六、 Template模板文件

1. 使用以.vue结束的单文件组件，方便管理，结构清晰。
2. 标签语义化，避免清一色的div元素
3. 样式class的命名：统一以小写字母开头，小写字母、下划线和数字组成。命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和ElementUI、vantUI（第三方库）中的命名冲突。例如：xx_left,xx_line。
4. 多特性，分行写，提高可读性。即一个标签内有多个属性，属性分行写。
5. 自定义标签：使用自闭标签的写法。例如：，如果自定义标签中间需要传入slot，则写开始标签和结束标签，结束标签必须加/。
6. 组件/实例选项中的空行。便于阅读和代码架构清晰。
7. 指令采用缩写形式。

七、 Script

1. 在 script 标签中，遵守 Js 的规范和ES6规范。
2. 组件名称：必须以大写字母开头驼峰法命名。
3. Data必须是一个函数。
4. Props定义：提供默认值，使用type属性校验类型，使用props之前先检查prop是否存在
5. 调试信息 console.log() 、debugger使用完及时删除。
6. 为v-for设置Key值。
7. 使用计算 规避v-if和v-for用在一起。
8. 无特殊情况不允许使用原生API操作dom,谨慎使用this.$refs直接操作dom。
9. 使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。
10. 指令缩写：都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。
11. 使用 data 里的变量时请先在 data 里面初始化。
12. 函数中统一使用_this=this来解决全局指向问题。
13. 能用单引号不用双引号。
14. 尽量使用===。
15. 声明变量必须赋值。
16. 组件/实例的选项的顺序：
    （1）副作用：el
    （2）全局感知：name、parent
    （3）组件类型：functional
    （4）模板修改器：delimiters、comments
    （5）模板依赖：components、directives、filters
    （6）组合：extends、mixins
    （7）接口：inheritAttrs、model、props/propsData
    （8）本地状态：data、computed
    （9）事件：watch、beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed
    （10）非响应式的属性：methods
    （11）渲染：template/render、renderError

八、 Style

1. 使用 scoped关键字，约束样式生效的范围。
2. 避免使用标签选择器（效率低、损耗性能）。
3. 非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外。
4. CSS 属性书写顺序：先决定定位宽高显示大小，再做局部细节修饰！顺序：定位属性(或显示属性，display)->宽高属性->边距属性(margin, padding)->字体，背景，颜色等，修饰属性的定义。

九、注释规范

1. 注释前后各有一个空格。
2. 函数声明注释：在公共函数建议补全注释。
3. 复杂的业务逻辑处理说明，特殊情况的代码处理说明，对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明。

十、路由

1. 路由至少包含三个选项：path、name、component。path统一小写；name对应于组件中的name，大写开头驼峰；component组件名称大写开头的组件驼峰。

2. 路由统一使用相对路径的形式。

    															来自厦门的前端小白。