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,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`