Uniapp 项目创建与目录结构解析

以下为新手必懂的完整指南，涵盖项目创建流程和核心文件作用解析：

一、项目创建流程

1. 安装开发工具
   使用 HBuilderX（官方 IDE）或命令行创建：

   # 全局安装 vue-cli
   npm install -g @vue/cli# 创建项目（选择默认模板）
   npx degit dcloudio/uni-preset-vue#vite my-project
   

2. 初始化配置
   运行后自动生成基础结构，关键步骤：

   • 选择模板：默认模板（含基础示例）
   • 包管理器：npm 或 yarn
   • 自动安装依赖

二、核心目录结构解析

my-project/
├── src/                 # 核心开发目录
│   ├── pages/           # 所有页面目录
│   │   └── index/       # 示例首页
│   │       ├── index.vue  # 页面组件
│   │       └── index.json # 页面配置文件
│   │
│   ├── static/          # 静态资源（图片/字体等）
│   ├── App.vue          # 应用根组件
│   └── main.js          # 应用入口文件
│
├── uni_modules/         # 插件模块（自动生成）
├── manifest.json        # 应用配置（名称/图标/权限）
├── pages.json           # 全局页面路由与样式
├── package.json         # npm依赖管理
└── vite.config.js       # Vite构建配置（如使用Vite模板）

三、关键文件作用详解

1. pages.json

   • 控制全局页面路由与样式
   • 配置导航栏、底部 tabBar

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

2. manifest.json

   • 定义应用基本信息
   • 配置 App 图标、启动页、SDK 权限

   {"name": "MyApp","appid": "__UNI__XXXXXX","description": "示例应用","icons": [{ "src": "static/logo.png" }]
   }
   

3. App.vue

   • 全局入口组件
   • 初始化全局样式、监听生命周期

   <script>
   export default {onLaunch: () => console.log('App 启动')
   }
   </script>
   <style> /* 全局CSS */ </style>
   

4. 页面文件组（以 index.vue 为例）

   • index.vue：页面布局与逻辑
   • index.json：局部页面配置（覆盖全局）

   <!-- index.vue -->
   <template><view class="container"><text>Hello Uniapp!</text></view>
   </template>
   

5. static/ 目录

   • 存放无需编译的静态资源
   • 访问路径：/static/logo.png

四、新手注意事项

1. 路由规则

   • 新增页面需在 pages.json 注册路径
   • 路径格式：pages/目录名/文件名（无后缀）

2. 资源引用原则

   • 图片/字体：优先放 static/
   • 组件/工具：放 components/ 或 utils/

3. 多端适配技巧
   使用条件编译：

   <!-- #ifdef H5 -->
   <div>仅H5显示的组件</div>
   <!-- #endif -->
   

提示：运行 npm run dev:%PLATFORM%（如 dev:mp-weixin）启动开发环境，通过 HBuilderX 可视化工具可实时预览多端效果。