关于后端:开发规范系列四前端开发规范

3次阅读

共计 12780 个字符，预计需要花费 32 分钟才能阅读完成。

首发博客地址

系列文章地址

引自《阿里规约》的结尾片段：

古代软件架构的复杂性须要协同开发实现，如何高效地协同呢？无规矩不成方圆，无标准难以协同，比方，制订交通法规外表上是要限度行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的标准和规范绝不是毁灭代码内容的创造性、优雅性，而是限度适度个性化，以一种广泛认可的对立形式一起做事，晋升合作效率，升高沟通老本。代码的字里行间流淌的是软件系统的血液，品质的晋升是尽可能少踩坑，杜绝踩反复的坑，切实晋升零碎稳定性，码出品质。

全副采纳小写形式，以中划线分隔。

正例：mall-management-system

反例：mall_management-system / mallManagementSystem

全副采纳小写形式，以中划线分隔，有复数构造时，要采纳复数命名法，缩写不必复数。

正例：scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例：script / style / demo_scripts / demoStyles / imgs / docs

【非凡】VUE 的我的项目中的 components 中的组件目录，应用 kebab-case 命名。

正例：head-search / page-loading / authorized / notice-icon

反例：HeadSearch / PageLoading

【非凡】VUE 的我的项目中的除 components 组件目录外的所有目录也应用 kebab-case 命名。

正例：page-one / shopping-car / user-management

反例：ShoppingCar / UserManagement

全副采纳小写形式，以中划线分隔。

正例：render-dom.js / signup.css / index.html / company-logo.png

反例：renderDom.js / UserManagement.html

代码中的命名严禁应用拼音与英文混合的形式，更不容许间接应用中文的形式。阐明：正确的英文拼写和语法能够让阅读者易于了解，防止歧义。留神，即便纯拼音命名形式也要防止采纳。

正例：henan / luoyang / rmb 等国内通用的名称，可视同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3

杜绝齐全不标准的缩写，防止望文不知义：

反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随便缩写重大升高了代码的可浏览性。

举荐应用 HTML5 的文档类型申明。倡议应用 text/html 格局的 HTML，防止应用 XHTML。XHTML 以及它的属性，比方 application/xhtml+xml 在浏览器中的利用反对与优化空间都非常无限。

规定字符编码
IE 兼容模式
规定字符编码
doctype 大写

正例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

缩进应用 2 个空格（一个 tab）。

嵌套的节点应该缩进。

在每一个块状元素，列表元素和表格元素后，加上一对 HTML 正文。正文格局：

<!-- 英文 中文 start -->

<!-- 英文 中文 end -->

正例：

<body>
  
  <header>
    <div class="container">
      <a href="#">
        
        <img src="images/header.jpg" />
      </a>
    </div>
  </header>
  
</body>

HTML5 中新增很多语义化标签，所以优先应用语义化标签，防止一个页面都是 div 或者 p 标签。

正例：

<header></header>
<footer></footer>

反例：

<div></div>

应用双引号(” “) 而不是单引号(‘ ‘)。

正例：<div class="news-div"></div>

反例：<div class='news-div'></div>

类名应用小写字母，以中划线分隔。
id 采纳驼峰式命名。
scss 中的变量、函数、混合、placeholder 采纳驼峰式命名。

ID 和 class 的名称总是应用能够反馈元素目标和用处的名称，或其余通用的名称，代替表象和艰涩难懂的名称。

不举荐：

.fw-800 {font-weight: 800;}

.red {color: red;}

举荐：

.heavy {font-weight: 800;}

.important {color: red;}

1)css 选择器中防止应用标签名。从构造、体现、行为拆散的准则来看，应该尽量避免 css 中呈现 HTML 标签，并且在 css 选择器中呈现标签名会存在潜在的问题。

2)很多前端开发人员写选择器链的时候不应用间接子选择器（注：间接子选择器和后辈选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何状况下，这是一个十分不好的做法。如果你不写很通用的，须要匹配到 DOM 末端的选择器，你应该总是思考间接子选择器。

不举荐：

.content .title {font-size: 2rem;}

举荐：

.content > .title {font-size: 2rem;}

不举荐：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

举荐：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

不举荐：

button{width:100px;height:50px;color:#fff;background:#00a0e9;}

举荐：

button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

不举荐：

div{
  padding-bottom: 0px;
  margin: 0em;
}

举荐：

div{
  padding-bottom: 0;
  margin: 0;
}

不举荐：

#header{
  padding-bottom: 0px;
  margin: 0em;
}

举荐：

.header{
  padding-bottom: 0px;
  margin: 0em;
}

1)将公共 less 文件搁置在 style/less/common 文件夹。

例：// color.less,common.less

2)按以下程序组织：

1、@import;

2、变量申明;

3、款式申明;

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

将嵌套深度限度在 3 级。对于超过 4 级的嵌套，给予从新评估。这能够避免出现过于详实的 CSS 选择器。防止大量的嵌套规定。当可读性受到影响时，将之打断。举荐避免出现多于 20 行的嵌套规定呈现。

不举荐：

.main{
  .title{
    .name{color:#fff}
  }
}

举荐：

.main-title{
   .name{color:#fff}
}

1)采纳小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号完结。

反例：_name / name_ / name$

2)办法名、参数名、成员变量、局部变量都对立应用 lowerCamelCase 格调，必须听从驼峰模式。

正例：localValue / getHttpMessage() / inputUserId

其中 method 办法命名必须是动词或者动词 + 名词模式。

正例：saveShopCarData / openShopCarInfoDialog

反例：save / open / show / go

特此说明，增删查改，详情对立应用如下 5 个单词，不得应用其余（目标是为了对立各个端）。

add / update / delete / detail / get

附：函数办法罕用的动词：

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 汇集

1)应用 2 个空格进行缩进。

正例：

if (x < y) {x += 10;} else {x += 1;}

2)不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以晋升可读性。

阐明：任何情景，没有必要插入多个空行进行隔开。

对立应用单引号(‘)，不应用双引号(“)。这在创立 HTML 字符串十分有益处。

正例：

let str = 'foo';
let testDiv = '<div id="test"></div>';

1)应用字面值创建对象。

正例：let user = {};

反例：let user = new Object();

2)应用字面量来代替对象结构器。

正例：

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

必须优先应用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵便和可复用。

必须强制应用 ES6, ES7 的新语法，比方箭头函数、await/async，解构，let，for…of 等等

下列关键字后必须有大括号（即便代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

正例：

if (condition) {doSomething();
}

反例：

if (condition) doSomething();

永远不要间接应用 undefined 进行变量判断；应用 typeof 和字符串 ‘undefined’ 对变量进行判断。

正例：

if (typeof person === 'undefined') {...}

反例：

if (person === undefined) {...}

条件判断能应用三目运算符和逻辑运算符解决的，就不要应用条件判断，然而谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写分明正文。

对上下文 this 的援用只能应用 ‘self’ 来命名。

因 console.log 大量应用会有性能问题，所以在非 webpack 我的项目中审慎应用 log 性能。

vue 我的项目标准以 Vue 官网标准（https://cn.vuejs.org/v2/style-guide/）中的 A 标准为根底，在其下面进行我的项目开发，故所有代码均恪守该标准。

请仔细阅读 Vue 官网标准，切记，此为第一步。

1) 组件名为多个单词。

组件名应该始终由多个单词组成，且命名标准为 KebabCase 格局。这样做能够防止与现有和将来的 HTML 元素抵触，因为所有 HTML 元素名称都是由单个单词组成的。

正例：

export default {name: 'TodoItem'};

反例：

export default {name: 'Todo'};

export default {name: 'todo-item'};

2) 组件文件名为 PascalCase 格局

正例：

components/
|- MyComponent.vue

反例：

components/
|- myComponent.vue
|- MyComponent.vue

3) 根底组件文件名以 base 结尾，应用残缺单词而不是缩写。

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

4) 和父组件严密耦合的子组件应该以父组件名作为前缀命名

正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue（残缺单词）

反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue（应用了缩写）

5) 在 Template 模板中应用组件，应应用 PascalCase 格局，并应用自闭合组件。

正例：

<MyComponent />
<Row><table :column="data"/></Row>

反例：

<my-component /> <row><table :column="data"/></row>

6) 组件的 data 必须是一个函数

当在组件中应用 data 属性时（除了 new Vue 外的任何中央），它的值必须是一个返回对象的函数。因为如果间接是一个对象，子组件之间的属性值会相互影响。

正例：

export default {data () {
    return {name: 'jack'}
  }
}

反例：

export default {
  data: {name: 'jack'}
}

7) Prop 定义应该尽量具体

必须应用 camelCase 驼峰命名
必须指定类型
必须加上正文，表明其含意
必须加上 required 或者 default，两者二选其一
如果有业务须要，必须加上 validator 验证

正例：

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'succ',
        'info',
        'error'
      ].indexOf(value) !== -1
    }
  },
  userLevel: {
    type: String,
    required: true
  }
}

8) 为组件款式设置作用域

正例：

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
  .btn-close {background-color: red;}
</style>

反例：

<template>
  <button class="btn btn-close">X</button>
</template>

<style>
  .btn-close {background-color: red;}
</style>

9) 如果个性元素较多，应被动换行。

正例：

<MyComponent foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
/>

反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>

组件模板应该只蕴含简略的表达式，简单的表达式应重构为计算属性或办法。简单表达式会使你的模板变得不那么申明式。咱们应该尽量形容应该呈现的是什么，而不是如何计算那个值。而且计算属性和办法使得代码能够重用。

正例：

<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>

指令举荐应用缩写模式，用 : 示意 v-bind:，用 @ 示意 v-on:，用 # 示意 v-slot:

正例：

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

反例：

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

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

正例：

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

反例：

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

如果须要频繁切换元素的可见性，应用 v-show；如果在运行时条件很少扭转，应用 v-if。

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

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 我的项目中的所有命名必须与后端命名保持一致。
比方权限：后端 privilege，前端无论是 router、store、api 等都必须应用 privilege 单词！

应用 Vue CLI 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）。

目录构造：

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

示例：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                    代码生成器模块

须要增加正文的中央包含：
- 公共组件的应用阐明
- api 目录中的接口 JS 文件必须增加正文
- store 中的 state、mutation、action 等必须增加正文
- Vue 文件中的 template 必须增加正文，如果文件较大，能够增加 start 和 end 正文
- Vue 文件的 methods，每个 method 必须增加正文
- Vue 文件的 data，十分见单词必须增加正文

1) 尽量避免手动操作 DOM

因为应用了 Vue 框架，所以在我的项目开发中尽量应用 Vue 的数据驱动更新 DOM，防止（除非万不得已）手动操作 DOM，包含增删改 DOM 元素、更改款式、增加事件等。

2) 删除无用代码

因为应用了 Git/SVN 等版本控制工具，必须及时删除无用代码，例如调试时的 console 语句、废除的性能代码等。

标准的目标是为了编写高质量的代码，让团队成员每天都有愉悦的情绪，让大家在一起感到高兴。

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

本文由 mdnice 多平台公布

正文完

后端

发表至：后端

2023-08-30

0

关于后端:互联网大厂面试要求技术广度技术深度系统设计以及项目经验

关于后端:Logstash数据流引擎

关于后端:CPT206

关于后端:创建型设计模式单例-Singleton

关于数据库:数据库优化器与算子优化

关于后端:开发规范系列四前端开发规范

(一)命名标准

1.1.1 我的项目命名

1.1.2 目录命名

1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

1.1.4 命名严谨性

(二)HTML 标准（Vue Template 同样实用）

1.2.1 HTML 类型

1.2.2 缩进

1.2.3 分块正文

1.2.4 语义化标签

1.2.5 引号

(三) CSS 标准

1.3.1 命名

1.3.2 选择器

1.3.3 尽量应用缩写属性

1.3.4 每个选择器及属性独占一行

1.3.5 省略 0 前面的单位

1.3.6 防止应用 ID 选择器及全局标签选择器避免净化全局款式

(四) LESS 标准

1.4.1 代码组织

1.4.2 防止嵌套层级过多

(五) JavaScript 标准

1.5.1 命名

1.5.2 代码格局

1.5.3 字符串

1.5.4 对象申明

1.5.5 应用 ES6,7

1.5.6 括号

1.5.7 undefined 判断

1.5.8 条件判断和循环最多三层

1.5.9 this 的转换命名

1.5.10 慎用 console.log

(一) Vue 编码根底

2.1.1 组件标准

1) 组件名为多个单词。

2) 组件文件名为 PascalCase 格局

3) 根底组件文件名以 base 结尾，应用残缺单词而不是缩写。

4) 和父组件严密耦合的子组件应该以父组件名作为前缀命名

5) 在 Template 模板中应用组件，应应用 PascalCase 格局，并应用自闭合组件。

6) 组件的 data 必须是一个函数

7) Prop 定义应该尽量具体

8) 为组件款式设置作用域

9) 如果个性元素较多，应被动换行。

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) 删除无用代码

站内搜索