一、 开发工具

1.建议使用vscode(可根据个人开发习惯进行选择)
2.vscode 使用插件建议

• vetur：vue插件
• HTML CSS Support：HTML和CSS代码提示插件
• Past and Indent：粘贴代码正确缩进
• Path Intellisense：文件路径提示

3.使用统一缩进，以tab缩进，一个tab大小为2个空格

二、命名规范

1.变量名，文件名，组件名，文件名等遵循驼峰命名规则：多单词拼接首字母小写，如：userInfo、productInfo ；同时遵循语义化规则，能直观明白意图，如：getUserInfo；setUserName
2.变量声明（var，let，const），定义常量使用const，定义变量尽量使用let

三、注释规则

1.公共组件使用说明
2.各组件中重要函数或者类说明
3.复杂的业务逻辑处理说明
4.已注释掉的代码要说明注释原因
5.多重 if 判断语句
6.注释块必须以/（至少两个星号）开头/，单行注释使用//

四、HTML代码编写规范

1.使用语义化标签如section footer header 进行布局页面结构
2.使用标准html5文档类型声明
3.使用utf-8 编码
4.尽量使用比较少的标签

五、Css规范

1. 统一使用"-"连字符
2. 省略值为 0 时的单位
3. 如果 CSS 可以做到，就不要使用 JS
4. 建议并适当缩写值，提高可读性

六、Vue规范

编码规范

使用es6风格进行编码

1. 解构赋值
2. 箭头函数
3. 正确使用模块，如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用
4. 多个异步操作时使用Promise对象进行封装
5. 除了三目运算，if,else 等禁止简写

指令规范

指令有缩写一律采用缩写形式

:class="className"
@click="getData"

v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

<ul>
    <li v-for="(item,index) in list" :key="index">
        {{ item.name }}
    </li>
</ul>

避免 v-if 和 v-for 同时用在一个元素上（性能问题)

Props 规范

Props 定义应该尽量详细

props: {
  status: {
    type: String,
    required: true,
    defaut:""
    }
  }

vue 文件结构

单文件组件，顶级元素的顺序

<template>
<script>
<style>

按照这个顺序组织代码就可以。注意style只能在最下面，script和template至少要有一个

多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  :data="data"
  :class="name"
>

**使用vue-cli作为脚手架搭建vue项目，利用vue全家桶进行开发，修改src目录如下

• api：为封装的axios请求
• assets：为静态资源目录
• components：封装的公共组件
• config：页面的基本配置，如公共变量
• filters： 封装的vue过滤器
• methods: 封装的公共方法
• router：页面路由配置
• sass: 页面的样式文件
• validators: 封装的表单验证器
• views: 页面
• vuex: 状态管理器，数据集中处理

views文件目录

• common：公共的头部，导航栏等
• 一个菜单项的文件使用一个文件夹，以驼峰方式命名
• model: 为页面的axios请求