《校园生活平台从 0 到 1 的搭建》第一篇：创建项目与构建目录结构

在本系列第一篇中，我们将从项目初始化开始，搭建基本的目录结构，并完成四个主页面的创建与 TabBar 设置。

（tip：你可能会觉得有点 ai 化，因为这个文案是我自己写了一遍文案之后让 ai 去优化输出的）

- 一、创建项目与规范目录结构
- - [1. 打开 HBuilderX，创建一个新的 uni-app 项目。在创建时请选择 Vue 2 版本。](#1. 打开 HBuilderX，创建一个新的 uni-app 项目。在创建时请选择 Vue 2 版本。)
  - [2. 项目创建完成后，建议提前划分好目录结构。](#2. 项目创建完成后，建议提前划分好目录结构。)
- [二、配置四个 Tab 页面与底部导航栏](#二、配置四个 Tab 页面与底部导航栏)
- - [2.1 添加图标资源](#2.1 添加图标资源)
  - [2.2 页面结构准备](#2.2 页面结构准备)
  - [2.3 配置 pages.json](#2.3 配置 pages.json)
- [✅ 总结](#✅ 总结)

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

一、创建项目与规范目录结构

1. 打开 HBuilderX，创建一个新的 uni-app 项目。在创建时请选择 Vue 2 版本。

2. 项目创建完成后，建议提前划分好目录结构。

虽然部分目录在初期可能暂未使用，但良好的结构有助于后续开发的规范和扩展。

推荐的目录结构如下：

bash 复制代码

/uni-app-wxschool/              # 项目根目录
├── /components/                # 公共组件（如卡片、导航栏等）
│   └── ...
│
├── /pages/                     # 页面目录
│   ├── /home/                  # 首页
│   │   └── index.vue
│   ├── /services/              # 校园服务
│   │   └── index.vue
│   ├── /forum/                 # 校园论坛
│   │   └── index.vue
│   ├── /profile/               # 用户中心
│   │   └── index.vue
│   └── /login/                 # 登录注册页
│       └── index.vue
│
├── /store/                     # Vuex 状态管理
│   └── index.js
│
├── /utils/                     # 工具函数（如请求封装、表单验证等）
│   └── ...
│
├── /common/                    # 通用配置（样式、常量、mixin 等）
│   └── ...
│
├── /static/                    # 静态资源（图片、图标等）
│   └── ...
└── config.js                   # 项目配置（如接口地址、环境变量等）
│ 	...													# 项目自带的其他文件

💡 注意事项：如果你手动创建了某些页面文件，记得检查 pages.json 是否正确引入了这些页面路径，否则页面将无法被识别。

二、配置四个 Tab 页面与底部导航栏

2.1 添加图标资源

在 /static/tabbar/ 目录中添加四个页面的图标，分别为选中与未选中状态，例如：

bash 复制代码

static/
└── tabbar/
    ├── 11.png   # 首页默认图标
    ├── 12.png   # 首页选中图标
    ├── 21.png   # 服务默认图标
    ├── 22.png   # 服务选中图标
    ├── 31.png   # 论坛默认图标
    ├── 32.png   # 论坛选中图标
    ├── 41.png   # 我的默认图标
    └── 42.png   # 我的选中图标

👉 图标推荐来源：阿里巴巴矢量图标库（iconfont）

2.2 页面结构准备

确保以下页面结构已创建：

bash 复制代码

/pages/
├── /home/        → 首页
├── /services/    → 校园服务
├── /forum/       → 校园论坛
├── /profile/     → 用户中心

每个目录下至少应有一个 index.vue 页面文件。

2.3 配置 pages.json

在 pages.json 中添加页面配置与底部 tabBar 设置：

bash 复制代码

{
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/services/index",
      "style": {
        "navigationBarTitleText": "校园服务"
      }
    },
    {
      "path": "pages/forum/index",
      "style": {
        "navigationBarTitleText": "校园论坛"
      }
    },
    {
      "path": "pages/profile/index",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页",
        "iconPath": "static/tabbar/11.png",
        "selectedIconPath": "static/tabbar/12.png"
      },
      {
        "pagePath": "pages/services/index",
        "text": "服务",
        "iconPath": "static/tabbar/21.png",
        "selectedIconPath": "static/tabbar/22.png"
      },
      {
        "pagePath": "pages/forum/index",
        "text": "论坛",
        "iconPath": "static/tabbar/31.png",
        "selectedIconPath": "static/tabbar/32.png"
      },
      {
        "pagePath": "pages/profile/index",
        "text": "我的",
        "iconPath": "static/tabbar/41.png",
        "selectedIconPath": "static/tabbar/42.png"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "校园生活平台",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

✅ 总结

至此，我们完成了：

● 项目的初始化

● 合理的目录结构划分

● 四个一级页面的创建

● 底部导航栏（TabBar）的配置

在下一篇中，我们将开始实现数据库搭建，请求方式的封装，后端的搭建