Vue3 + TypeScript 组件和文件命名规范及 setup 导入顺序规范

news2025/7/17 0:54:53

前言

在 Vue3 项目中,合理的文件命名规范和导入顺序不仅有助于提高代码的可读性,还能增强团队协作的效率。特别是在使用 TypeScript 和 Composition API 的项目中,清晰的组件和文件结构尤为重要。本文将详细介绍 Vue3 + TypeScript 项目中的组件、文件命名规范,以及 setup 中的导入顺序建议,帮助开发者更高效地组织代码。

文件和组件命名规范

1.1 组件文件命名

  • 全局通用组件:使用 PascalCase 命名,例如 MyButton.vueUserCard.vue。这些组件一般放置在 src/components 文件夹下。
  • 业务特定组件:也采用 PascalCase 命名,例如 UserProfile.vueOrderSummary.vue。放置在特定业务模块目录下,如 src/views/user/components

1.2 非组件文件命名

  • 工具函数文件:使用 kebab-case,如 date-utils.tsarray-helpers.ts。通常放在 src/utils 下。
  • 常量和配置文件:使用 kebab-case,如 app-config.tstheme-constants.ts。放在 src/constantssrc/config 下。
  • API 文件:使用 kebab-case 命名,例如 auth.tsuser.ts。放置在 src/api 文件夹中。
  • 枚举文件:使用 PascalCase,如 ThemeEnum.tsUserRole.ts。放在 src/enums 文件夹中。
  • 类型定义文件:通常在类型前缀使用 I 或直接以功能命名,文件采用 PascalCase,如 UserType.tsAuthTypes.ts。放置在 src/typessrc/interfaces 下。

1.3 其他文件命名

  • Store 文件:使用 kebab-case 命名,例如 user.tstags-view.ts,存放在 src/store 文件夹中。
  • 路由文件:使用 kebab-case 命名,例如 auth-routes.tsdashboard-routes.ts,放在 src/router 下。

导入顺序

在 Vue3 的 setup 中编写 TypeScript 代码时,保持清晰的导入顺序可以提升代码的可读性。推荐的导入顺序如下:

  1. Vue 和 Composition API:先导入 Vue 核心库以及 Composition API 钩子,如 refcomputedreactivewatchuseRoute 等。
  2. 第三方库:导入第三方库或插件的类型定义和函数,如 axioselement-plus 等。
  3. 项目内配置和常量:如全局配置文件和常量,放在 /src/settings/src/constants 下。
  4. 枚举和类型定义:包括常用的枚举(Enum)和类型定义(types),通常存放在 /src/enums/src/types 中。
  5. Store 状态管理:引入项目的 Pinia store 模块,通常放在 src/store 中。
  6. API 和工具函数:导入项目内的 API 接口(api)和工具函数(utils)。
  7. 业务组件:导入页面或模块专用的子组件。业务组件放在特定页面或模块下的 components 文件夹中。
  8. 局部样式:在组件中引入其特定样式。
  9. 图片和其他资源:根据需要导入。

示例代码

以下是根据上述导入顺序的示例代码:

<script lang="ts" setup>

// Vue 和 Composition API
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';

// 第三方库
import type { FormInstance } from 'element-plus';

// 项目内配置和常量
import defaultSettings from '@/settings';
import { BASE_API_URL } from '@/constants/api-constants';

// 枚举和类型定义
import { ThemeEnum } from '@/enums/ThemeEnum';
import type { UserType } from '@/types/UserType';

// API 和工具函数
import AuthAPI from '@/api/dict-data';
import { formatDate } from '@/utils/date-utils';

// Store 状态管理
import { useUserStore } from '@/store/user';
import { useTagsViewStore } from '@/store/tagsView';

// 业务组件
import UserProfile from '@/views/user/components/UserProfile.vue';
import UserExport from '@/views/user/components/UserExport.vue';

import logo from "@/assets/logo.png";

</script>

组件与文件结构建议

为了方便项目的扩展和维护,以下是推荐的文件与组件组织结构:

src/
├── api/                        # API 请求文件
│   ├── auth.ts
│   └── dict-data.ts
├── components/                 # 全局通用组件
│   ├── MyButton.vue
│   └── UserCard.vue
├── constants/                  # 项目中的常量
│   └── api-constants.ts
├── enums/                      # 枚举定义
│   ├── ThemeEnum.ts
├── store/                      # Pinia store
│   ├── user.ts
│   └── tags-view.ts
├── types/                      # 类型定义文件
│   └── UserType.ts
├── utils/                      # 工具函数
│   ├── date-utils.ts
│   └── array-helpers.ts
├── views/                      # 业务页面和组件
    └── user/
        ├── index.vue           # 用户主页面
        └── components/         # 用户模块特有组件
          ├── UserProfile.vue
          └── UserExport.vue

命名规范总结

  • 组件命名:全局组件和业务组件均使用 PascalCase 命名,方便区分组件和 HTML 标签。
  • 文件命名:非组件文件使用 kebab-case 命名,包括工具、API、常量、store 等文件。
  • 导入顺序:按照上述推荐的顺序组织导入项,保持代码一致性和清晰性。

结语

在 Vue3 + TypeScript 项目中,遵循统一的命名规范和导入顺序,可以有效提升代码的可读性和维护性。合理的组件组织结构也有助于团队间的协作,便于扩展和复用。希望本文的规范建议能帮助你在项目中建立清晰、高效的代码结构,提高整体的开发体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229289.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ELK配置转存redis缓存,采集nginx访问日志

在136服务器上部署mysql 启动mysql服务 可通过以下命令查找安装的软件包 怎么查找安装软件的日志文件位置rpm -qc mysql-server&#xff0c;即可显示mysql.log位置 也可通过查找配置文件中的log关键字来查找log文件日志位置 用awk命令&#xff0c;以切割&#xff0c;输出第二个…

诱骗取电快充协议芯片,支持与其它 MCU 共用 D+D-网络和电脑传输数据

前言 在科技日新月异的今天&#xff0c;快充技术已成为智能手机、平板电脑乃至笔记本电脑等电子设备不可或缺的一部分。各大厂商为了提升用户体验&#xff0c;纷纷推出了自家的快充协议&#xff0c;这些协议不仅让充电速度大幅提升&#xff0c;还带来了更加智能、安全的充电体验…

ubuntu20.04 加固方案-设置用户缺省UMASK

一、编辑/etc/profile配置文件 打开终端。 查看当前umask 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/profile文件。 sudo vim /etc/profile 二、添加配置参数 在打开的配置文件的末尾中&#xff0c;添加或修改以下参数&#xff1a; umask 027 三、保存并退出…

高阶数据结构--图(graph)

图&#xff08;graph&#xff09; 1.并查集1. 并查集原理2. 并查集实现3. 并查集应用 2.图的基本概念3. 图的存储结构3.1 邻接矩阵3.2 邻接矩阵的代码实现3.3 邻接表3.4 邻接表的代码实现 4. 图的遍历4.1 图的广度优先遍历4.2 广度优先遍历的代码 1.并查集 1. 并查集原理 在一…

全渠道供应链打造中企业定制开发2+1链动模式S2B2C商城小程序的策略与影响

摘要&#xff1a;本文探讨了全渠道供应链打造对于零售企业的重要性及面临的挑战&#xff0c;着重分析了物流环节整合的难点&#xff0c;并以家电行业为例说明了节假日期间物流对企业经营的影响。同时&#xff0c;引入“企业定制开发21链动模式S2B2C商城小程序”这一关键因素&am…

Oracle视频基础1.3.3练习

1.3.3 检查数据库启动情况 ps -ef | grep oracle启动数据库 sqlplus /nolog conn / as sysdba修改 fast_start_mttr_target 参数为初始值-50&#xff0c;缺省 scope 和 sid&#xff0c;查看修改结果 show parameter fast; alter system set parameter 250; show parameter fa…

ArcGIS005:ArcMap常用操作101-150例动图演示

摘要&#xff1a;本文涵盖了GIS软件操作的多方面内容&#xff0c;包括地图文档的新建、打开、保存及版本兼容性处理&#xff1b;错误与警告的查阅及帮助文档的使用技巧&#xff1b;地图打印比例尺的调整与地图信息的完善&#xff1b;图层操作的撤销与恢复&#xff0c;界面元素的…

电商预售是时候“消亡”了

淘天反复横跳在预售里。 作者|周立青 编辑|杨舟 “明知道搞复杂的预售规则会给用户体验带来伤害&#xff0c;弊大于利&#xff0c;甚至内网就有很多人在骂在批评&#xff0c;还要在今年双11这么玩&#xff0c;算是见识到了公司的组织惯性和路径依赖是多么可怕”&#xff0c;淘…

关于游戏加加不可以在cs2中显示的解决方案

输入的代码如下 -allow_third_party_software 1.打开steam 右键cs2&#xff0c;打开属性。 然后再这里填上这个代码就可以了

Codeforces Global Round 27 D.Yet Another Real Number Problem

题目 题解&#xff1a; #include <bits/stdc.h> using namespace std; // #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 #define ll long long #define pii pair<int, i…

Spring Boot中解决BeanDefinitionStoreException问题的实战分享

目录 前言1. 问题背景2. 问题分析2.1 异常分析2.2 常见的错误原因2.3 排查过程 3. 解决方案3.1 清理缓存和重建项目3.1.1 清理IDEA缓存3.1.2 使用Maven清理并重建项目 3.2 升级Maven版本3.2.1 下载最新Maven版本3.2.2 IDEA配置新的Maven版本3.2.3 清理缓存并重新构建 3.3 验证问…

新160个crackme - 088-[KFC]fish‘s CrackMe

运行分析 需破解用户名和RegKey PE分析 C程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida函数窗口逐个查看&#xff0c;找到关键函数sub_401440 ida无法动调&#xff0c;需使用OD&#xff0c;启用StrongOD插件才可以动调ida静态分析&#xff0c;逻辑如下&…

淘宝/天猫获得淘宝商品评论 API 返回值说明

淘宝/天猫获得淘宝商品评论 API 返回值说明 item_review-获得淘宝商品评论API注册测试 taobao.item_review 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包…

Rust精简核心笔记:第三波,基础语法完结篇

今天是Rust精简核心笔记第三波&#xff0c;也是完结篇。之前已经介绍了二波&#xff0c;Rust精简核心笔记&#xff1a;第一波&#xff0c;深入浅出语法精华-CSDN博客&#xff0c;Rust精简核心笔记&#xff1a;第二波&#xff0c;语法精髓部分解锁-CSDN博客&#xff0c;通过三波…

如何找到车在路上行驶的视频素材

作为一名热爱拍摄视频的大学生&#xff0c;找到合适的车在路上行驶的视频素材是非常重要的。不论你是制作城市宣传片、汽车广告&#xff0c;还是交通相关的教学视频&#xff0c;高质量的视频素材都能显著提升作品的专业性。今天&#xff0c;我为大家推荐几个优秀的网站&#xf…

unity中预制体的移动-旋转-放缩

unity中预制体的移动-旋转-放缩 左上侧竖栏图标介绍Tools(手形工具)Move Tool(移动工具&#xff0c;单位米)Rotate Tool(旋转工具&#xff0c;单位角度)Scale Tool(缩放工具&#xff0c;单位倍数)Rect Tool(矩形工具)Transform Tool(变换工具)图标快捷键对照表工具使用的小技巧…

用Pyhon写一款简单的益智类小游戏——2048

文字版——代码及讲解 代码—— import random# 初始化游戏棋盘 def init_board():return [[0] * 4 for _ in range(4)]# 在棋盘上随机生成一个2或4 def add_new_tile(board):empty_cells [(i, j) for i in range(4) for j in range(4) if board[i][j] 0]if empty_cells:i,…

【UBuntu20 配置usb网卡】 记录Ubuntu20配置usb网卡(特别是建立热点)

【UBuntu20 配置usb网卡】 Ubuntu20配置usb网卡&#xff08;特别是建立热点&#xff09; 一、 闲言碎语的前言 usb的外置网卡&#xff0c;相比Windows即插即用&#xff0c;Linux买回来一顿折腾&#xff0c;准备把过程梳理一下记录起来。 网卡的方案其实就那几家&#xff0c;…

Training-free layout control with cross-attention guidance

https://zhuanlan.zhihu.com/p/666445024https://zhuanlan.zhihu.com/p/666445024 支持两种模式,1.sd文生图;2.绑定了dreambooth和text inversion的图像编辑。 # ------------------ example input ------------------examples &

微信网页授权回调地址放多个参数的方法

https://open.weixin.qq.com/connect/oauth2/authorize?appidAPPID&redirect_uriREDIRECT_URI&response_typecode&scopeSCOPE&stateSTATE#wechat_redirect 跳转后地址 redirect_uri/?codeCODE&stateSTATE。 redirect_uri如果不进行urlencode编码, 跳转后…