uniapp 目录

uniapp 目录结构

uniapp 的目录结构遵循 Vue.js 项目的规范，同时包含一些特有的文件和目录。以下是典型的 uniapp 项目目录结构及其说明：

project-name/
├── .hbuilderx/             # HBuilderX 项目配置文件（可选）
├── .vscode/               # VSCode 配置文件（可选）
├── node_modules/          # 项目依赖包
├── pages/                 # 页面目录，每个页面是一个文件夹
│   ├── index/             # 示例页面
│   │   ├── index.vue      # 页面组件
│   │   └── index.json     # 页面配置文件
├── static/                # 静态资源目录（图片、字体等）
├── unpackage/            # 编译生成的文件目录
├── App.vue                # 应用入口组件
├── main.js                # 应用入口文件
├── manifest.json          # 应用配置文件
├── pages.json            # 页面路由和导航栏配置
├── uni.scss              # 全局样式文件
└── package.json          # 项目配置文件

核心目录和文件说明

pages/

• 存放所有页面文件，每个页面是一个单独的文件夹。
• 每个页面通常包含 .vue 文件（页面组件）、.json 文件（页面配置）和可选的 .scss 文件（页面样式）。

static/

• 存放静态资源文件，如图片、字体、音频等。
• 这些文件会被直接复制到编译后的项目中，不会被 webpack 处理。

unpackage/

• 编译后的文件存放目录，包括各平台的打包结果。
• 该目录通常会被忽略（通过 .gitignore）。

App.vue

• 应用的根组件，所有页面都会继承该组件的样式和行为。
• 可以在这里定义全局样式或生命周期钩子。

main.js

• 应用的入口文件，负责初始化 Vue 实例和加载插件。

manifest.json

• 应用配置文件，包含应用名称、图标、启动页等元信息。
• 支持多平台配置，如微信小程序、H5、App 等。

pages.json

• 页面路由和导航栏配置文件。
• 定义页面路径、窗口样式、底部导航栏等。

uni.scss

• 全局样式文件，可以定义 SCSS 变量和混合宏。
• 其他样式文件可以通过 @import 引入这些变量。

其他常见目录

components/

• 存放可复用的 Vue 组件。
• 组件可以通过 import 在页面中使用。

store/

• 存放 Vuex 状态管理文件（如果使用 Vuex）。
• 通常包含 index.js 和模块化的状态文件。

common/

• 存放公共工具函数、常量或混入（mixins）。
• 例如 utils.js、api.js 等。

platforms/

• 存放平台特定的代码（可选）。
• 例如针对微信小程序或 H5 的特殊逻辑。

注意事项

• 静态资源尽量放在 static/ 目录，避免被 webpack 处理。
• pages/ 目录下的页面需要先在 pages.json 中注册才能访问。
• manifest.json 和 pages.json 是 uniapp 特有的配置文件，需按规范编写。
• 编译后的文件会生成在 unpackage/ 目录，无需手动修改。