【开发规范系列】（四）前端开发规范（四）-阿里云开发者社区

2.1.2 模板中使用简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式应重构为计算属性或方法。复杂表达式会使你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而不是如何计算那个值。而且计算属性和方法使得代码可以重用。

正例：

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

反例：

<template>
  <p>
    {{
      fullName.split(' ').map(function (word) {
        return word[0].toUpperCase() + word.slice(1)
      }).join(' ')
    }}
  </p>
</template>

2.1.3 指令都使用缩写形式

指令推荐使用缩写形式，用 : 表示 v-bind: ，用 @ 表示 v-on: ，用 # 表示 v-slot:

正例：

<input
  @input="onInput"
  @focus="onFocus"
>

反例：

<input
  v-on:input="onInput"
  @focus="onFocus"
>

2.1.4 标签顺序保持一致

单文件组件应该始终按照 <template>、<script>、<style> 的顺序排列。

正例：

<template>...</template>
<script>...</script>
<style>...</style>

反例：

<template>...</template>
<style>...</style>
<script>...</script>

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

如果需要频繁切换元素的可见性，使用 v-show ；如果在运行时条件很少改变，使用 v-if。

2.1.7 script 标签内部结构顺序

components > props > data > computed > watch > filter > 钩子函数（按执行顺序排列） > methods

2.1.8 Vue Router 规范

1) 页面跳转数据传递使用路由参数

页面跳转，例如从 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用路由参数进行传参，而不是将需要传递的数据保存在 vuex，然后在 B 页面取出 vuex 中的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。

正例：

let id = '123';
this.$router.push({ name: 'userCenter', query: { id: id } });

2) 使用路由懒加载（延迟加载）机制

{
  path: '/uploadAttachment',
  name: 'uploadAttachment',
  meta: {
    title: '上传附件'
  },
  component: () => import('@/view/components/uploadAttachment/index.vue')
}

3) router 中的命名规范

path、childrenPoints 命名规范采用kebab-case命名规范（尽量保持 vue 文件的目录结构一致，因为目录和文件名都是kebab-case，这样很方便找到对应的文件）

name 命名规范采用KebabCase命名规范且与 component 组件名保持一致！（要保持 keep-alive 特性，keep-alive 按照 component 的 name 进行缓存，所以两者必须高度保持一致）

export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: Main,
    meta: {
      title: '动态加载',
      icon: 'icon iconfont'
    },
    children: [
      {
        path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
          title: 'SmartReload',
          childrenPoints: [
            {
              title: '查询',
              name: 'smart-reload-search'
            },
            {
              title: '执行reload',
              name: 'smart-reload-update'
            },
            {
              title: '查看执行结果',
              name: 'smart-reload-result'
            }
          ]
        },
        component: () =>
          import('@/views/reload/smart-reload/smart-reload-list.vue')
      }
    ]
  }

4) router 中的 path 命名规范

path 应采用kebab-case命名规范，并以 / 开头，即使是 children 中的 path 也要以 / 开头。例如：

目的：经常需要找到某个 vue 文件时，可以立即找到它。如果 path 不以 / 开头，由 parent 和 children 组成，可能需要在 router 文件中多次搜索才能找到。而以 / 开头，可以立即搜索到对应的组件。

{
  path: '/file',
  name: 'File',
  component: Main,
  meta: {
    title: '文件服务',
    icon: 'ios-cloud-upload'
  },
  children: [
    {
      path: '/file/file-list',
      name: 'FileList',
      component: () => import('@/views/file/file-list.vue')
    },
    {
      path: '/file/file-add',
      name: 'FileAdd',
      component: () => import('@/views/file/file-add.vue')
    },
    {
      path: '/file/file-update',
      name: 'FileUpdate',
      component: () => import('@/views/file/file-update.vue')
    }
  ]
}

(二) Vue 项目目录规范

2.2.1 基础

Vue 项目中的所有命名必须与后端命名保持一致。
比如权限：后端 privilege，前端无论是 router、store、api 等都必须使用 privilege 单词！

2.2.2 使用 Vue CLI 脚手架

使用 Vue CLI 3 来初始化项目，项目名按照上述命名规范命名。

2.2.3 目录说明

目录名按照上述命名规范，其中 components 组件使用大写驼峰命名，其余目录（除 components 组件目录外）使用 kebab-case 命名。

src                               源码目录
|-- api                              所有 API 接口
|-- assets                           静态资源，包括 images、icons、styles 等
|-- components                       公共组件
|-- config                           配置信息
|-- constants                        常量信息，项目中的所有枚举、全局常量等
|-- directives                       自定义指令
|-- filters                          过滤器，全局工具
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- plugins                          插件，全局使用
|-- router                           路由，统一管理
|-- store                            Vuex，统一管理
|-- themes                           自定义样式主题
|-- views                            视图目录
|   |-- role                             role 模块
|   |-- |-- role-list.vue                    role 列表页面
|   |-- |-- role-add.vue                     role 新建页面
|   |-- |-- role-update.vue                  role 更新页面
|   |-- |-- index.less                      role 模块样式
|   |-- |-- components                      role 模块通用组件文件夹
|   |-- employee                         employee 模块

1) api 目录

文件和变量命名要与后端保持一致。
此目录对应后端的 API 接口，按照每个 controller 一个 API JS 文件的方式组织。如果项目较大，可以根据业务进行子目录划分，但与后端保持一致。
API 文件中的方法名应与后端 API URL 尽量保持语义一致。
每个 API 方法都应添加注释，注释与后端的 Swagger 文档保持一致。

正例：

后端 URL：EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update

前端：employee.js

addEmployee: (data) => {
  return postAxios('/employee/add', data)
},
updateEmployee: (data) => {
  return postAxios('/employee/update', data)
},
deleteEmployee: (employeeId) => {
  return postAxios('/employee/delete/' + employeeId)
},

2) assets 目录

assets 目录存放静态资源，包括 images、styles、icons 等静态资源，静态资源命名格式为 kebab-case。

|assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- styles

3) components 目录

此目录按组件进行目录划分，目录命名为 KebabCase，组件命名规则也为 KebabCase。

|components
|-- error-log
|   |-- index.vue
|   |-- index.less
|-- markdown-editor
|   |-- index.vue
|   |-- index.js
|-- kebab-case

4) constants 目录

此目录存放项目中的所有常量。如果常量在 Vue 中使用，请使用 Vue-enum 插件（ https://www.npmjs.com/package/vue-enum^[4]）。

目录结构：

|constants
|-- index.js
|-- role.js
|-- employee.js
• 1

示例：employee.js

export const EMPLOYEE_STATUS = {
  NORMAL: {
    value: 1,
    desc: '正常'
  },
  DISABLED: {
    value: 1,
    desc: '禁用'
  },
  DELETED: {
    value: 2,
    desc: '已删除'
  }
};
export const EMPLOYEE_ACCOUNT_TYPE = {
  QQ: {
    value: 1,
    desc: 'QQ登录'
  },
  WECHAT: {
    value: 2,
    desc: '微信登录'
  },
  DINGDING: {
    value: 3,
    desc: '钉钉登录'
  },
  USERNAME: {
    value: 4,
    desc: '用户名密码登录'
  }
};
export default {
  EMPLOYEE_STATUS,
  EMPLOYEE_ACCOUNT_TYPE
};

5) router 与 store 目录

这两个目录必须根据业务进行拆分，不能放在一个 JS 文件中。
router 应与 views 目录的结构保持一致。
store 按业务进行拆分为不同的 JS 文件。

6) views 目录

命名要与后端、router、api 等保持一致。
components 中的组件应使用 PascalCase 规则。

|-- views                            视图目录
|   |-- role                             role 模块
|   |   |-- role-list.vue                    role 列表页面
|   |   |-- role-add.vue                     role 新建页面
|   |   |-- role-update.vue                  role 更新页面
|   |   |-- index.less                      role 模块样式
|   |   |-- components                      role 模块通用组件文件夹
|   |   |   |-- role-header.vue                        role 头部组件
|   |   |   |-- role-modal.vue                         role 弹出框组件
|   |-- employee                         employee 模块
|   |-- behavior-log                      行为日志 log 模块
|   |-- code-generator                    代码生成器模块

2.2.4 注释说明

需要添加注释的地方包括：

公共组件的使用说明
api 目录中的接口 JS 文件必须添加注释
store 中的 state、mutation、action 等必须添加注释
Vue 文件中的 template 必须添加注释，如果文件较大，可以添加 start 和 end 注释
Vue 文件的 methods，每个 method 必须添加注释
Vue 文件的 data，非常见单词必须添加注释

2.2.5 其他

1) 尽量避免手动操作 DOM

由于使用了 Vue 框架，所以在项目开发中尽量使用 Vue 的数据驱动更新 DOM，避免（除非万不得已）手动操作 DOM，包括增删改 DOM 元素、更改样式、添加事件等。

2) 删除无用代码

由于使用了 Git/SVN 等版本控制工具，必须及时删除无用代码，例如调试时的 console 语句、废弃的功能代码等。

规范的目的是为了编写高质量的代码，让团队成员每天都有愉悦的心情，让大家在一起感到快乐。

!! 参考：https://xie.infoq.cn/article/2048f2116f8df30115fca44c1。

参考资料

[1]

首发博客地址: https://blog.zysicyj.top/

[2]

系列文章地址: https://blog.zysicyj.top/categories/技术文章/后端技术/系列文章/开发规范/

[3]

https://cn.vuejs.org/v2/style-guide/）: https://xie.infoq.cn/link?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fstyle-guide%2F%25EF%25BC%2589

[4]

https://www.npmjs.com/package/vue-enum:https://xie.infoq.cn/link?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-enum

本文由 mdnice 多平台发布

【开发规范系列】（四）前端开发规范（四）

2.1.2 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

1) 页面跳转数据传递使用路由参数

2) 使用路由懒加载（延迟加载）机制

3) router 中的命名规范

4) router 中的 path 命名规范

(二) Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue CLI 脚手架

2.2.3 目录说明

1) api 目录

2) assets 目录

3) components 目录

4) constants 目录

5) router 与 store 目录

6) views 目录

2.2.4 注释说明

2.2.5 其他

1) 尽量避免手动操作 DOM

2) 删除无用代码

参考资料

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【开发规范系列】（四）前端开发规范（四）

2.1.2 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

1) 页面跳转数据传递使用路由参数

2) 使用路由懒加载（延迟加载）机制

3) router 中的命名规范

4) router 中的 path 命名规范

(二) Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue CLI 脚手架

2.2.3 目录说明

1) api 目录

2) assets 目录

3) components 目录

4) constants 目录

5) router 与 store 目录

6) views 目录

2.2.4 注释说明

2.2.5 其他

1) 尽量避免手动操作 DOM

2) 删除无用代码

参考资料

热门文章

最新文章

相关课程

相关电子书

相关实验场景