vue3目录结构详细说明及文件命名规范

发布时间:2024年01月18日

vue3目录结构详细说明及文件命名规范

Vue3 项目的目录结构通常遵循一定的组织原则,旨在提高代码的可读性、可维护性和模块化。
以下是个人集合了Ai建议加个人常用习惯总结的目录结构(仅做笔记记录) Vue3 项目基于常见最佳实践的目录结构示例及其说明:

my-vue3-project/
├── public/           # 静态资源文件夹,其中的文件会直接复制到构建输出目录中,无需经过编译处理
│   ├── favicon.ico    # 网站图标
│   └── index.html    # 应用程序入口HTML文件,Vue应用将挂载于此文件中的特定元素上

├── src/
│   ├── assets/        # 静态资源目录,包含图片、字体等未经过webpack编译的文件,可使用import导入并在构建时进行处理
│   ├── components/    # 组件目录,按照功能或类别划分存放单文件组件(.vue文件)
│   │   ├── Common/     # 公共组件目录
│   │   ├── Layout/     # 布局组件目录
│   │   └── ...         # 其他分类组件目录
│   ├── directives/    # 自定义指令目录,存放Vue自定义指令实现
│   ├── hooks/         # Vue Composition API 的自定义 Hooks 目录,用于组织和复用可组合的逻辑单元
│   ├── layouts/       # 应用布局相关的组件存放处,例如通用页面布局组件
│   │   ├── AppLayout.vue 
│   │   └── ...         # 其他布局相关页面组件
│   ├── pages/          # 页面组件目录,根据功能模块划分不同页面组件
│   │   ├── Home/       # 主页或首页相关页面组件
│   │   │   ├── Index.vue
│   │   │   └── ...
│   │   ├── User/       # 用户管理相关的页面组件
│   │   │   ├── Profile.vue
│   │   │   ├── Settings.vue
│   │   │   └── ...
│   │   ├── Product/    # 产品管理相关的页面组件
│   │   │   ├── List.vue
│   │   │   ├── Detail.vue
│   │   │   └── ...
│   │   └── ...         # 其他功能模块的页面组件目录
│   ├── plugins/       # Vue 插件配置目录,存放全局注册的插件及其配置
│   ├── router/        # 路由配置目录,主要包含index.js路由文件,用于配置应用程序的路由规则
│   ├── store/         # Vuex 状态管理目录,用于集中管理组件状态和数据流
│   ├── styles/        # 样式文件目录,包括全局样式、主题样式等
│   ├── utils/         # 工具函数和类库目录,存放项目中常用的工具函数、辅助类等
│   ├── App.vue        # 应用程序根组件,整个应用的入口点,通常包含路由视图和其他全局共享组件
│   ├── main.ts        # 应用程序入口脚本,用于初始化Vue实例、引入并配置路由、状态管理等核心模块
│   └── shims-vue.d.ts # TypeScript 类型声明文件,为Vue相关API提供类型支持

├── tests/             # 测试相关文件目录,存放单元测试、集成测试等代码
├── .env.*             # 环境变量配置文件,根据不同环境如开发、生产等设置不同的环境变量
├── .eslintrc.js       # Eslint 配置文件,用于定义项目的代码风格规范和错误检查规则
├── .gitignore         # Git 忽略文件,列出不需要添加到版本控制的文件或目录
├── package-lock.json       #  npm 包管理器中用于锁定项目依赖版本的文件
├── package.json       # npm 包配置文件,包括项目依赖、脚本命令、项目信息等元数据
├── vite.config.ts     # Vite 构建工具的配置文件,用于定制Vite的构建行为(如果使用Vite构建系统)
├── README.md          # 项目文档和说明文件,介绍项目结构、启动方式及注意事项等
├── tsconfig.json          # TypeScript 项目的核心配置文件,用于指定编译选项、包含的源文件、排除的文件等信息
├── tsconfig.node.json          # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置
├── .prettierrc        # Prettier 代码格式化配置文件,定义代码格式化规则
├── .ls-lint.yml       # Linting 规则配置文件,例如针对Less预处理器的代码风格检查规则
└── changelog.md       # 更新日志文件,记录项目的版本迭代和更新内容

命名规范:
普通变量:采用驼峰命名法(camelCase),例如 myVariable。
常量:一般建议全大写并用下划线分隔,例如 MY_CONSTANT。
Vue组件:文件名和引用时都应采用PascalCase,即每个单词首字母大写的驼峰命名法,例如 MyComponent.vue。
目录:推荐使用小写字母和短横线 - 来分隔单词,例如 components/common。
在 Vue3 中,单文件组件 (SFC) 的内部结构也遵循特定规范,通常包含 、

个人总结参考,有更好的可交流交流: 交流群:857064044

文章来源:https://blog.csdn.net/Jo_liver/article/details/135392995
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。