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

相关推荐
少油少盐不要辣12 小时前
uniapp小程序使用自定义底部tabbar,并根据用户类型动态切换tabbar数据
小程序·uni-app
复苏季风1 天前
UniApp 小白入门实战专栏①:从安装 HBuilderX 开始,3 步跑通第一个项目
前端·微信小程序·uni-app
雪芽蓝域zzs1 天前
uniapp解析富文本,视频无法显示问题
uni-app·音视频
2501_915918411 天前
uni-app 跨平台项目的 iOS 上架流程:多工具组合的高效协作方案
android·ios·小程序·https·uni-app·iphone·webview
lumi.2 天前
HarmonyOS image组件深度解析:多场景应用与性能优化指南(2.4详细解析,完整见uniapp官网)
前端·javascript·小程序·uni-app·html·css3
前端无涯2 天前
uniapp跨平台开发---uni.request返回int数字过长精度丢失
javascript·uni-app
2501_916013742 天前
iOS 文件管理与 uni-app 性能优化实战 多工具协作的完整指南
android·ios·性能优化·小程序·uni-app·iphone·webview
摸鱼一级选手2 天前
uni-app 常用钩子函数:从场景到实战,掌握开发核心
前端·vue.js·uni-app
2501_915106323 天前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit