HomeBlogAboutLogin
返回列表

Vue3开发规范

#规范

愿景：不管项目有多少人参与，代码都像是同一个人书写的。

HTML

1. 语义化类名

通篇的 div + windicss 不利于审查元素，类名不一定为了写样式，也可以为了阅读。一般给布局层加一个易读的名字，便于快速找到位置。

image-20250117104628022

2. 基本规范

  • 2空格缩进
  • html使用双引号
  • html 非组件禁用大写字母
  • 标签必须正确闭合
  • 标签符合嵌套规则，如：<p>不可嵌套其他标签，<li>置于<ul>中， <a>不可嵌套<a>

image-20250117095342785

3. 编辑器统一vscode，代码脚本检查

框架已做了配置，保存时插件会根据配置文件自动格式化，验证生效

image-20250117100630072 ctrl+s image-20250117100651939

vue3.0规范

起手代码

<script setup lang="ts">
import { ref, reactive } from 'vue';
</script>

<template>
  <div></div>
</template>

<style lang="less" scoped></style>

因为vue3.0 js书写的灵活性，不像vue2选项式API，data methed 分离，一个很小的逻辑都必须拆的很远，而组合式API可以保持书写的完整性，一个功能代码在一起读起来一目了然。vue3.0 `js 比 html包含的信息更有价值所以推荐放在前面。

顺序书写

开发前将页面按功能模块划分，比如页面划分三块简称123。 原则上按照顺序123开发，禁止打乱顺序开发。 一个功能模块代码放到一起，复杂的业务加上注释。

image-20250219094029951

image-20250219100135264

注释的目的不一定是解释代码，而是让你修改的时候快速定位,。

API规范

  • 原则上api目录要和view目录一致， view目录下多个子页面接口可以写到一个父级api中，但是顶层文件夹名字必须一致，严禁将接口定义随便放

    image-20250219113258810 image-20250219113334837

路由规范

  • path路径 和view路径一致，维护直接通过url路径找代码

    views

    image-20250219113827924

    router.ts

    image-20250219113815211

JS/TS规范

基础

  • js使用单引号

  • 使用const声明响应式对象

  • 函数表达式用箭头函数， 不要用函数声明 纯工具函数除外

  • import 必须放到顶部引入不允许放在中间，自定义的内容要加注释（用途）

  • 特别多的if else嵌套，伴随着超级长的业务代码是非常丑陋的，超长的代码堆砌让人难以理解和维护。 超过50行的应该抽一个函数

    反面案例

    image-20250225152643533

    image-20250225095714823image-20250225095731781

注释

  • 不要给不好的名字加注释，一个好的名字比好的注释更重要
  • 注释应该声明代码的高层次意图，而非明显的细节
  • 类级别使用全局注释来解释所属部分如何工作，要给常量加注释
  • 自定义组件如果根据后端参数组织功能一定要加注释，比如type:1234 属于未知含义。 只前端定义的组件用英文单词，禁用魔数。
  • TODO 待处理的问题

命名

  • 使用具体的名字来细致的描述事物，通常我们使用类似于 searchHandle、destoryHandle、destorySubmit， 这种命名方式（驼峰式），函数语义更接近动宾短语（动词开头）避免空泛的名字 像seh 这种首字母缩写
  • 私有属性和方法应该以 _ 开头
  • 变量类型为布尔值表达加上is，has，can，should这样的词会更明确

类型

  • 变量声明不符合ts规范，飘红都要处理掉（即使不影响运行）
  • 常见类型报错及处理 -自己看ts教程
  • 尽量减少使用any作为响应式对象类型，后端接口返回可以用any
  • 参数类型的变量包括form禁止用any，应该定义时给出初始值让ts自动推导，
//反面
const params = ref<any>({})
//...一大堆代码组织params
 allepeizhiWithFile(params.value).then(...)

//正面
 const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  planName: '',
  checkUserId: '',
  checkState: ''
})
  planList(queryParams).then(...)

自动推导类型

image-20250225140746236

css

  • vue3已废弃 >>>、 ：：v-deep、 /deep/ 这三种， 用 :deep(inner-select){}
  • 推荐用工具类 unocss 支持 Windi CSS、Tailwind CSS和Twind 的 的所有用法。 大部分页面可以实现style代码为0

image-20250219134721256

  • 减少 class和style混用

反面案例

<span
  v-if="scope.row.checkFlag === '0'"
  class="label-content"
  style="background: rgb(250, 236.4, 216); color: #e6a23c"
>待审核
</span>

优化后

image-20250117113810862

  • 名字推荐用短横线方便复制 button_group ， button-group不方便复制

© 2026 转载请注明出处