uni-app 项目目录结构

用 HBuilderX 新建一个「默认模板」的 uni-app 项目后，目录结构大致如下：

my-uni-app/
├── pages/                # 页面目录，所有页面都放这里
│   └── index/
│       └── index.vue     # 首页
├── static/               # 静态资源（图片、字体、本地文件）
├── uni_modules/          # 插件市场的扩展组件和模块
├── App.vue               # 应用根组件（生命周期 + 全局样式）
├── main.js               # 应用入口文件
├── manifest.json         # 应用配置（打包信息、各平台配置）
├── pages.json            # 页面配置（路由、导航条、tabBar）
├── uni.scss              # 全局样式变量
└── index.html            # H5 端的入口 HTML

下面逐个讲解每个文件管什么。

pages/ 页面目录

所有页面都是 .vue 文件，按目录分组存放。每个页面是一个独立的 Vue 组件，包含模板、脚本、样式三部分。

pages/
├── index/
│   └── index.vue      # 首页
├── list/
│   └── list.vue       # 列表页
└── detail/
    └── detail.vue     # 详情页

注意：pages/ 下的文件不会自动成为页面，必须先在 pages.json 的 pages 数组中注册（后面有专门一篇讲路由）。

pages.json 页面配置

这是 uni-app 项目里最重要的配置文件，负责所有页面级的设置：

• pages 数组，注册页面路径，数组第一个元素就是应用启动后的首页
• globalStyle，全局窗口外观，如导航条标题、背景色
• tabBar，底部选项卡配置
• easycom、condition 等高级配置

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

manifest.json 应用配置

负责应用打包级的信息，打开后是可视化表单：

• 应用名称、AppID、版本号、图标、启动图
• 各平台配置，微信小程序的 appid 写在这里，App 端的权限模块（定位、推送、相机）也在「App 模块配置」中勾选

可以理解为，pages.json 管页面长什么样，manifest.json 管应用打包成什么样。

App.vue 根组件

每个页面之外的全局根组件，承担两类职责：

1. 应用生命周期，在 onLaunch（应用初始化）、onShow、onHide 里做全局处理，比如检查登录态、统计上报
2. 全局样式，<style> 不写 scoped 时，里面的样式对所有页面生效

<script>
export default {
  onLaunch() {
    console.log('应用启动')
  }
}
</script>

<style>
/* 全局样式，所有页面都会生效 */
page {
  background-color: #f5f5f5;
}
</style>

main.js 入口文件

应用的启动入口，创建一个 Vue 应用实例。Vue3 版本的写法是固定的，一般不需要改：

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

static/ 静态资源目录

存放图片、字体等静态文件。目录中的文件会被原样打包到各端，引用方式：

<image src="/static/logo.png"></image>

注意：static 目录名是固定的，不能改名，也不能放页面文件。

uni_modules/ 插件市场模块

从 uni-app 插件市场安装的扩展组件和模块都会装到这里，例如 uni-ui 组件库。插件即插即用，自带文档和依赖。

uni.scss 全局样式变量

专门用来定义全局 SCSS 变量的文件，例如默认主题色。定义后可以在任意组件的 <style lang="scss"> 中直接使用，无需 import：

/* uni.scss */
$uni-color-primary: #007aff;

/* 任意组件 */
<style lang="scss" scoped>
.button {
  background-color: $uni-color-primary;
}
</style>

各文件配合关系

用一句话描述它们的协作流程，当用户打开应用时：

1. main.js 创建应用实例，挂载 App.vue
2. manifest.json 决定应用的品牌和打包配置
3. pages.json 决定先打开哪个页面（首页）、导航条长什么样
4. 页面渲染时，pages/ 里的页面代码加载，static/ 提供图片等资源，uni.scss 提供样式变量，App.vue 的全局样式打底

总结

一句话总结：pages.json 管页面，manifest.json 管打包，App.vue 管全局，pages/ 里写页面，记住这四个就能看懂任何 uni-app 项目。