前端开发规范(vue)项目主体参考vue-element-admin，在此基础上扩展。目前项目里，选择了使用eslin

前端开发规范

为了回避错误、小纠结和反模式，制定以下规范；

文件组织

项目主体参考vue-element-admin，在此基础上扩展。

1，项目初始目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
|   ├── permission.js          # 权限管理
│   └── settings.js            # 一些全局配置
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

2,src初始基础目录配置

├── src                        # 源代码
   ├── api                    # 所有请求 (接口类封装)
   ├── assets                 # 主题 字体等静态资源
   ├── components             # 全局公用组件（颗粒度较细组件）
   ├── directive              # 全局指令
   ├── filters                # 全局 filter
   ├── icons                  # 项目所有 svg icons
   ├── layout                 # 全局 layout
   ├── router                 # 路由
   ├── store                  # 全局 store管理
   ├── styles                 # 全局样式
   ├── utils                  # 全局公用方法（验证，接口方法，字段处理，errorLog, 响应式等）
   ├── vendor                 # 公用vendor
   ├── views                  # views 所有页面（主要功能实现目录）
   ├── App.vue                # 入口页面
   ├── main.js                # 入口文件 加载组件 初始化等
   ├── permission.js          # 权限管理
   └── settings.js            # 一些全局配置（title,logo等）

代码风格

规范实行以下：代码风格校验(eslint) IDE格式化(eslint、vetur)

代码风格校验

目前项目里，选择了使用eslint校验，在项目里自动安装eslint-plugin-vue，无需自行安装。它能够将大多数template代码块的格式错误暴露给使用者，比如重复声明key属性等，能解决部分template内代码风格不统一的问题。

IDE格式化

由于我们项目创建时已经加入eslint来进行代码的规范化，有可能在各种IDE下面都会有报错，因此请配置你日常使用的IDE，以下以webstorm为例；打开webstorm的设置，win(ctral+atl+s),mac(command+,)打开全局配置进行设置plugins>搜索eslint>install

进行下载；完成后目录里有个ESLint Settings设置，下图请参考：

其他编辑器，配置请自行百度；

命名方式

1，id和class的命名原则

应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名（原则：见名知其义）

2，文件夹、文件名、id、class、变量、函数名等具体命名规范

文件夹、文件名、所有复合词（除class）: 采用驼峰命名法（小驼峰命名法）

例: userName 变量userName第一个单词是全部小写，后面的单词首字母大写，小写开头，见名思意。

class,组件名 : 采用“中划线法命名法”

例: dashboard-editor-container 函数名中的每一个逻辑断点都有一个下划线来标记。

组件名应该始终是多个单词的，根组件 App 以及、之类的 Vue 内置组件除外。命名参考例

例:
Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}

3, id和calss命名越精简越好，只要足够表达意思，有助于理解，同时也能提高效率

.navigation{} /* 不推荐 */
.nav{} /* 推荐 */

4, 命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

命名注意缩写，但是不能盲目缩写；
不允许通过1、2、3等序号进行命名；
避免class与id重名；
id注意用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id；
class用于标识某一个类型的对象，命名必须言简意赅；
尽可能提高代码模块的复用，样式尽量用组合的方式；
规则名称中不应该包含颜色、定位等与具体显示效果相关的信息，应该用意义命名，而不是结果名称。

5，Vue 项目中的命名

* Store 中的Module 使用“小驼峰命名法”
* Store 中的Mutation 使用 全部大写的下划线命名法
* Store 中的state/getters/action 使用“小驼峰命名法”
* 组件必须使用“大驼峰命名法”命名法,
* 引用组件时禁止使用别名，模板内组件标签名遵循html 标签命名规范，或者使用组件名
* 组件名必须避免使用Vue保留标签名（包括HTML标签和Vue内部标签）
* 组件文件和组件使用相同的名字
* 前端路由路径使用全小写命名法

模块化

1，组件样式

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

2，template模板文件

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

3，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来解决全局指向问题。
能用单引号不用双引号。
尽量使用===。
声明变量必须赋值。

4, style

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

其他

注释规范

资源路径的配置、引入规则

路由

数据中心（store,api管理,axios）

Web字体规范

优先使用框架中的字体图标，比如element ui中的
使用iconfont字体图标代替图片
在规范中包括的字体格式有：
- woff: WOFF (Web Open Font 格式)
- ttf: TrueType
- ttf, otf: OpenType
- eot: 嵌入式 OpenType
- svg, svgz: SVG 字体
字体规则
- a) 为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei)、宋体(SimSun)、微软雅黑(Microsoft Yahei)。
- b) 字体粗细采用具体数值，粗体bold写成700，正常normal写成400。
- c) font-size必须以px为单位。为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置。