refactor: 架构升级

2026-09-12 16:40:40 +08:00 · 2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
@@ -0,0 +1,123 @@
+---
+name: uniapp-project-creator
+description: Provides one-command project creation for uni-app using the official quickstart CLI, including project initialization, configuration, and template selection. Use when the user asks to create a uni-app project with a single command, needs to initialize a new uni-app project, or generate uni-app project structure.
+license: Complete terms in LICENSE.txt
+---
+
+## 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: 部署上线
+完成开发后进行部署和监控。
@@ -0,0 +1,119 @@
+# 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**：
+
+```bash
+# 全局安装 Vue CLI
+npm install -g @vue/cli
+
+# 检查版本
+vue --version
+```
+
+**创建 uni-app 项目**：
+
+```bash
+# 使用官方预设模板
+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）
+
+```bash
+# 安装 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
+
+```bash
+# 检查 Node.js 版本
+node --version
+
+# 检查 npm 版本
+npm --version
+```
+
+### 其他工具
+
+- **微信开发者工具**：用于开发微信小程序
+- **Android Studio**：用于开发 Android App
+- **Xcode**：用于开发 iOS App（仅 macOS）
+
+## 验证安装
+
+创建项目后，验证安装是否成功：
+
+```bash
+cd my-project
+npm install
+npm run dev:h5
+```
+
+如果浏览器自动打开并显示 uni-app 欢迎页面，说明安装成功。
+
+## 常见问题
+
+### 1. npm 安装慢
+
+使用国内镜像：
+
+```bash
+npm config set registry https://registry.npmmirror.com
+```
+
+### 2. Vue CLI 版本问题
+
+确保使用最新版本：
+
+```bash
+npm update -g @vue/cli
+```
+
+### 3. HBuilderX 无法创建项目
+
+检查 HBuilderX 版本，确保是最新版本。
+
+## 下一步
+
+安装完成后，参考 `quick-start.md` 开始创建第一个项目。
@@ -0,0 +1,216 @@
+# uni-app 项目类型
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
+
+## 项目类型
+
+### 1. Vue 2 项目
+
+**特点**：
+- 使用 Vue 2.x
+- 使用 Options API
+- 稳定成熟，兼容性好
+
+**创建方式**：
+
+```bash
+# 使用 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
+- 性能更好，包体积更小
+
+**创建方式**：
+
+```bash
+# 使用 Vue CLI
+vue create -p dcloudio/uni-preset-vue my-vue3-project
+
+# 选择 Vue 3
+```
+
+**适用场景**：
+- 新项目推荐使用
+- 需要更好的性能
+- 需要使用 Composition API
+
+### 3. TypeScript 项目
+
+**特点**：
+- 使用 TypeScript
+- 类型安全
+- 更好的代码提示
+
+**创建方式**：
+
+```bash
+# 使用 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. 空项目模板
+
+**特点**：
+- 最基础的项目结构
+- 不包含示例代码
+- 完全自定义
+
+**创建方式**：
+
+```bash
+# 使用 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 配置
+
+不同项目类型的基本配置相同，但可以根据需要调整：
+
+```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 结构相同：
+
+```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/
@@ -0,0 +1,272 @@
+# uni-app 快速开始
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
+
+## 创建第一个项目
+
+### 一句话创建（CLI）
+
+```bash
+# 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
+
+```bash
+# 创建项目
+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
+
+```bash
+# 使用 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 平台
+
+```bash
+npm run dev:h5
+```
+
+浏览器会自动打开 `http://localhost:8080`
+
+### 微信小程序
+
+```bash
+npm run dev:mp-weixin
+```
+
+项目会编译到 `dist/dev/mp-weixin`，使用微信开发者工具打开该目录。
+
+### App 平台
+
+```bash
+# 使用 HBuilderX 运行
+# 或使用 CLI
+npm run dev:app-plus
+```
+
+## 创建第一个页面
+
+1. **在 `pages` 目录下创建页面文件夹**：
+
+```
+pages/
+└── hello/
+    └── hello.vue
+```
+
+2. **创建页面文件 `hello.vue`**：
+
+```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` 中注册页面**：
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
+      "path": "pages/hello/hello",
+      "style": {
+        "navigationBarTitleText": "Hello"
+      }
+    }
+  ]
+}
+```
+
+4. **页面跳转**：
+
+```javascript
+// 在 index.vue 中
+uni.navigateTo({
+  url: '/pages/hello/hello'
+})
+```
+
+## 创建第一个组件
+
+1. **在 `components` 目录下创建组件**：
+
+```
+components/
+└── my-button/
+    └── my-button.vue
+```
+
+2. **组件代码**：
+
+```vue
+<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. **在页面中使用**：
+
+```vue
+<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`
@@ -0,0 +1,294 @@
+# uni-app CLI 命令模板
+
+## 官方文档
+
+参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
+
+## 项目创建命令
+
+### 使用 Vue CLI
+
+```bash
+# 安装 Vue CLI（如果未安装）
+npm install -g @vue/cli
+
+# 创建 uni-app 项目
+vue create -p dcloudio/uni-preset-vue my-project
+
+# 选择 Vue 版本
+# - Vue 2
+# - Vue 3
+```
+
+### 使用 degit（推荐，更快）
+
+```bash
+# 创建 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
+
+```bash
+# 安装 uni-app CLI
+npm install -g @dcloudio/uvm
+
+# 创建项目
+npx degit dcloudio/uni-preset-vue my-project
+```
+
+## 项目运行命令
+
+### 开发环境
+
+```bash
+# 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
+```
+
+### 生产环境
+
+```bash
+# 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
+```
+
+## 常用命令
+
+### 安装依赖
+
+```bash
+# 安装项目依赖
+npm install
+
+# 或使用 yarn
+yarn install
+
+# 或使用 pnpm
+pnpm install
+```
+
+### 清理构建
+
+```bash
+# 清理 dist 目录
+npm run clean
+
+# 或手动删除
+rm -rf dist
+```
+
+### 代码检查
+
+```bash
+# ESLint 检查
+npm run lint
+
+# 自动修复
+npm run lint:fix
+```
+
+## 一键创建项目脚本
+
+### 创建 Vue 2 项目
+
+```bash
+#!/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 项目
+
+```bash
+#!/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` 中添加：
+
+```bash
+# 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"
+```
+
+使用：
+
+```bash
+# 创建项目
+uniapp-create my-project
+
+# 运行 H5
+uniapp-dev-h5
+
+# 构建微信小程序
+uniapp-build-weixin
+```
+
+## 项目初始化完整流程
+
+```bash
+# 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
+```
+
+## 多平台同时运行
+
+```bash
+# 使用 concurrently 同时运行多个平台
+npm install -g concurrently
+
+# 同时运行 H5 和微信小程序
+concurrently "npm run dev:h5" "npm run dev:mp-weixin"
+```
+
+## 自定义构建命令
+
+在 `package.json` 中添加：
+
+```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"
+  }
+}
+```
+
+## 常见问题解决
+
+### 端口被占用
+
+```bash
+# 修改端口（在 vite.config.js 或 webpack 配置中）
+# 或使用环境变量
+PORT=3000 npm run dev:h5
+```
+
+### 清除缓存
+
+```bash
+# 清除 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
@@ -0,0 +1,501 @@
+# 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 模板
+
+### 基础配置
+
+```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 配置
+
+```json
+{
+  "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 模板
+
+### 基础配置
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}
+```
+
+### 带 TabBar 配置
+
+```json
+{
+  "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 页面模板
+
+```vue
+<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）
+
+```vue
+<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 组件模板
+
+```vue
+<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）
+
+```vue
+<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
+
+```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
+
+```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
+
+```javascript
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  return {
+    app
+  }
+}
+```
+
+### Vue 3 main.js
+
+```javascript
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  return {
+    app
+  }
+}
+```
+
+## 使用说明
+
+1. 根据项目类型选择合适的模板
+2. 复制模板代码到对应文件
+3. 根据项目需求修改配置
+4. 添加页面和组件