vue前端开发规范

Vue前端开发规范

1Vue项目文件/文件夹命名规范

1.1文件夹命名规范

属于components文件夹下的子文件夹，使用大写字母开头的PascalBase风格

1. 全局通用的组件放在 /src/components下
2. 其他业务页面中的组件，放在各自页面下的 ./components文件夹下
3. 每个components文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或index.js，其他.vue文件统一大写开头（Pascalcase），components下的子文件夹名称统一大写开头（PascalCase）

全局公共组件：/src/components示例

  - [components]
    - [Breadcrumb]
      - index.vue
    - [Hamburger]
      - index.vue
    - [SvgIcon]
      - index.vue

业务页面内部封装的组件：以 /src/views/layout/components示例

-[src]
  - [views]
    - [layout]
      - [components]
        - [Sidebar]
          - index.vue
          - Item.vue
          - SidebarItem.vue
        - AppMain.vue
        - index.js
        - Navbar.vue`

注意文件夹下的index.vue与index.js的导出

index.js 中导出组件方式如下：

export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'

对于组件的导出/导入，我们一般都是使用大写字母开头的PascalCase风格，
以区别于.vue组件内部的其他camelCase声明的变量，
[Sidebar]作为**【侧边栏组件】**的一个整体被导出，文件夹的命名也采用PascalCase，
有利于index.js中export时的前后统一，避免很多情况下不注意区分大小写

1.2文件命名规范

.js文件命名规范

1. 属于类的.js文件，除index.js外，使用PascalBase风格
2. 其他类型的.js文件，使用kebab-case风格
3. 属于Api的，统一加上Api后缀

.vue文件命名规范

除index.vue之外，其他.vue文件统一用PascalBase风格

.less文件命名规范

统一使用kebab-case命名风格

2风格规范

2.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          生产环境变量
|— 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                项目介绍

Vue文件基本结构

<template>
    <div>
      
    div>
  template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  script>
  
  <style lang="scss" scoped>
  style>

多个特性的元素规范

• 多个特性的元素应该分多行撰写，每个特性一行

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
my-component>


< img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c">my-component>

• 元素特性的书写顺序: 元素属性在前，指令在后

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text

组件内选项顺序

  - components
  - props
  - data
  - computed
  - filter
  - watch
  - created
  - mounted
  - metods

2.2method方法 命名规范

小驼峰式命名(camelCase)，统一使用动词，或者动词加名词形式

//good：
jumpPage、openUserInfoDialog

//bad：
go、nextPage、show、open、login

请求后端数据的方法以Data结尾

// good
getListData   postFormData

// bad
getList  postForm

尽量使用常用单词开头

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

2.3Prop规范

• Prop 定义应该尽量详细。

//bad
// 这样做只有开发原型系统时可以接受
props: ['status']

//good
props: {
  status: String
}
// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

• 在声明Prop的时候，其命名应该始终使用 camelCase，而在模板和 [JSX]中应该始终使用 kebab-case。

我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

//bad
props: {
  'greeting-text': String
}


//good
props: {
  greetingText: String
}

2.4指令规范

指令缩写规范

• 指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

//bad


//good


//good

//bad


//good


//good

//bad




//good




//good

2.5注释规范

1. 公共组件使用说明
2. 各个组件中重要函数或者类说明
3. 复杂的业务逻辑处理说明
4. 特殊情况的代码处理说明，对于代码中特殊用途的变量、存在临界值、函数中使用hack、使用了某种算法或者思路等需要进行注释描述
5. 多重if判断语句
6. 注释块必须以 /**(至少两个星号)开头**/
7. 单行注释使用 //

举例:

• 注释单独一行，不要在代码后的同一行内加注释。

// good
// 姓名
var name = 'abc'

// bad
var name = 'abc'  //姓名

• 多行注释

组件使用说明，和调用说明
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  
      **/

2.6编码规范

• 统一的编码规范，可使代码更易于阅读，易于理解，易于维护，尽量按照eslint格式要求编写代码

使用ES6风格编码

1. 定义变量使用 let,定义常量使用const
2. 静态字符串一律使用 单引号或者 反引号，动态字符串用反引号

  // good
  const a = 'foobar'
  const b = `foo${a}bar`
  const c = 'foobar'

  // acceptable
  const c = `foobar`

  // bad
  const a = 'foobar'
  const b = 'foo' + a + 'bar'

数组成员对变量赋值时，优先使用解构赋值

const arr = [1,2,3,4]

// good 
const [first,second] = arr

// bad
const first = arr[0]
const second= arr[1]

函数参数为对象属性时，优先使用结构赋值

// 对象解构赋值

  // good
  function getFullName(obj) {
    const { firstName, lastName } = obj
  }

  // best
  function getFullName({ firstName, lastName }) {}

  // bad
  function getFullName(user) {
    const firstName = user.firstName
    const lastName = user.lastName
  }

拷贝数组

  const items = [1, 2, 3, 4, 5]

  // good
  const itemsCopy = [...items]

  // bad
  const itemsCopy = items

看场合尽量使用箭头函数，代码更简洁而且绑定了this

  // acceptable
  const boundMethod = method.bind(this);

  // best
  const boundMethod = (...params) => method.apply(this, params);

  // bad
  const self = this;
  const boundMethod = function(...params) {
    return method.apply(self, params);
  }

模块化

• 如果模块只有一个输出值，就使用export default,如果模块有多个输出值，就使用export。注意export default和export不要同时使用

// 第一组
export default function crc32() { // 输出
  // ...
}
 
import crc32 from 'crc32'; // 输入
 
// 第二组
export function crc32() { // 输出
  // ...
};
 
import {crc32} from 'crc32'; // 输入

2.7其他规范

• 自闭和组件

//bad





//good

• 使用完整单词的组件名

//bad
components/ 
|- SdSettings.vue |
- UProfOpts.vue

//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

• 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

//bad
//在模板中
{{  fullName.split(' ').map(function (word) {    return word[0].toUpperCase() + word.slice(1)  }).join(' ') }}

//good

{{ normalizedFullName }}

computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

• 为组件样式设置作用域

对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。

//bad




//good





//good





//good

其他规范详见Vue风格指南:风格指南 — Vue.js (vuejs.org)