vue开发规范。
一、目录结构二、UI框架选择三、文件夹、组件命名规范、组件结构规范四、组件样式五、 文件格式六、 Template模板文件七、 Script八、 Style九、注释规范十、路由
一、目录结构
|— 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
三、文件夹、组件命名规范、组件结构规范
文件夹： 文件夹名称应统一格式，小写开头，见名思意，page页面下的文件夹名称统一以page结尾，例如：firstPage。 其余文件夹名称统一按照项目结构目录命名规范统一命名。组件： 组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况。 组件应该都放到components文件夹下，单个页面独立一个文件夹，用来放相对应的vue文件以及页面相关的样式文件，样式少可直接写到页面组件里边，这样更符合组件化的思想。 公用组件应该统一放到public文件下。基础组件： 当项目中需要自定义比较多的基础组件的时候，比如一些button，input，icon，建议以一个统一的单词Base开头，或者放到base文件夹统一管理，这样做的目的是为了方便查找。 页面级组件应该放到相对应页面文件夹下，比如一些组件只有这个页面用到，其他地方没有用到的，可以直接放到页面文件夹，然后以父组件开头命名，例如：HomeHeader.vue,HomeNav.vue。 项目级组件一般放到公共文件夹public下给所有的页面使用。组件结构： 组件结构遵循从上往下template，script，style的结构。
四、组件样式
单个组件样式一般可直接写到组件下style标签下，为了防止样式污染，可添加scoped 属性，也可以通过设置作用域来防止样式污染，写样式的时候尽量少写元素选择器，为了提高代码查找速度，可以用类选择器。
五、 文件格式
UTF-8格式
六、 Template模板文件
使用以.vue结束的单文件组件，方便管理，结构清晰。标签语义化，避免清一色的div元素样式class的命名：统一以小写字母开头，小写字母、下划线和数字组成。命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和ElementUI、vantUI（第三方库）中的命名冲突。例如：xx_left,xx_line。多特性，分行写，提高可读性。即一个标签内有多个属性，属性分行写。自定义标签：使用自闭标签的写法。例如：，如果自定义标签中间需要传入slot，则写开始标签和结束标签，结束标签必须加/。组件/实例选项中的空行。便于阅读和代码架构清晰。指令采用缩写形式。
七、 Script
在 script 标签中，遵守 Js 的规范和ES6规范。组件名称：必须以大写字母开头驼峰法命名。Data必须是一个函数。Props定义：提供默认值，使用type属性校验类型，使用props之前先检查prop是否存在调试信息 console.log() 、debugger使用完及时删除。为v-for设置Key值。使用计算 规避v-if和v-for用在一起。无特殊情况不允许使用原生API操作dom,谨慎使用this.$refs直接操作dom。使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。指令缩写：都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。使用 data 里的变量时请先在 data 里面初始化。函数中统一使用_this=this来解决全局指向问题。能用单引号不用双引号。尽量使用===。声明变量必须赋值。组件/实例的选项的顺序： （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
使用 scoped关键字，约束样式生效的范围。避免使用标签选择器（效率低、损耗性能）。非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外。CSS 属性书写顺序：先决定定位宽高显示大小，再做局部细节修饰！顺序：定位属性(或显示属性，display)->宽高属性->边距属性(margin, padding)->字体，背景，颜色等，修饰属性的定义。
九、注释规范
注释前后各有一个空格。函数声明注释：在公共函数建议补全注释。复杂的业务逻辑处理说明，特殊情况的代码处理说明，对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明。
十、路由
路由至少包含三个选项：path、name、component。path统一小写；name对应于组件中的name，大写开头驼峰；component组件名称大写开头的组件驼峰。
路由统一使用相对路径的形式。
来自厦门的前端小白。
