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

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


一、项目创建流程
  1. 安装开发工具

    使用 HBuilderX(官方 IDE)或命令行创建:

    复制代码
    # 全局安装 vue-cli
    npm install -g @vue/cli
    
    # 创建项目(选择默认模板)
    npx degit dcloudio/uni-preset-vue#vite my-project
  2. 初始化配置

    运行后自动生成基础结构,关键步骤:

    • 选择模板:默认模板(含基础示例)
    • 包管理器:npmyarn
    • 自动安装依赖

二、核心目录结构解析
复制代码
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:局部页面配置(覆盖全局)

      <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 可视化工具可实时预览多端效果。

相关推荐
代码老y1 小时前
UniApp 实战开发指南:从入门到项目上线
uni-app
草字3 小时前
uniapp usb调试鸿蒙一直连接不上。
uni-app
Nan_Shu_6143 小时前
学习:uniapp全栈微信小程序vue3后台 (25)
前端·学习·微信小程序·小程序·uni-app
不知名的前端专家4 小时前
uniapp安卓原生插件实现开启ble Server[外围模式]
android·uni-app·蓝牙
Q_Q5110082854 小时前
python+springboot+uniapp微信小程序“美好食荐”系统 美食推荐 菜谱展示 用户互动 评论收藏系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_9159184111 小时前
HTTPS 请求抓包实战,从请求捕获到解密分析的逐步流程与工具组合(https 请求抓包、iOS 真机、SSL Pinning 排查)
android·ios·小程序·https·uni-app·iphone·ssl
草字11 小时前
uniapp 打包安卓apk。同时安装正式和测试的apk。
android·uni-app
2501_9159184112 小时前
Charles与Postman、JMeter结合使用教程:高效接口调试与性能测试方案
测试工具·jmeter·ios·小程序·uni-app·postman·webview
Nan_Shu_61415 小时前
学习:uniapp全栈微信小程序vue3后台 (24)
前端·学习·微信小程序·小程序·uni-app
2501_9159214317 小时前
iOS App 混淆与热更新兼容实战 混淆后如何安全可靠地推送热修复(Hotfix)与灰度回滚
android·ios·小程序·https·uni-app·iphone·webview