【Uniapp】代码规范一：目录结构规范

在 UniApp 开发中，合理的目录结构能够提高项目的可维护性和可扩展性。以下是一个推荐的目录结构规范的详细内容：

1. 根目录

/project-root
│
├── /src                # 源代码目录
│   ├── /components     # 共享组件
│   ├── /pages          # 页面目录
│   ├── /assets         # 静态资源（图片、字体等）
│   ├── /store          # 状态管理
│   ├── /utils          # 工具函数
│   ├── /api            # API 接口
│   ├── /styles         # 全局样式
│   ├── /mixins         # 代码复用（如 Vue mixins）
│   └── App.vue         # 根组件
│
├── /config             # 配置文件
│   ├── index.js        # 项目配置
│   └── env.js          # 环境变量配置
│
├── /static             # 其他静态资源（如 favicon 等）
│
├── /tests              # 测试文件
│
├── /public             # 公共资源（如 index.html）
│
├── /build              # 构建配置（如 webpack 等）
│
├── .gitignore          # Git 忽略文件
├── package.json        # 项目依赖和脚本
└── README.md           # 项目说明文档

2. 目录详细说明

- /src

• /components：放置可复用的 Vue 组件。每个组件可以有自己的子目录，包含其样式、逻辑和测试文件。

/components
├── Button.vue
├── Modal
│   ├── Modal.vue
│   ├── Modal.scss
│   └── Modal.spec.js

/pages：放置各个页面，通常每个页面对应一个 .vue 文件。每个页面可以有其子目录以存放相关的组件和样式。

/pages
├── Home.vue
├── Profile.vue
├── Settings
│   ├── Settings.vue
│   ├── Settings.scss
│   └── components
│       ├── UserForm.vue
│       └── Preferences.vue

/assets：存放项目使用的静态资源文件，如图片、图标和字体等。

/assets
├── images
├── fonts
└── icons

/store：用于 Vuex 状态管理的相关文件，通常包括 store.js、模块文件和状态管理工具。

/store
├── index.js
└── modules
    ├── user.js
    └── products.js

/utils：存放项目中的工具函数，如格式化、请求等。

/utils
├── format.js
└── request.js

/api：集中管理 API 接口请求的文件，通常以模块化方式管理不同的 API。

/api
├── user.js
└── product.js

/styles：存放全局样式文件，包括 CSS、SCSS 或 LESS 文件，适用于整个应用。

/styles
├── main.scss
└── variables.scss

/mixins：放置 Vue mixins 以便于代码复用。

/mixins
├── formMixin.js
└── fetchMixin.js

• App.vue：根组件，作为整个应用的入口。

- /config

• 存放项目的配置文件，如项目设置、环境变量等。

- /static

• 其他静态资源，例如 favicon、manifest 等。

- /tests

• 存放测试文件和测试相关的配置。可以按功能模块或组件进行分类。

- /public

• 存放公共资源，如 index.html 等。通常不需要经过打包工具处理的静态文件放在此目录中。

- /build

• 存放构建工具的配置文件，如 webpack、babel 等相关配置。

3. 命名规范

• 文件和目录命名：使用小写字母，单词之间用连字符（-）分隔，例如 user-profile.vue，保持一致性。
• 组件命名：组件文件名使用 PascalCase（例如 UserProfile.vue），使其更易于识别。
• 样式文件：样式文件名与其组件文件名保持一致，便于管理（例如 UserProfile.scss）。

4. 总结

合理的目录结构可以帮助开发者快速理解和维护项目。根据项目的复杂度和规模，适当调整目录结构和命名规范，使团队协作更加高效。始终保持结构的清晰和一致性是成功的关键。