Vue 规范

1. 项目结构

1.1 项目目录结构

★ [强制] 参照vue标准文件目录

示例：

node_nodules/
public/
src/
|- api  ---------------------- 统一接口目录
|- assets  ------------------- 资源目录
|- components  --------------- 公共组件目录
|- directives  --------------- 自定义指令目录
|- router  ------------------- VueRouter目录
|- store  -------------------- Vuex目录
|- styles  ------------------- 样式文件目录
|- utils  -------------------- 工具目录
|- views  -------------------- 页面组件目录
|- App.vue
|- main.js
.browserslistrc
.env.development
.env.production
.eslintrc.js
.gitinore
babel.config.js
package.json
README.md
vue.config.js

1.2 拆分组件的原则

● [建议] 符合可复用、可组合、单一职责的原则。

● [建议] 相似功能合理拆分, 不在同一文件写过多冗余代码。

1.3 命名

★ [强制] 有意义的名词，简短、具有可读性。

★ [强制] 单文件组件的文件名采用大驼峰 (PascalCase)。index.vue为了简化引入可采用小写字母格式。

示例：

// good
components/
|- SearchButton.vue// bad
components/
|- searchButton.vue
|- searchbutton.vue

● [建议] 与父组件紧密耦合的子组件应该以父组件名作为前缀命名。

示例：

// good
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue// bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

● [建议] 组件名称应该以高阶的 (通常是一般化描述的) 单词开头，并以描述性的修饰词结尾。

::: details 详解
对于一个带搜索表单的应用来说，它可能包含这样的组件：

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

你可能已经注意到了，我们很难看出来哪些组件是针对搜索的。现在我们来根据规则给组件重新命名：

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue

因为编辑器通常会按字母顺序组织文件，所以现在组件之间的重要关系一目了然。

你也许会想要换种方式解决这个问题，把所有的搜索组件放到“search”目录，把所有的设置组件放到“settings”目录。我们只推荐在非常大型的应用 (如有 100+ 个组件) 下才考虑这么做，因为：

在多级目录间找来找去，通常来说要比在单个 components 目录下滚动查找要花费更多的精力。
存在组件重名 (比如存在多个 ButtonDelete.vue 组件) 的时候在编辑器里更难快速定位。
重构将变得更困难，因为为一个移动了的组件更新相关引用时，查找/替换通常并不高效。
:::

// good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue// bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

2. 组件结构

2.1 模板风格

● [建议] 使用Vuter风格,结构规范更利于寻找代码片段

示例：

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

2.2 组件名

● [建议] 给每个组件设置name属性

当使⽤keep-alive时，可以使⽤这个name进⾏过滤
递归组件（组件⾃⼰调⽤⾃⼰）中迭代时需要调⽤⾃⾝的name
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。
当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

3. tempalate

★ [强制] 为 v-for 设置关键值key,且尽量不使用 index

示例：

<!-- good -->
<ul><liv-for="item in projectList":key="item.id">{{item.name}}</li>
</ul><!-- bad -->
<ul><liv-for="item in projectList">{{item.name}}</li>
</ul>

★ [强制] 永远不要在一个元素上同时使用 v-if 和 v-for

vue2中v-for 比 v-if 具有更高的优先级，会导致哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。
vue3中v-if 比 v-for 具有更高的优先级，v-if先执行的时候v-for的迭代变量此时还不存在，会导致抛出错误。

示例：

<!-- good -->
<ul><template v-for="user in users" :key="user.id"><li v-if="user.isActive">{{ user.name }}</li></template>
</ul>
<!-- bad -->
<ul><liv-for="user in users"v-if="user.isActive":key="user.id">{{ user.name }}</li>
</ul>

★ [强制] 所有标签的属性值是有双引号而非单引号。

<!-- good -->
<div class="contanier"></div><!-- bad -->
<div class='contanier'></div>

★ [强制] 指令缩写，统一使用简写形式。

动态绑定属性 v-bind === :
动态绑定事件 v-on === @
动态绑定插槽 v-slot === #

<!-- 动态绑定属性 -->
<input:value="newTodoText":placeholder="newTodoInstructions"
><!-- 动态绑定事件 -->
<input@input="onInput"@focus="onFocus"
><!-- 动态绑定插槽 -->
<template #header><h1>Here might be a page title</h1>
</template>

★ [强制] 多个 attribute 的元素应该分多行撰写，每个 attribute 占一行。

<el-selectv-model="form.version"clearableplaceholder="请选择版本"style="width:200px"
><el-optionv-for="item in versionOptions":key="item.id":label="item.name":value="item.id"></el-option>
</el-select>

★ [强制] 对于自定义组件标签,必须写全开始标签和结束标签，方便有 slot 的情况

示例：

<!-- good -->
<MenuItem></MenuItem>
<!-- bad -->
<MenuItem/>

● [建议] 自定义组件标签使用大驼峰写法,便于组件引入查找

示例：

<!-- good -->
<MenuItem></MenuItem>

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

复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该显示什么，而非如何计算那个值。而且计算属性和方法使得代码可以复用。

<!-- good -->
<template>{{ normalizedFullName }}
</template>
<script>
export default{computed: {normalizedFullName() {return this.fullName.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ')}}
}
</script><!-- bad -->
<template>{{fullName.split(' ').map((word) => {return word[0].toUpperCase() + word.slice(1)}).join(' ')}}
</template>

4. script

● [建议] 属性、生命周期撰写顺序。

// good
export default {name: 'App',components: {},props: {},data() {},computed: {},created() {},mounted() {},methods: {}watch: {},
};

★ [强制] 组件 props 定义详细。

// good
export default{props: {status: {type: Boolean,required: true}}props: {status: {type: String,default: ()=> 'synced'}}props: {status: {type: String,required: true,validator: function (value) {return ['syncing','synced','version-conflict','error'].indexOf(value) !== -1}}}
}// bad
props: ['status']

● [建议] 使用 ES6 风格编码源码。

5. style

★ [强制] 为组件样式设置作用域scoped

这条规则只适用于单文件组件。防止样式污染。

<!-- good -->
<style scoped>.list-item{}
</style><!-- bad -->
<style>.list-item{}
</style>

★ [强制] 一个项目只允许使用一种预处理语言。

同一个项目里面不能scss和less同时存在，微前端每个子应用只允许使用一种预处理语言。

● [建议] 元素选择器应该避免在 scoped 中出现。

在 scoped 样式中，类选择器要比元素选择器更好，因为大量地使用元素选择器是很慢的。

● [建议] 不推荐使用 id 选择器来定义样式。

6. Vuex

★ [强制] 组件内不能直接修改state,只能通过mutation修改。

● [建议] 仅在必要时使用vuex。

7. VueRouter

★ [强制] 使用路由懒加载。

// good
const UserDetails = () => import('./views/UserDetails')// bad
import UserDetails from './views/UserDetails'

前端开发规范——Vue相关推荐

阿里前端规范_阿里前端开发规范
前端代码规范 Front Standard Guide 前端 JS 项目开发规范规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快乐的. 引自<阿里规约> ...
前端开发规范V2023.5
前端开发规范本文档适用于所有前端项目的开发,为了方便开发团队和个人统一规范风格而作.文档中包含了开发中需要注意的事项以及参考建议,本文档不单是一篇规范要求,同时也是前端开发手册,当你不知如何做比较好 ...
前端架构之路（3） - 前端开发规范
前端开发规范 1. 为什么需要 "前端开发规范" 规范不是强制性的,对代码的编写和程序的运行不会有致命的问题,但是没有规范会有一系列的问题,比如: 缺乏规范,第一个问题就是团队编码 ...
前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
vue 动态添加class_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...
前端开发规范文档(html,css,js)
首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的 ...
w3c html规范规范文档,前端开发规范
为什么要有web网站前端开发规范手册?因为人多不一定就力量大,还有可能一团糟.因此为了提升团队凝聚力,统一团队代码风格,优化团队协作效率,需要推出专门的<前端开发规范手册>来约束同一项目不 ...
（16）WEB前端开发规范之HTML规范
一.WEB前端开发规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本 ...
vue 将字符串最后一个字符给替换_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...

前端开发规范——Vue