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/目录,无需手动修改。






