《前端Vue开发规范》

maeryang0510

已于 2023-07-24 15:29:15 修改

阅读量1k

点赞数

分类专栏： # 前端技术文章标签：前端

于 2023-07-19 13:45:47 首次发布

本文链接：https://blog.csdn.net/maeryang0510/article/details/131803793

版权

前端技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、规范目的

提高团队协作效率
便于后台人员添加功能及前端后期优化维护

输出高质量的文档

二、结构化规范

1、目录文件夹及子文件规范

当使用临时文件时，在使用后，接口已经有了，发版后清除

|--src            #项目目录
|    |--api            #数据请求
|    |    |--Home            #首页页面api
|    |    |--Kind            #分类页面api
|    |--assets            #资源
|    |    |--css            #css资源
|    |    |--images            #图片资源
|    |    |--icons            #图标资源
|    |--components            #组件
|    |    |--common            #公共组件
|    |    |--Home            #首页页面组件
|    |    |--kind            #分类页面组件
|    |--routes            #路由
|    |--stores            #状态管理
|    |    |--Home            #首页页面的公共状态
|    |    |--Kind            #分类页面的公共状态
|    |--utils            #工具
|    |--views            #页面
|    |    |--Home            #首页页面
|    |    |--kind            #分类页面
|    |--main.ts            #入口文件

2、Vue 文件基本结构

Vue3基本结构

<template>
    <div class="roleview">
        角色管理
    </div>
</template>

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

// 路由
const Router = useRouter()


</script>

<style lang="scss" scoped>
.roleview {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
}
</style>

Vue2 + Ts 基本结构

<template>
  <div class="testview">

  </div>
</template>

<script lang="ts">
// use TypeScript
import { Vue, Component } from "vue-property-decorator";
@Component({
  components: {},
})
export default class test extends Vue {
  mounted() {

  }

}
</script>

<style lang="scss" scoped>
.testview {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
}
</style>

Vue2基本机构

<template>
    <div>
      <!--必须在div中编写页面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <!--声明语言，并且添加scoped-->
  <style lang="scss" scoped>

  </style>

3、多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行，增强可读性。

<!-- bad -->
< img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>
 
<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>

4、元素特性的顺序

原生属性放前面，指令放后面

- class
- id,ref
- name
- data-*
- src, for, type, href,value,max-length,max,min,pattern
- title, alt，placeholder
- aria-*, role
- required,readonly,disabled
- is
- v-for
- key
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- v-pre
- v-once
- v-model
- v-bind,:
- v-on,@
- v-html
- v-text

5、组件选项顺序

Vue2项目如下所示：

- components
- props
- data
- computed
- created
- mounted
- metods
- filter
- watch

三、命名规范

为了让大家书写可维护的代码，而不是一次性的代码
让团队当中其他人看你的代码能一目了然
甚至一段时间后你再看你某个时候写的代码也能看

1、普通变量命名规范

命名方法：

小驼峰命名法

命名规范：

1.命名必须是跟需求的内容相关的词；比如说我想声明一个常量，用来表示我的学校
const myScool = "安阳工学院";
2.命名是复数的时候需要加s，比如说我想声明一个数组，表示很多人的名字
const names = new Array( );

2、常量

命名方法：

全部大写

命名规范：

使用大写字母和下划线来组合命名，下滑线用以分隔单词
const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'

3、组件命名规范

官方文档推荐及使用遵循规则：

PascalCase（单词首字母大写命名）是最通用的声明约定
kebab-case（短横线分隔命名）是最通用的使用约定

组件名应该始终是多个单词的，根组件App除外
有意义的名词、简短、具有可读性
命名遵循PascalCase约定
公用组件以Abcd（公司名缩写简称）开头，如（AbcdDatePicker，Abcdtable）
页面内部组件以组件模块名简写为开头，Item为结尾，如（StaffBenchToChargeItem，StaffBenchAPPNotArrItem）
使用遵循kebab-case约定
在页面使用组件需要前后闭合，并以短线分隔，如（<abcd-data-picker></abcd-data-picker>,<abcd-table></abcd-table>）
导入及注册组件时，遵循PascalCase约定
同时还需要注意：必须符合自定义元素规范：切勿使用保留字。

4、方法命名规范

驼峰式命名，统一使用动词+名词形式
axios方法以get、post开头，以data结尾
事件方法以on开头
init、refresh单词除外
尽量使用常用的单词（set、get、open、close、jump、go、on、submit）

#函数常用动词
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 聚集

5、views 文件夹下命名规范

views下的文件夹命名

views下面的文件夹代表着模块的名字，一般直接由页面中文名称翻译为英文名称
英文名称第一个单词的首字母小写，后面的每个单词的首字母大写
尽量不要使用index给文件夹命名

views文件夹内部的文件命名规范

views下面的 vue 文件代表着页面的名字
放在模块文件夹之下
只有一个文件的情况下不会出现文件夹，而是直接放在views目录下面，如Login Home
尽量是名词
大写开头，开头的单词就是所属模块名字（Cardetail,CarEdit，CarList）

6、components 文件夹下命名规范

同上

7、api 文件夹下命名规范

同上

四、注释规范

代码注释在一个项目的后期维护中显得尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

1、务必添加注释列表

公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的处理说明，对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
多重if判断语句
注释必须以/** （至少两个星号）开头 **/
单行注释使用//

2、单行注释

注释单独一行，不要在代码后的同一行注释
  bad

  var name =”abc”; // 姓名    

  good

  // 姓名
  var name = “abc”;         

3、多行注释

组件使用说明，和调用说明
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2023年05月10日12:00:02
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
      **/