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