基于Vue前端开发规范

最新推荐文章于 2025-06-11 06:03:31 发布

原创最新推荐文章于 2025-06-11 06:03:31 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #代码规范

个人同时被 2 个专栏收录

4 篇文章

订阅专栏

Small factory

1 篇文章

订阅专栏

1、目的

编写说明书目的是为了提高提高团队的协作能力、提高代码的复用利用率、提升前端代码质量、提升前端项目后期维护性。

2、命名规范

命名必须使用英语翻译，禁止使用中文音译。能够通过名称精准分析出当前内容。国际通用的名称，可视同英文。

2.1、项目命名

全部采用小写方式，以中划线分隔
• Positive: test-system
• Counter: test_system

2.2、目录命名

全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数
• Positive: test/script/demo-script
• Counter: test/script/demoScript test/script/demo_script

2.3、图片文件命名

分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质
• Positive: banner_yili_logo.png
• Counter: bannerYiliLogo.png banner-yili-logo.png

2.4、JS、CSS、SCSS、HTML文件命名

全部采用小写方式，以中划线分隔
• Positive: render-dom.js / signup.css / index.html
• Counter: renderDom.js / UserManagement.html

2.5、 components 组件、类命名规则

全部采用大驼峰命名方式
• Positive: TestSystem
• Counter: testSystem

2.6、函数命名规则

全部采用小驼峰lowerCamelCase风格，方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。
• Positive: nameString
• Counter: nameString / nameString / nameString$ / name_string

2.7、常量、变量命名

常量，使用全部大写, 以中划线分隔,力求语义表达完整清楚，不要嫌名字长。
变量，使用小驼峰命名。
• Positive: BANNER_LOGO_IMG / bannerLogoImg
• Counter: BANNER_LOGON / banner_logo_img

2.8、命名严谨性

• 代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。
• 能够通过名称精准分析出当前内容。
• 正确的英文拼写和语法可以让阅读者易于理解，避免歧义。
• 纯拼音命名方式也要避免采用

3、 HTML规则

推荐使用 HTML5 的文档类型申明：建议使用text/html格式的HTML。避免使用XHTML。XHTML以及它的属性（application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。
• 规定字符编码
• IE 兼容模式
• 规定字符编码
• doctype 大写
• 缩进使用4个空格，嵌套的节点应该缩进
• 在每一个块状元素，列表元素和表格元素后，加上一对HTML注释。注释格式
• HTML5中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是div或者p标签

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

4、 Style规则

• 类名使用小写字母，以中划线分隔
• ID采用驼峰式命名
• scss中的变量、函数、混合、占位符采用驼峰式命名
• 应该尽量避免css中出现HTML标签
• 选择器链尽量使用直接子选择器（性能）
• 尽量使用缩写属性（性能）
• 省略0后面的单位
• 避免使用ID选择器及全局标签选择器防止污染全局样式
• Scss避免多层级嵌套

5、 JavaScript\TypeScript 规则

• 书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);
• 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
• 后期优化中, JavaScript非注释类中文字符须转换成Unicode编码使用, 以避免编码错误时乱码显示;
• 代码结构明了, 加适量注释(30%以上). 提高函数复用率;
• 注重与html分离, 减小reflow, 注重性能.
• 程序块缩进必须定义为4个空格数
• 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性
• 对象声明、数组声明，使用字面值创建，字面量代替构造器（性能）
• 优先使用es6+新增语法以及语法糖（代码优化、提高复用性）
• 关键字后必须有大括号（即使代码块的内容只有一行）
• 不要直接使用undefined进行变量判断；使用typeof和字符串undefined对变量进行判断
• 条件判断能使用三目运算符和逻辑运算符解决的，不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释
• 对上下文this的引用只能使用self来命名
• console.log大量使用会有性能问题，所以在非webpack项目中谨慎使用 log 功能
• 善用浏览器回收机制以及手动资源释放

6、 Vue规则（基础）

vue项目规范以 Vue 官方规范中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。
• 组件名应该始终是多个单词组成（大于等于 2），且命名规范为KebabCase格式（避免与html元素冲突）
• 组件文件名为PascalCase格式
• 基础组件文件名为base开头，使用完整单词而不是缩写
• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
• 在Template模版中使用组件，应使用PascalCase模式，并且使用自闭合组件
• 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。如果直接是一个对象的话，子组件之间的属性值会互相影响。
• Prop定义应该尽量详细，必须以camelCase模式，必须指定类型、注释（表明其含义）、加上 required 或者 default
• 为组件样式设置作用域（scoped）
• 特性元素较多，应主动换行
• Template模板中使用简单的表达式，不允许Template模板内部代码中编写JavaScript逻辑代码
• 指令缩写（:表示 v-bind: \ @ 表示 v-on: \ # 表示 v-slot: ……）
• 必须为v-for设置键值key
• 需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if
• script 标签内部结构顺序：components > props > data > computed > watch > filter > 生命周期钩子函数（按其执行顺序） > methods

7、 Vue规则（路由）

vue项目规范以 Vue 官方规范中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。
• 页面跳转数据传递使用路由参数
• 使用路由懒加载（延迟加载）机制（component: () => import('XXX.vue')）
• path、children命名规范采用kebab-case命名规范。与vue文件的目录结构保持一致，方便找到对应的文件
• path除了采用kebab-case命名规范以外，必须以/开头，即使是children里的path也要以/开头
• name 命名规范采用KebabCase命名规范且和component组件名保持一致！（保持keep-alive特性，keep-alive按照component的name进行缓存，两者必须高度保持一致）

8、 ApiJS规则

• 文件、变量命名要与后端保持一致
• 此目录对应后端 API 接口，按照后端一个Controller一个ApiJS文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。
• Api中的方法名称与后端 Api Url保持一致
• Api中的每个方法要添加注释，并且详细说明请求参数、请求类型以及功能描述

9、注释规则

注释率必须达到30%以上

9.1、 Html注释

, '–'只能在注释的始末位置,不可置入注释文字区域

9.2、 css注释

/*这儿是注释*/

9.3、 JavaScript注释

• 单行注释使用’//这儿是单行注释’
• 多行注释使用 /* 这儿有多行注释 /
• 函数注释使用必须标明作者、函数说明、时间、条件、回调 / * @Author: {Author} * @Date: {createTime} * @description: {description} * @param: {param} * @return: {return} */

9.4、必须添加注释的地方

• Api接口必须注释
• Vuex必须注释
• Vue文件中的data、template、methods必须注释，若文件较大添加start end注释
• 函数方法必须注释
• Scss函数以及常\变量必须注释

10、 UI组件库规则

• UI组件必须按需引入
• 单个项目只能使用一种UI组件库
• Vue项目必须使用ElementUI(PC)\Vant(移动端)

11、组件规则

• 基础类型检测 (null 意思是任何类型都可以)
• Type组件传参类型（必须包含）
• Default组件默认值（必须设置）
• 组件传参只能使用props、$emit、.syn、$attrs、$listeners、provide和inject
• 组件内必须按需加载依赖
• 组件内不允许写入任何请求
• 代码注释率必须达到30%以上