Uniapp Project Creator

When to use this skill

Use this skill whenever the user wants to:

• Create a new uni-app project from scratch
• Initialize uni-app project structure and configuration files
• Set up development environment for uni-app
• Generate project templates with different configurations
• Configure manifest.json and pages.json files
• Create uni-app pages and components
• Set up uni-app project with HBuilderX or CLI

How to use this skill

To create a uni-app project with a single command or via HBuilderX:

1. Identify the project type from the user's request:

• Standard uni-app project → Use Vue 2 or Vue 3 template
• HBuilderX project → Use HBuilderX creation method
• CLI project → Use Vue CLI or official CLI commands

2. Load the appropriate example file from the examples/guide/ directory:

• examples/guide/installation.md - Installation and environment setup
• examples/guide/quick-start.md - Quick start guide
• examples/guide/project-types.md - Different project types and templates

3. Load the appropriate template file from the templates/ directory:

• templates/project-templates.md - Project structure templates
• templates/cli-commands.md - CLI command templates

4. Follow the specific instructions in those files for project creation, structure, and configuration

5. Generate the project structure with proper files and configurations

Important Notes:

• This skill focuses on uni-app CLI quickstart and HBuilderX creation flows
• Use one command creation when the user wants "一句话创建"
• Ensure Vue 2/Vue 3 template choice matches the user's target stack

Examples and Templates

Examples

Located in examples/guide/:

• installation.md - Installation guide for uni-app development environment
• quick-start.md - Quick start guide for creating first uni-app project
• project-types.md - Different project types (Vue 2, Vue 3, TypeScript, etc.)

Templates

Located in templates/:

• project-templates.md - Complete project structure templates
• cli-commands.md - CLI command templates for project creation

API Reference

This skill focuses on project creation and initialization. For component and API references, see uniapp-project-guide.

Best Practices

1. Choose the right template: Select Vue 2 or Vue 3 based on project requirements 2. Configure properly: Set up manifest.json and pages.json correctly 3. Organize structure: Follow standard uni-app directory structure 4. Use CLI when possible: CLI provides more flexibility than HBuilderX 5. Version control: Initialize git repository after project creation

Resources

• Official Documentation: https://uniapp.dcloud.net.cn/quickstart-cli.html
• HBuilderX: https://www.dcloud.io/hbuilderx.html
• Vue CLI: https://cli.vuejs.org/
• uni-app GitHub: https://github.com/dcloudio/uni-app

Keywords

uniapp, uni-app, project creator, project initialization, HBuilderX, Vue CLI, manifest.json, pages.json, uni-app setup, uni-app template, 创建项目, 项目初始化, 快速开始

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异 2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查 3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码 4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本 5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。

uni-app 安装指南

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

安装方式

方式一：使用 HBuilderX（推荐新手）

HBuilderX 是 DCloud 官方提供的 IDE，内置 uni-app 开发环境。

下载安装： 1. 访问 https://www.dcloud.io/hbuilderx.html 2. 下载 HBuilderX（标准版或 App 开发版） 3. 安装并启动 HBuilderX

创建项目： 1. 文件 → 新建 → 项目 2. 选择 uni-app 3. 选择模板（默认模板、uni-ui 项目模板等） 4. 填写项目名称和路径 5. 点击创建

方式二：使用 Vue CLI（推荐有经验开发者）

安装 Vue CLI：

# 全局安装 Vue CLI
npm install -g @vue/cli

# 检查版本
vue --version

创建 uni-app 项目：

# 使用官方预设模板
vue create -p dcloudio/uni-preset-vue my-project

# 或使用 degit（更快）
npx degit dcloudio/uni-preset-vue my-project

选择 Vue 版本：

• Vue 2：稳定版本，兼容性好
• Vue 3：最新版本，性能更好

方式三：使用官方 CLI（uni-app CLI）

# 安装 uni-app CLI
npm install -g @dcloudio/uvm
uvm

# 创建项目
npx degit dcloudio/uni-preset-vue my-project

环境要求

Node.js 版本

• 推荐版本：Node.js 14.x 或更高版本
• 最低版本：Node.js 12.x

# 检查 Node.js 版本
node --version

# 检查 npm 版本
npm --version

其他工具

• 微信开发者工具：用于开发微信小程序
• Android Studio：用于开发 Android App
• Xcode：用于开发 iOS App（仅 macOS）

验证安装

创建项目后，验证安装是否成功：

cd my-project
npm install
npm run dev:h5

如果浏览器自动打开并显示 uni-app 欢迎页面，说明安装成功。

常见问题

1. npm 安装慢

使用国内镜像：

npm config set registry https://registry.npmmirror.com

2. Vue CLI 版本问题

确保使用最新版本：

npm update -g @vue/cli

3. HBuilderX 无法创建项目

检查 HBuilderX 版本，确保是最新版本。

下一步

安装完成后，参考 quick-start.md 开始创建第一个项目。

uni-app 项目类型

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

项目类型

1. Vue 2 项目

特点：

• 使用 Vue 2.x
• 使用 Options API
• 稳定成熟，兼容性好

创建方式：

# 使用 Vue CLI
vue create -p dcloudio/uni-preset-vue my-vue2-project

# 选择 Vue 2

适用场景：

• 需要兼容旧版本 Vue 的项目
• 团队熟悉 Vue 2 语法
• 需要稳定性的项目

2. Vue 3 项目

特点：

• 使用 Vue 3.x
• 支持 Composition API 和 Options API
• 性能更好，包体积更小

创建方式：

# 使用 Vue CLI
vue create -p dcloudio/uni-preset-vue my-vue3-project

# 选择 Vue 3

适用场景：

• 新项目推荐使用
• 需要更好的性能
• 需要使用 Composition API

3. TypeScript 项目

特点：

• 使用 TypeScript
• 类型安全
• 更好的代码提示

创建方式：

# 使用 Vue CLI，选择 TypeScript
vue create -p dcloudio/uni-preset-vue my-ts-project

# 选择 TypeScript

项目结构：

my-ts-project/
├── src/
│   ├── pages/
│   ├── components/
│   ├── App.vue
│   └── main.ts          # TypeScript 入口文件
├── tsconfig.json        # TypeScript 配置
└── ...

适用场景：

• 大型项目
• 需要类型安全
• 团队使用 TypeScript

4. uni-ui 项目模板

特点：

• 预装 uni-ui 组件库
• 包含常用组件示例
• 快速开发

创建方式：

在 HBuilderX 中： 1. 文件 → 新建 → 项目 2. 选择 uni-ui 项目模板

适用场景：

• 需要快速开发 UI
• 使用 uni-ui 组件库
• 需要组件示例

5. 空项目模板

特点：

• 最基础的项目结构
• 不包含示例代码
• 完全自定义

创建方式：

# 使用 degit
npx degit dcloudio/uni-preset-vue#empty my-empty-project

适用场景：

• 需要完全自定义
• 从零开始开发
• 学习项目结构

模板选择建议

新手推荐

1. HBuilderX + 默认模板：最简单，适合学习 2. Vue 2 项目：语法简单，文档丰富

有经验开发者推荐

1. Vue 3 + TypeScript：现代化，性能好 2. Vue CLI 创建：更灵活，可定制

企业项目推荐

1. Vue 3 + TypeScript：类型安全，可维护性好 2. uni-ui 模板：快速开发，组件丰富

项目配置

manifest.json 配置

不同项目类型的基本配置相同，但可以根据需要调整：

{
  "name": "my-app",
  "appid": "",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": {
    "usingComponents": true
  },
  "h5": {
    "router": {
      "mode": "hash"
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    }
  }
}

pages.json 配置

所有项目类型的 pages.json 结构相同：

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

迁移指南

Vue 2 升级到 Vue 3

参考官方迁移指南：https://v3-migration.vuejs.org/

主要变化：

• 使用 Composition API
• 生命周期钩子变化
• 响应式 API 变化

JavaScript 迁移到 TypeScript

1. 安装 TypeScript 依赖 2. 添加 tsconfig.json 3. 将 .js 文件改为 .ts 4. 添加类型定义

参考资源

• Vue 2 文档：https://v2.cn.vuejs.org/
• Vue 3 文档：https://cn.vuejs.org/
• TypeScript 文档：https://www.typescriptlang.org/
• uni-app 文档：https://uniapp.dcloud.net.cn/

uni-app 快速开始

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

创建第一个项目

一句话创建（CLI）

# Vue 2 项目
npx degit dcloudio/uni-preset-vue my-uniapp

# Vue 3 + Vite 项目
npx degit dcloudio/uni-preset-vue#vite-ts my-uniapp

使用 HBuilderX

1. 打开 HBuilderX 2. 文件 → 新建 → 项目 3. 选择项目类型：

• uni-app
• 选择模板（默认模板、uni-ui 项目模板等）

4. 填写项目信息：

• 项目名称：my-first-uniapp
• 项目路径：选择保存位置

5. 点击创建

使用 Vue CLI

# 创建项目
vue create -p dcloudio/uni-preset-vue my-first-uniapp

# 进入项目目录
cd my-first-uniapp

# 安装依赖
npm install

# 运行到 H5
npm run dev:h5

# 运行到微信小程序
npm run dev:mp-weixin

使用官方 CLI

# 使用 degit 创建项目
npx degit dcloudio/uni-preset-vue my-first-uniapp

# 进入项目目录
cd my-first-uniapp

# 安装依赖
npm install

# 运行项目
npm run dev:h5

项目结构

创建后的项目结构：

my-first-uniapp/
├── pages/                  # 页面目录
│   ├── index/
│   │   └── index.vue      # 首页
│   └── ...
├── components/             # 组件目录
├── static/                 # 静态资源
├── uni_modules/            # uni_modules 插件
├── App.vue                 # 应用入口
├── main.js                 # 入口文件
├── manifest.json           # 应用配置
├── pages.json              # 页面路由配置
└── uni.scss                # 全局样式

运行项目

H5 平台

npm run dev:h5

浏览器会自动打开 http://localhost:8080

微信小程序

npm run dev:mp-weixin

项目会编译到 dist/dev/mp-weixin，使用微信开发者工具打开该目录。

App 平台

# 使用 HBuilderX 运行
# 或使用 CLI
npm run dev:app-plus

创建第一个页面

1. 在 `pages` 目录下创建页面文件夹：

pages/
└── hello/
    └── hello.vue

2. 创建页面文件 `hello.vue`：

<template>
  <view class="container">
    <text class="title">Hello uni-app!</text>
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app!'
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击了',
        icon: 'success'
      })
    }
  },
  onLoad() {
    console.log('页面加载')
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}
.title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}
</style>

3. 在 `pages.json` 中注册页面：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/hello/hello",
      "style": {
        "navigationBarTitleText": "Hello"
      }
    }
  ]
}

4. 页面跳转：

// 在 index.vue 中
uni.navigateTo({
  url: '/pages/hello/hello'
})

创建第一个组件

1. 在 `components` 目录下创建组件：

components/
└── my-button/
    └── my-button.vue

2. 组件代码：

<template>
  <button class="my-button" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    text: {
      type: String,
      default: '按钮'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.my-button {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
}
</style>

3. 在页面中使用：

<template>
  <view>
    <my-button text="点击我" @click="handleButtonClick"></my-button>
  </view>
</template>

<script>
import MyButton from '@/components/my-button/my-button.vue'

export default {
  components: {
    MyButton
  },
  methods: {
    handleButtonClick() {
      console.log('按钮被点击')
    }
  }
}
</script>

下一步

• 学习 uni-app 组件：参考 uniapp-project
• 学习 uni-app API：参考 uniapp-project
• 配置项目：参考 templates/project-templates.md

uni-app CLI 命令模板

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

项目创建命令

使用 Vue CLI

# 安装 Vue CLI（如果未安装）
npm install -g @vue/cli

# 创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue my-project

# 选择 Vue 版本
# - Vue 2
# - Vue 3

使用 degit（推荐，更快）

# 创建 Vue 2 项目
npx degit dcloudio/uni-preset-vue my-project

# 创建 Vue 3 项目
npx degit dcloudio/uni-preset-vue#vite-ts my-project

# 创建空项目
npx degit dcloudio/uni-preset-vue#empty my-project

使用官方 CLI

# 安装 uni-app CLI
npm install -g @dcloudio/uvm

# 创建项目
npx degit dcloudio/uni-preset-vue my-project

项目运行命令

开发环境

# H5 平台
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# 支付宝小程序
npm run dev:mp-alipay

# 百度小程序
npm run dev:mp-baidu

# 字节跳动小程序
npm run dev:mp-toutiao

# QQ 小程序
npm run dev:mp-qq

# 快手小程序
npm run dev:mp-kuaishou

# App（需要 HBuilderX）
npm run dev:app-plus

# 快应用
npm run dev:quickapp-webview

生产环境

# H5 平台
npm run build:h5

# 微信小程序
npm run build:mp-weixin

# 支付宝小程序
npm run build:mp-alipay

# 百度小程序
npm run build:mp-baidu

# 字节跳动小程序
npm run build:mp-toutiao

# QQ 小程序
npm run build:mp-qq

# 快手小程序
npm run build:mp-kuaishou

# App（需要 HBuilderX）
npm run build:app-plus

# 快应用
npm run build:quickapp-webview

常用命令

安装依赖

# 安装项目依赖
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm
pnpm install

清理构建

# 清理 dist 目录
npm run clean

# 或手动删除
rm -rf dist

代码检查

# ESLint 检查
npm run lint

# 自动修复
npm run lint:fix

一键创建项目脚本

创建 Vue 2 项目

#!/bin/bash
# create-vue2-project.sh

PROJECT_NAME=$1

if [ -z "$PROJECT_NAME" ]; then
  echo "Usage: ./create-vue2-project.sh <project-name>"
  exit 1
fi

echo "Creating Vue 2 uni-app project: $PROJECT_NAME"
npx degit dcloudio/uni-preset-vue $PROJECT_NAME
cd $PROJECT_NAME
npm install
echo "Project created successfully!"
echo "Run 'npm run dev:h5' to start development server"

创建 Vue 3 项目

#!/bin/bash
# create-vue3-project.sh

PROJECT_NAME=$1

if [ -z "$PROJECT_NAME" ]; then
  echo "Usage: ./create-vue3-project.sh <project-name>"
  exit 1
fi

echo "Creating Vue 3 uni-app project: $PROJECT_NAME"
npx degit dcloudio/uni-preset-vue#vite-ts $PROJECT_NAME
cd $PROJECT_NAME
npm install
echo "Project created successfully!"
echo "Run 'npm run dev:h5' to start development server"

快速命令别名

在 ~/.bashrc 或 ~/.zshrc 中添加：

# uni-app 快速创建
alias uniapp-create="npx degit dcloudio/uni-preset-vue"

# uni-app 运行 H5
alias uniapp-dev-h5="npm run dev:h5"

# uni-app 运行微信小程序
alias uniapp-dev-weixin="npm run dev:mp-weixin"

# uni-app 构建 H5
alias uniapp-build-h5="npm run build:h5"

# uni-app 构建微信小程序
alias uniapp-build-weixin="npm run build:mp-weixin"

使用：

# 创建项目
uniapp-create my-project

# 运行 H5
uniapp-dev-h5

# 构建微信小程序
uniapp-build-weixin

项目初始化完整流程

# 1. 创建项目
npx degit dcloudio/uni-preset-vue my-project

# 2. 进入项目目录
cd my-project

# 3. 安装依赖
npm install

# 4. 初始化 Git（可选）
git init
git add .
git commit -m "Initial commit"

# 5. 运行项目
npm run dev:h5

多平台同时运行

# 使用 concurrently 同时运行多个平台
npm install -g concurrently

# 同时运行 H5 和微信小程序
concurrently "npm run dev:h5" "npm run dev:mp-weixin"

自定义构建命令

在 package.json 中添加：

{
  "scripts": {
    "dev": "npm run dev:h5",
    "build": "npm run build:h5",
    "dev:all": "concurrently \"npm run dev:h5\" \"npm run dev:mp-weixin\"",
    "build:all": "npm run build:h5 && npm run build:mp-weixin"
  }
}

常见问题解决

端口被占用

# 修改端口（在 vite.config.js 或 webpack 配置中）
# 或使用环境变量
PORT=3000 npm run dev:h5

清除缓存

# 清除 node_modules 和重新安装
rm -rf node_modules package-lock.json
npm install

# 清除构建缓存
rm -rf dist .cache

参考资源

• Vue CLI 文档：https://cli.vuejs.org/
• npm 文档：https://docs.npmjs.com/
• uni-app CLI 文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

uni-app 项目模板

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

标准项目结构

my-uniapp-project/
├── pages/                  # 页面目录
│   ├── index/
│   │   └── index.vue      # 首页
│   └── ...
├── components/             # 组件目录
│   └── ...
├── static/                 # 静态资源
│   ├── images/
│   ├── icons/
│   └── ...
├── uni_modules/            # uni_modules 插件
├── utils/                  # 工具函数
│   ├── request.js          # 网络请求封装
│   └── ...
├── api/                    # API 接口
│   └── ...
├── store/                  # 状态管理（Vuex/Pinia）
│   └── ...
├── App.vue                 # 应用入口
├── main.js                 # 入口文件
├── manifest.json           # 应用配置
├── pages.json              # 页面路由配置
├── uni.scss                # 全局样式
└── package.json            # 项目依赖

manifest.json 模板

基础配置

{
  "name": "my-uniapp",
  "appid": "",
  "description": "uni-app 项目",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3,
    "splashscreen": {
      "alwaysShowBeforeRender": true,
      "waiting": true,
      "autoclose": true,
      "delay": 0
    },
    "modules": {},
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
        ]
      },
      "ios": {},
      "sdkConfigs": {}
    }
  },
  "quickapp": {},
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },
  "mp-alipay": {
    "usingComponents": true
  },
  "mp-baidu": {
    "usingComponents": true
  },
  "mp-toutiao": {
    "usingComponents": true
  },
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/"
    }
  },
  "vueVersion": "2"
}

Vue 3 配置

{
  "name": "my-uniapp-vue3",
  "appid": "",
  "description": "uni-app Vue 3 项目",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "vueVersion": "3",
  "app-plus": {
    "usingComponents": true,
    "compilerVersion": 3
  },
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/"
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  }
}

pages.json 模板

基础配置

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

带 TabBar 配置

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-current.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "iconPath": "static/tab-category.png",
        "selectedIconPath": "static/tab-category-current.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "static/tab-cart.png",
        "selectedIconPath": "static/tab-cart-current.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/tab-user.png",
        "selectedIconPath": "static/tab-user-current.png",
        "text": "我的"
      }
    ]
  }
}

页面模板

Vue 2 页面模板

<template>
  <view class="container">
    <text class="title">{{ title }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app'
    }
  },
  onLoad(options) {
    console.log('页面加载', options)
  },
  onShow() {
    console.log('页面显示')
  },
  onReady() {
    console.log('页面初次渲染完成')
  },
  onHide() {
    console.log('页面隐藏')
  },
  onUnload() {
    console.log('页面卸载')
  },
  methods: {
    // 方法
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.title {
  font-size: 18px;
  color: #333;
}
</style>

Vue 3 页面模板（Composition API）

<template>
  <view class="container">
    <text class="title">{{ title }}</text>
  </view>
</template>

<script setup>
import { ref, onLoad, onShow, onReady, onHide, onUnload } from '@dcloudio/uni-app'

const title = ref('Hello uni-app')

onLoad((options) => {
  console.log('页面加载', options)
})

onShow(() => {
  console.log('页面显示')
})

onReady(() => {
  console.log('页面初次渲染完成')
})

onHide(() => {
  console.log('页面隐藏')
})

onUnload(() => {
  console.log('页面卸载')
})
</script>

<style scoped>
.container {
  padding: 20px;
}
.title {
  font-size: 18px;
  color: #333;
}
</style>

组件模板

Vue 2 组件模板

<template>
  <view class="my-component">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      default: 'Hello'
    }
  },
  data() {
    return {
      // 数据
    }
  },
  methods: {
    // 方法
  }
}
</script>

<style scoped>
.my-component {
  padding: 10px;
}
</style>

Vue 3 组件模板（Composition API）

<template>
  <view class="my-component">
    <text>{{ message }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  message: {
    type: String,
    default: 'Hello'
  }
})

const emit = defineEmits(['update', 'delete'])

// 响应式数据
const count = ref(0)

// 方法
const handleClick = () => {
  emit('update', 'new value')
}
</script>

<style scoped>
.my-component {
  padding: 10px;
}
</style>

App.vue 模板

Vue 2 App.vue

<template>
  <view id="app">
    <!-- 应用内容 -->
  </view>
</template>

<script>
export default {
  onLaunch: function() {
    console.log('App Launch')
  },
  onShow: function() {
    console.log('App Show')
  },
  onHide: function() {
    console.log('App Hide')
  }
}
</script>

<style>
/* 全局样式 */
</style>

Vue 3 App.vue

<template>
  <view id="app">
    <!-- 应用内容 -->
  </view>
</template>

<script setup>
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'

onLaunch(() => {
  console.log('App Launch')
})

onShow(() => {
  console.log('App Show')
})

onHide(() => {
  console.log('App Hide')
})
</script>

<style>
/* 全局样式 */
</style>

main.js 模板

Vue 2 main.js

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

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

Vue 3 main.js

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

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

使用说明

1. 根据项目类型选择合适的模板 2. 复制模板代码到对应文件 3. 根据项目需求修改配置 4. 添加页面和组件