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,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
@@ -0,0 +1,158 @@
+---
+name: uniappx-uview-pro
+description: A comprehensive skill for integrating and using uView Pro with UniAppX projects. This skill focuses on UniAppX-specific integration, configuration, and platform-specific considerations when using uView Pro in UniAppX applications. Use this skill whenever the user needs to integrate uView Pro into UniAppX projects, configure UniAppX-specific settings, or handle platform differences.
+license: Complete terms in LICENSE.txt
+---
+
+## When to use this skill
+
+Use this skill whenever the user wants to:
+- Integrate uView Pro into UniAppX projects
+- Configure UniAppX projects to work with uView Pro (pages.json, manifest.json, easycom)
+- Handle platform-specific behaviors when using uView Pro in UniAppX (H5, mini-program, App, nvue)
+- Use UniAppX features (navigation, APIs, lifecycle) with uView Pro components
+- Build cross-platform UniAppX applications with uView Pro components
+- Configure easycom for automatic uView Pro component import in UniAppX
+- Handle navigation and routing with uView Pro in UniAppX
+- Optimize UniAppX projects using uView Pro
+- Deploy uView Pro-based UniAppX applications to multiple platforms
+
+## How to use this skill
+
+This skill is organized to match UniAppX integration patterns and the official UniAppX plugin structure (https://ext.dcloud.net.cn/plugin?id=24633). When working with uView Pro in UniAppX:
+
+1. **Install and setup** uView Pro in UniAppX project:
+   - Load `examples/getting-started/installation.md` for installation in UniAppX
+   - Load `examples/getting-started/project-setup.md` for UniAppX project configuration
+   - Load `examples/getting-started/easycom-config.md` for easycom configuration
+
+2. **Integrate with UniAppX features**:
+   - Load `examples/integration/pages-config.md` for pages.json configuration
+   - Load `examples/integration/manifest-config.md` for manifest.json configuration
+   - Load `examples/integration/navigation.md` for navigation with uView Pro
+   - Load `examples/integration/uniappx-api.md` for using UniAppX APIs with uView Pro
+
+3. **Handle platform-specific behaviors**:
+   - Load `examples/platform-specific/h5.md` for H5 platform considerations
+   - Load `examples/platform-specific/miniprogram.md` for mini-program considerations
+   - Load `examples/platform-specific/app.md` for App platform considerations
+   - Load `examples/platform-specific/nvue.md` for nvue considerations
+
+4. **Advanced integration**:
+   - Load `examples/advanced/custom-theme.md` for theme customization in UniAppX
+   - Load `examples/advanced/build-optimization.md` for build optimization
+   - Load `examples/advanced/multi-platform.md` for multi-platform deployment
+
+5. **Reference the API documentation** when needed:
+   - `api/integration-api.md` - UniAppX and uView Pro integration API
+   - `api/config-api.md` - Configuration API reference
+
+6. **Use templates** for quick start:
+   - `templates/basic-uniappx-project.md` - Basic UniAppX project with uView Pro
+   - `templates/pages-template.md` - Pages configuration template
+   - `templates/manifest-template.md` - Manifest configuration template
+
+**Important Notes**:
+- This skill focuses on UniAppX integration, not uView Pro API documentation
+- UniAppX uses TypeScript (.uts files) and Composition API (setup syntax)
+- Always configure easycom in pages.json for automatic component import
+- Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code
+- Test on all target platforms (H5, mini-programs, App) before deployment
+- Use rpx units for responsive sizing in UniAppX
+
+## Examples and Templates
+
+### Getting Started
+- **Installation**: `examples/getting-started/installation.md` - How to install uView Pro in UniAppX projects
+- **Project Setup**: `examples/getting-started/project-setup.md` - Setting up UniAppX project with uView Pro
+- **Easycom Config**: `examples/getting-started/easycom-config.md` - Configuring easycom for automatic component import
+
+### Integration
+- **Pages Config**: `examples/integration/pages-config.md` - Configuring pages.json with uView Pro
+- **Manifest Config**: `examples/integration/manifest-config.md` - Configuring manifest.json for uView Pro
+- **Navigation**: `examples/integration/navigation.md` - Navigation and routing with uView Pro
+- **UniAppX API**: `examples/integration/uniappx-api.md` - Using UniAppX APIs with uView Pro components
+
+### Platform-Specific
+- **H5**: `examples/platform-specific/h5.md` - H5 platform considerations with uView Pro
+- **Mini-Program**: `examples/platform-specific/miniprogram.md` - Mini-program considerations with uView Pro
+- **App**: `examples/platform-specific/app.md` - App platform considerations with uView Pro
+- **nvue**: `examples/platform-specific/nvue.md` - nvue considerations with uView Pro
+
+### Advanced
+- **Custom Theme**: `examples/advanced/custom-theme.md` - Customizing themes in UniAppX projects
+- **Build Optimization**: `examples/advanced/build-optimization.md` - Optimizing UniAppX builds with uView Pro
+- **Multi-Platform**: `examples/advanced/multi-platform.md` - Multi-platform deployment strategies
+
+### Templates
+- **Basic Project**: `templates/basic-uniappx-project.md` - Basic UniAppX project structure with uView Pro
+- **Pages Template**: `templates/pages-template.md` - pages.json configuration template
+- **Manifest Template**: `templates/manifest-template.md` - manifest.json configuration template
+
+## API Reference
+
+- **Integration API**: `api/integration-api.md` - UniAppX and uView Pro integration API reference
+- **Config API**: `api/config-api.md` - Configuration API reference for UniAppX projects
+
+## Best Practices
+
+1. **Use easycom**: Configure easycom in pages.json for automatic uView Pro component import
+2. **Platform Testing**: Test on all target platforms (H5, mini-programs, App) before deployment
+3. **Use rpx Units**: Use rpx for responsive sizing in UniAppX, px for fixed sizes
+4. **SCSS Support**: Ensure SCSS is properly configured in UniAppX project
+5. **Manifest Configuration**: Properly configure manifest.json for each platform
+6. **Conditional Compilation**: Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code
+7. **Performance**: Optimize for each platform's specific requirements
+8. **TypeScript**: Use TypeScript (.uts files) and proper type definitions
+9. **Composition API**: Use Composition API and setup syntax (recommended for UniAppX)
+10. **Lifecycle Management**: Properly handle UniAppX page lifecycle with uView Pro components
+
+## Resources
+
+- **Official UniAppX Plugin**: https://ext.dcloud.net.cn/plugin?id=24633
+- **UniAppX Documentation**: https://uniapp.dcloud.net.cn/uni-app-x/
+- **UniAppX API Reference**: https://uniapp.dcloud.net.cn/uni-app-x/api/
+
+## Keywords
+
+uniappx, uniapp-x, uview-pro, uview pro, uniappx integration, uniappx configuration, easycom, pages.json, manifest.json, uni-app-x, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异, TypeScript, Composition API, setup 语法, .uts 文件, UniAppX 组件, 跨平台组件, 小程序组件, App 组件
+
+## 能力边界
+
+### ✅ 适用场景
+- 当你需要使用此技能对应的技术栈时
+- 当项目需要遵循最佳实践时
+- 当需要快速上手或深入理解核心概念时
+
+### ⚠️ 需要注意
+- 复杂业务逻辑需要结合具体场景调整
+- 性能优化需要根据实际数据量评估
+
+### ❌ 不适用场景
+- 不相关的技术栈或框架
+- 需要完全自定义的特殊场景
+
+## 常见陷阱 (Gotchas)
+
+1. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
+2. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
+3. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
+4. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
+5. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题
+
+## 使用流程
+
+### Step 1: 环境准备
+确保开发环境已安装必要的依赖和工具。
+
+### Step 2: 配置初始化
+根据项目需求进行基础配置。
+
+### Step 3: 核心功能使用
+按照示例代码实现核心功能。
+
+### Step 4: 测试验证
+运行测试确保功能正常。
+
+### Step 5: 部署上线
+完成开发后进行部署和监控。
@@ -0,0 +1,114 @@
+# Configuration API | 配置 API
+
+## Instructions
+
+This example provides configuration API reference for UniAppX projects with uView Pro.
+
+### Key Concepts
+
+- Project configuration
+- Build configuration
+- Platform configuration
+- Component configuration
+
+### Project Configuration
+
+```json
+// project.config.json (if exists)
+{
+  "miniprogramRoot": "string",
+  "projectname": "string",
+  "description": "string",
+  "appid": "string"
+}
+```
+
+### Build Configuration
+
+```json
+// manifest.json - Build settings
+{
+  "h5": {
+    "devServer": {
+      "port": number,
+      "disableHostCheck": boolean
+    },
+    "router": {
+      "mode": "hash" | "history",
+      "base": "string"
+    },
+    "optimization": {
+      "treeShaking": {
+        "enable": boolean
+      }
+    }
+  },
+  "mp-weixin": {
+    "setting": {
+      "es6": boolean,
+      "enhance": boolean,
+      "postcss": boolean,
+      "minified": boolean
+    }
+  }
+}
+```
+
+### Platform Configuration
+
+```json
+// manifest.json - Platform settings
+{
+  "h5": {
+    "router": {
+      "mode": "hash" | "history"
+    }
+  },
+  "mp-weixin": {
+    "appid": "string",
+    "setting": {
+      "urlCheck": boolean
+    }
+  },
+  "app-plus": {
+    "distribute": {
+      "android": {
+        "permissions": ["string"]
+      },
+      "ios": {}
+    }
+  }
+}
+```
+
+### Component Configuration
+
+```vue
+<!-- Component usage with configuration -->
+<template>
+  <u-button 
+    type="primary"
+    :custom-style="buttonStyle"
+    :disabled="isDisabled"
+  >
+    按钮
+  </u-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const buttonStyle = ref({
+  borderRadius: '20rpx'
+})
+const isDisabled = ref(false)
+</script>
+```
+
+### Key Points
+
+- Configure project settings in manifest.json
+- Set up build options for each platform
+- Configure platform-specific settings
+- Use component props for configuration
+- Test configuration on all platforms
@@ -0,0 +1,168 @@
+# Integration API | 集成 API
+
+## Instructions
+
+This example provides API reference for UniAppX and uView Pro integration.
+
+### Key Concepts
+
+- Easycom configuration API
+- Pages.json API
+- Manifest.json API
+- UniAppX API integration
+
+### Easycom Configuration API
+
+```json
+{
+  "easycom": {
+    "autoscan": boolean,
+    "custom": {
+      "^u-(.*)": "string"
+    }
+  }
+}
+```
+
+### Pages.json API
+
+```json
+{
+  "pages": [
+    {
+      "path": "string",
+      "style": {
+        "navigationBarTitleText": "string",
+        "navigationStyle": "default" | "custom",
+        "navigationBarBackgroundColor": "string",
+        "navigationBarTextStyle": "black" | "white",
+        "enablePullDownRefresh": boolean
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black" | "white",
+    "navigationBarTitleText": "string",
+    "navigationBarBackgroundColor": "string",
+    "backgroundColor": "string"
+  }
+}
+```
+
+### Manifest.json API
+
+```json
+{
+  "name": "string",
+  "appid": "string",
+  "versionName": "string",
+  "versionCode": "string",
+  "transformPx": boolean,
+  "app-plus": {
+    "usingComponents": boolean,
+    "nvueStyleCompiler": "uni-app" | "weex"
+  },
+  "h5": {
+    "router": {
+      "mode": "hash" | "history",
+      "base": "string"
+    }
+  },
+  "mp-weixin": {
+    "appid": "string",
+    "setting": {
+      "urlCheck": boolean,
+      "es6": boolean,
+      "enhance": boolean,
+      "postcss": boolean,
+      "minified": boolean
+    },
+    "usingComponents": boolean
+  }
+}
+```
+
+### UniAppX API Integration
+
+#### Navigation API
+
+```typescript
+// Page navigation
+uni.navigateTo({
+  url: string,
+  success?: function,
+  fail?: function,
+  complete?: function
+})
+
+// Page back
+uni.navigateBack({
+  delta?: number
+})
+```
+
+#### Network Request API
+
+```typescript
+uni.request({
+  url: string,
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE',
+  data?: object,
+  header?: object,
+  success?: function,
+  fail?: function,
+  complete?: function
+})
+```
+
+#### Storage API
+
+```typescript
+// Set storage
+uni.setStorage({
+  key: string,
+  data: any,
+  success?: function,
+  fail?: function
+})
+
+// Get storage
+uni.getStorage({
+  key: string,
+  success?: function,
+  fail?: function
+})
+```
+
+### Conditional Compilation API
+
+```typescript
+// #ifdef 平台名称
+// 平台特定代码
+// #endif
+
+// #ifndef 平台名称
+// 非平台特定代码
+// #endif
+
+// #ifdef H5
+// H5 平台代码
+// #endif
+
+// #ifdef MP-WEIXIN
+// 微信小程序代码
+// #endif
+
+// #ifdef APP-PLUS
+// App 平台代码
+// #endif
+```
+
+### Key Points
+
+- Configure easycom for automatic component import
+- Use pages.json for page routing configuration
+- Configure manifest.json for each platform
+- Use UniAppX APIs with uView Pro components
+- Use conditional compilation for platform-specific code
+- Use TypeScript for type safety
@@ -0,0 +1,57 @@
+# Build Optimization | 构建优化
+
+## Instructions
+
+This example demonstrates how to optimize UniAppX builds with uView Pro.
+
+### Key Concepts
+
+- Code splitting
+- Tree shaking
+- Component lazy loading
+- Build configuration
+
+### Example: Component Lazy Loading
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view>
+    <u-button @click="showModal = true">打开弹窗</u-button>
+    <u-modal v-if="showModal" v-model="showModal">
+      <view>内容</view>
+    </u-modal>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const showModal = ref(false)
+</script>
+```
+
+### Example: Conditional Component Loading
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef H5 -->
+    <u-upload :file-list="fileList" />
+    <!-- #endif -->
+    
+    <!-- #ifdef MP-WEIXIN -->
+    <u-upload :file-list="fileList" />
+    <!-- #endif -->
+  </view>
+</template>
+```
+
+### Key Points
+
+- Use conditional compilation to exclude unused components
+- Lazy load heavy components
+- Optimize images and assets
+- Use tree shaking for unused code
+- Configure build options in manifest.json
+- Test build size on each platform
@@ -0,0 +1,55 @@
+# Custom Theme | 自定义主题
+
+## Instructions
+
+This example demonstrates how to customize uView Pro theme in UniAppX projects.
+
+### Key Concepts
+
+- Theme variable customization
+- SCSS variable override
+- Global theme configuration
+- Component-specific styling
+
+### Example: Custom Theme Variables
+
+```scss
+/* uni.scss */
+// Override uView Pro theme variables
+$u-primary: #409EFF;
+$u-success: #67C23A;
+$u-warning: #E6A23C;
+$u-error: #F56C6C;
+$u-info: #909399;
+
+// Import uView Pro theme
+@import "uview-pro/theme.scss";
+```
+
+### Example: Component-Specific Styling
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view>
+    <u-button type="primary" custom-style="background: #ff0000;">
+      自定义按钮
+    </u-button>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+// Component-specific styles
+:deep(.u-button) {
+  border-radius: 20rpx;
+}
+</style>
+```
+
+### Key Points
+
+- Override theme variables in uni.scss
+- Use custom-style prop for inline styles
+- Use :deep() for component style override
+- Test theme changes on all platforms
+- Maintain consistency across components
@@ -0,0 +1,82 @@
+# Multi-Platform Deployment | 多平台部署
+
+## Instructions
+
+This example demonstrates multi-platform deployment strategies for UniAppX projects with uView Pro.
+
+### Key Concepts
+
+- Platform-specific builds
+- Conditional compilation
+- Platform testing
+- Deployment configuration
+
+### Example: Platform-Specific Code
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view>
+    <!-- #ifdef H5 -->
+    <u-button type="primary">H5 按钮</u-button>
+    <!-- #endif -->
+    
+    <!-- #ifdef MP-WEIXIN -->
+    <u-button type="primary">微信小程序按钮</u-button>
+    <!-- #endif -->
+    
+    <!-- #ifdef APP-PLUS -->
+    <u-button type="primary">App 按钮</u-button>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+// #ifdef H5
+// H5 specific code
+const h5Function = () => {
+  console.log('H5 only')
+}
+// #endif
+
+// #ifdef MP-WEIXIN
+// WeChat mini-program specific code
+const mpFunction = () => {
+  console.log('MP only')
+}
+// #endif
+</script>
+```
+
+### Example: Platform Testing Checklist
+
+```markdown
+## Testing Checklist
+
+### H5
+- [ ] Test in Chrome
+- [ ] Test in Safari
+- [ ] Test responsive design
+- [ ] Test browser compatibility
+
+### Mini-Program
+- [ ] Test in WeChat DevTools
+- [ ] Test on actual device
+- [ ] Check code size
+- [ ] Test performance
+
+### App
+- [ ] Test on Android device
+- [ ] Test on iOS device
+- [ ] Test native features
+- [ ] Test performance
+```
+
+### Key Points
+
+- Use conditional compilation for platform-specific code
+- Test on all target platforms
+- Configure platform-specific settings in manifest.json
+- Optimize for each platform's requirements
+- Handle platform differences gracefully
+- Document platform-specific behaviors
@@ -0,0 +1,183 @@
+# Easycom Configuration | Easycom 配置
+
+## Instructions
+
+This example demonstrates how to configure easycom in UniAppX for automatic uView Pro component import.
+
+### Key Concepts
+
+- Easycom automatic component import
+- Component path configuration
+- Autoscan configuration
+- Custom component rules
+- TypeScript type inference
+
+### 基本配置
+
+在 `pages.json` 中配置 easycom：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  }
+}
+```
+
+### 配置说明
+
+- `autoscan: true`：开启自动扫描
+- `custom`：自定义规则
+- `^u-(.*)`：匹配以 `u-` 开头的组件名
+- `uview-pro/components/u-$1/u-$1.vue`：组件路径，`$1` 是匹配的内容
+
+### 使用示例
+
+配置后，可以直接使用组件，无需引入：
+
+```vue
+<template>
+  <view>
+    <!-- 直接使用，无需 import -->
+    <u-button type="primary">按钮</u-button>
+    <u-input v-model="value" placeholder="请输入"></u-input>
+    <u-form :model="form">
+      <u-form-item label="用户名">
+        <u-input v-model="form.username"></u-input>
+      </u-form-item>
+    </u-form>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const form = ref({
+  username: ''
+})
+</script>
+```
+
+### 完整 pages.json 示例
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  },
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UniAppX",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#f5f5f5"
+  }
+}
+```
+
+### 自定义组件路径
+
+如果 uView Pro 安装在不同位置，需要调整路径：
+
+#### npm 安装
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "node_modules/uview-pro/components/u-$1/u-$1.vue"
+    }
+  }
+}
+```
+
+#### uni_modules 安装
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uni_modules/uview-pro/components/u-$1/u-$1.vue"
+    }
+  }
+}
+```
+
+### 禁用 easycom
+
+如果不想使用 easycom，可以手动引入：
+
+```vue
+<template>
+  <view>
+    <u-button>按钮</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import uButton from 'uview-pro/components/u-button/u-button.vue'
+</script>
+```
+
+### TypeScript 类型支持
+
+使用 easycom 时，TypeScript 类型会自动推断：
+
+```vue
+<template>
+  <view>
+    <u-button type="primary" @click="handleClick">按钮</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+  console.log('按钮被点击')
+}
+</script>
+```
+
+### 验证配置
+
+创建测试页面验证 easycom 是否生效：
+
+```vue
+<template>
+  <view class="container">
+    <u-button type="primary" @click="test">测试 Easycom</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+const test = () => {
+  console.log('Easycom 配置成功！')
+}
+</script>
+```
+
+如果按钮正常显示且无报错，说明 easycom 配置成功。
+
+## 注意事项
+
+1. **路径必须正确**：确保组件路径与实际安装位置一致
+2. **组件名称**：uView Pro 组件都以 `u-` 开头
+3. **重启项目**：修改 easycom 配置后需要重启项目
+4. **优先级**：easycom 优先级高于手动引入
+5. **性能**：easycom 不会影响性能，按需加载组件
+6. **TypeScript**：TypeScript 类型会自动推断，无需额外配置
@@ -0,0 +1,243 @@
+# Installation | 安装
+
+## Instructions
+
+This example demonstrates how to install uView Pro in UniAppX projects via DCloud plugin marketplace (plugin ID: 24633).
+
+### Key Concepts
+
+- Installing uView Pro via DCloud plugin marketplace
+- Installing via npm
+- UniAppX project structure setup
+- TypeScript (.uts) file configuration
+- Composition API and setup syntax
+- SCSS style configuration
+
+### Example: Install via DCloud Plugin Marketplace (Recommended)
+
+**Official Plugin**: https://ext.dcloud.net.cn/plugin?id=24633
+
+```bash
+# 1. Open HBuilderX
+# 2. Open UniAppX project
+# 3. Go to Tools -> Plugin Installation
+# 4. Search for "uView Pro" or enter plugin ID: 24633
+# 5. Click "Import Plugin"
+# 6. Plugin will be installed to uni_modules/uview-pro directory
+```
+
+**Project Structure After Installation:**
+```
+project-root/
+├── uni_modules/
+│   └── uview-pro/
+│       ├── components/
+│       ├── index.scss
+│       └── theme.scss
+├── pages/
+├── App.vue
+├── main.uts
+├── pages.json
+└── manifest.json
+```
+
+### Example: Install via npm
+
+```bash
+# Install uView Pro package
+npm install uview-pro
+
+# Or using yarn
+yarn add uview-pro
+```
+
+**Import in main.uts:**
+```typescript
+// main.uts
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import uViewPro from 'uview-pro'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(uViewPro)
+  return {
+    app
+  }
+}
+```
+
+### Example: Manual Installation
+
+```bash
+# 1. Download from DCloud plugin marketplace
+# 2. Extract to project root
+# 3. Ensure uni_modules/uview-pro/ exists
+```
+
+## UniAppX 项目配置
+
+### 1. 在 main.uts 中引入
+
+```typescript
+// main.uts
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import uViewPro from 'uview-pro'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(uViewPro)
+  return {
+    app
+  }
+}
+```
+
+### 2. 在 App.vue 中引入样式
+
+```vue
+<!-- App.vue -->
+<style lang="scss">
+/* 引入 uView Pro 基础样式 */
+@import "uview-pro/index.scss";
+</style>
+```
+
+### 3. 在 uni.scss 中引入主题变量（可选）
+
+```scss
+/* uni.scss */
+@import "uview-pro/theme.scss";
+```
+
+### 4. 配置 easycom（重要）
+
+在 `pages.json` 中配置 easycom，实现组件自动引入：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  },
+  "pages": [
+    // ... 页面配置
+  ]
+}
+```
+
+### 5. 验证安装
+
+创建测试页面 `pages/index/index.vue`：
+
+```vue
+<template>
+  <view class="container">
+    <u-button type="primary">uView Pro 按钮</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+// UniAppX 使用 setup 语法
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 20rpx;
+}
+</style>
+```
+
+如果按钮正常显示，说明安装成功。
+
+## 目录结构
+
+安装后的 UniAppX 项目结构：
+
+```
+uniappx-project/
+├── uni_modules/
+│   └── uview-pro/          # uView Pro 插件
+│       ├── components/    # 组件目录
+│       ├── index.scss     # 基础样式
+│       └── theme.scss     # 主题变量
+├── pages/                 # 页面目录
+├── static/                # 静态资源
+├── App.vue                # 应用入口
+├── main.uts               # 主入口文件（UniAppX 使用 .uts）
+├── pages.json             # 页面配置
+├── manifest.json          # 应用配置
+└── uni.scss               # 全局样式变量
+```
+
+## UniAppX 特性
+
+### TypeScript 支持
+
+UniAppX 使用 TypeScript，需要类型定义：
+
+```typescript
+// main.uts
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import uViewPro from 'uview-pro'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(uViewPro)
+  return {
+    app
+  }
+}
+```
+
+### Setup 语法
+
+UniAppX 推荐使用 Composition API 和 setup 语法：
+
+```vue
+<template>
+  <view>
+    <u-button type="primary" @click="handleClick">按钮</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+  console.log('按钮被点击')
+}
+</script>
+```
+
+### Example: Verify Installation
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view>
+    <u-button type="primary">uView Pro Button</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+// UniAppX uses setup syntax
+</script>
+
+<style lang="scss" scoped>
+// SCSS is required
+</style>
+```
+
+### Key Points
+
+- Install via DCloud plugin marketplace for easiest integration
+- Plugin ID: 24633
+- Component will be in `uni_modules/uview-pro/components/`
+- Configure easycom in pages.json for automatic import
+- Register uView Pro in main.uts (TypeScript)
+- Import SCSS styles in App.vue
+- Use setup syntax and Composition API (recommended for UniAppX)
+- Test installation by using components in a page
@@ -0,0 +1,263 @@
+# Project Setup | 项目设置
+
+## Instructions
+
+This example demonstrates how to set up a UniAppX project to work with uView Pro.
+
+### Key Concepts
+
+- UniAppX project structure
+- TypeScript (.uts) file configuration
+- Composition API and setup syntax
+- SCSS style configuration
+- Component directory organization
+
+### 项目结构
+
+标准的 UniAppX + uView Pro 项目结构：
+
+```
+uniappx-project/
+├── uni_modules/
+│   └── uview-pro/          # uView Pro 插件
+├── pages/                 # 页面目录
+│   ├── index/
+│   │   └── index.vue
+│   └── ...
+├── components/            # 自定义组件
+├── static/               # 静态资源
+├── utils/                # 工具函数
+├── App.vue               # 应用入口
+├── main.uts              # 主入口文件（UniAppX 使用 .uts）
+├── pages.json            # 页面配置
+├── manifest.json         # 应用配置
+└── uni.scss              # 全局样式变量
+```
+
+### App.vue 配置
+
+```vue
+<template>
+  <view id="app">
+    <!-- 应用根组件 -->
+  </view>
+</template>
+
+<script setup lang="ts">
+// UniAppX 使用 setup 语法
+</script>
+
+<style lang="scss">
+/* 引入 uView Pro 基础样式 */
+@import "uview-pro/index.scss";
+
+/* 全局样式 */
+page {
+  background-color: #f5f5f5;
+}
+</style>
+```
+
+### main.uts 配置
+
+UniAppX 使用 TypeScript，主入口文件为 `main.uts`：
+
+```typescript
+// main.uts
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import uViewPro from 'uview-pro'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(uViewPro)
+  return {
+    app
+  }
+}
+```
+
+### pages.json 配置
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  },
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "default",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UniAppX",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#f5f5f5"
+  },
+  "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": "首页"
+      }
+    ]
+  }
+}
+```
+
+### uni.scss 配置
+
+```scss
+/* uni.scss */
+/* 引入 uView Pro 主题变量 */
+@import "uview-pro/theme.scss";
+
+/* 自定义全局变量 */
+$uni-color-primary: #409EFF;
+$uni-bg-color: #f5f5f5;
+```
+
+### manifest.json 配置要点
+
+```json
+{
+  "name": "uniappx-uview-pro-project",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "app-plus": {
+    "usingComponents": true
+  },
+  "h5": {
+    "router": {
+      "mode": "hash"
+    }
+  },
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  }
+}
+```
+
+## 开发环境配置
+
+### HBuilderX 配置
+
+1. **启用 TypeScript 支持**：
+   - 创建 UniAppX 项目时自动启用 TypeScript
+   - 确保 HBuilderX 版本支持 UniAppX
+
+2. **启用 SCSS 支持**：
+   - 创建项目时选择支持 SCSS
+   - 或在项目设置中启用 SCSS 编译
+
+### TypeScript 配置
+
+UniAppX 项目自动包含 TypeScript 配置，无需额外配置。
+
+### 条件编译
+
+使用条件编译处理平台差异：
+
+```vue
+<template>
+  <view>
+    <!-- #ifdef H5 -->
+    <view>H5 平台特有内容</view>
+    <!-- #endif -->
+    
+    <!-- #ifdef MP-WEIXIN -->
+    <view>微信小程序特有内容</view>
+    <!-- #endif -->
+    
+    <!-- #ifdef APP-PLUS -->
+    <view>App 平台特有内容</view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+// #ifdef H5
+// H5 平台特定代码
+// #endif
+
+// #ifdef MP-WEIXIN
+// 微信小程序特定代码
+// #endif
+
+// #ifdef APP-PLUS
+// App 平台特定代码
+// #endif
+</script>
+```
+
+## 验证配置
+
+创建测试页面验证配置是否正确：
+
+```vue
+<template>
+  <view class="container">
+    <u-navbar title="测试页面"></u-navbar>
+    <view class="content">
+      <u-button type="primary" @click="test">测试按钮</u-button>
+      <u-toast ref="uToast"></u-toast>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const uToast = ref()
+
+const test = () => {
+  uToast.value?.show({
+    message: '配置成功！'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.content {
+  padding: 20rpx;
+}
+</style>
+```
+
+## 注意事项
+
+1. **TypeScript 支持**：UniAppX 使用 TypeScript，确保类型正确
+2. **Setup 语法**：推荐使用 Composition API 和 setup 语法
+3. **easycom 必须配置**：否则需要手动引入每个组件
+4. **SCSS 必须支持**：uView Pro 依赖 SCSS
+5. **路径正确性**：确保引入路径正确
+6. **版本兼容**：确保 UniAppX 和 uView Pro 版本兼容
+7. **平台测试**：在不同平台测试功能
@@ -0,0 +1,227 @@
+# Manifest Configuration | Manifest 配置
+
+## Instructions
+
+This example demonstrates how to configure manifest.json for uView Pro in UniAppX projects across different platforms.
+
+### Key Concepts
+
+- Platform-specific manifest configuration
+- H5 configuration
+- Mini-program configuration
+- App configuration
+- Component support configuration
+
+### 基本配置
+
+```json
+{
+  "name": "uniappx-uview-pro-project",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "app-plus": {
+    "usingComponents": true
+  },
+  "h5": {
+    "router": {
+      "mode": "hash"
+    }
+  },
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  }
+}
+```
+
+### H5 平台配置
+
+```json
+{
+  "h5": {
+    "router": {
+      "mode": "hash",
+      "base": "/"
+    },
+    "devServer": {
+      "https": false,
+      "port": 8080
+    },
+    "publicPath": "/",
+    "template": "index.html"
+  }
+}
+```
+
+### 微信小程序配置
+
+```json
+{
+  "mp-weixin": {
+    "appid": "your-appid",
+    "setting": {
+      "urlCheck": false,
+      "es6": true,
+      "enhance": true,
+      "postcss": true,
+      "minified": true
+    },
+    "usingComponents": true,
+    "permission": {
+      "scope.userLocation": {
+        "desc": "你的位置信息将用于小程序位置接口的效果展示"
+      }
+    }
+  }
+}
+```
+
+### App 平台配置
+
+```json
+{
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "modules": {},
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
+        ]
+      },
+      "ios": {},
+      "sdkConfigs": {}
+    }
+  }
+}
+```
+
+### 支付宝小程序配置
+
+```json
+{
+  "mp-alipay": {
+    "usingComponents": true
+  }
+}
+```
+
+### 百度小程序配置
+
+```json
+{
+  "mp-baidu": {
+    "usingComponents": true
+  }
+}
+```
+
+### 字节跳动小程序配置
+
+```json
+{
+  "mp-toutiao": {
+    "usingComponents": true
+  }
+}
+```
+
+### QQ 小程序配置
+
+```json
+{
+  "mp-qq": {
+    "usingComponents": true
+  }
+}
+```
+
+### 完整配置示例
+
+```json
+{
+  "name": "uniappx-uview-pro-project",
+  "appid": "",
+  "description": "UniAppX + uView Pro 项目",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app"
+  },
+  "h5": {
+    "router": {
+      "mode": "hash"
+    },
+    "devServer": {
+      "port": 8080
+    }
+  },
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false,
+      "es6": true,
+      "enhance": true,
+      "postcss": true,
+      "minified": true
+    },
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "mp-qq": {
+    "usingComponents": true
+  },
+  "quickapp": {},
+  "vueVersion": "3"
+}
+```
+
+## 关键配置说明
+
+### usingComponents
+
+所有平台都需要设置 `"usingComponents": true`，以支持组件使用。
+
+### transformPx
+
+建议设置为 `false`，使用 rpx 单位进行响应式布局。
+
+### vueVersion
+
+UniAppX 使用 Vue 3，设置为 `"3"`。
+
+### TypeScript 支持
+
+UniAppX 原生支持 TypeScript，无需额外配置。
+
+## 注意事项
+
+1. **usingComponents**：必须设置为 true
+2. **平台差异**：不同平台有不同的配置项
+3. **AppID**：小程序平台需要配置对应的 AppID
+4. **权限配置**：根据功能需求配置相应权限
+5. **版本号**：正确配置版本号和版本名称
+6. **Vue 版本**：UniAppX 使用 Vue 3
@@ -0,0 +1,292 @@
+# Navigation | 导航
+
+## Instructions
+
+This example demonstrates how to handle navigation and routing with uView Pro in UniAppX.
+
+### Key Concepts
+
+- Page navigation with uView Pro components
+- URL parameters passing
+- Navigation lifecycle
+- Custom navigation bar with uView Pro
+- Tab bar navigation
+
+### 使用 UniAppX 导航 API
+
+#### 页面跳转
+
+```typescript
+// 保留当前页面，跳转到应用内的某个页面
+uni.navigateTo({
+  url: '/pages/detail/detail?id=1'
+})
+
+// 关闭当前页面，跳转到应用内的某个页面
+uni.redirectTo({
+  url: '/pages/login/login'
+})
+
+// 跳转到 tabBar 页面
+uni.switchTab({
+  url: '/pages/index/index'
+})
+
+// 返回上一页面
+uni.navigateBack({
+  delta: 1
+})
+```
+
+#### 使用 uView Pro 按钮进行跳转
+
+```vue
+<template>
+  <view>
+    <u-button 
+      type="primary" 
+      @click="goToDetail"
+    >
+      跳转到详情页
+    </u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+const goToDetail = () => {
+  uni.navigateTo({
+    url: '/pages/detail/detail?id=1'
+  })
+}
+</script>
+```
+
+### 使用 uView Pro 导航栏
+
+#### 自定义导航栏
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    }
+  ]
+}
+```
+
+页面中使用 uView Pro 导航栏：
+
+```vue
+<template>
+  <view>
+    <u-navbar 
+      title="首页" 
+      :border="true"
+      :back-icon-color="'#ffffff'"
+      :background="{
+        background: 'linear-gradient(45deg, #409EFF, #67C23A)'
+      }"
+    >
+      <template #right>
+        <u-icon name="more-dot-fill" color="#ffffff" @click="handleRight"></u-icon>
+      </template>
+    </u-navbar>
+    
+    <!-- 页面内容 -->
+  </view>
+</template>
+
+<script setup lang="ts">
+const handleRight = () => {
+  // 右侧按钮点击事件
+}
+</script>
+```
+
+### 使用 uView Pro 返回顶部
+
+```vue
+<template>
+  <view class="container">
+    <!-- 长列表内容 -->
+    <u-back-top :scroll-top="scrollTop"></u-back-top>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const scrollTop = ref(0)
+
+const onPageScroll = (e: PageScrollOption) => {
+  scrollTop.value = e.scrollTop
+}
+</script>
+```
+
+### TabBar 导航
+
+#### 使用原生 TabBar
+
+```json
+{
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#409EFF",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/user/user",
+        "text": "我的"
+      }
+    ]
+  }
+}
+```
+
+#### 使用 uView Pro TabBar 组件
+
+```vue
+<template>
+  <view>
+    <u-tabbar 
+      :list="tabbarList" 
+      :mid-button="true"
+      @change="tabbarChange"
+    ></u-tabbar>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tabbarList = ref([
+  {
+    iconPath: "static/tab-home.png",
+    selectedIconPath: "static/tab-home-current.png",
+    text: "首页",
+    pagePath: "/pages/index/index"
+  },
+  {
+    iconPath: "static/tab-user.png",
+    selectedIconPath: "static/tab-user-current.png",
+    text: "我的",
+    pagePath: "/pages/user/user"
+  }
+])
+
+const tabbarChange = (index: number) => {
+  const pagePath = tabbarList.value[index].pagePath
+  uni.switchTab({
+    url: pagePath
+  })
+}
+</script>
+```
+
+### 页面传参
+
+#### 传递参数
+
+```typescript
+// 跳转并传递参数
+uni.navigateTo({
+  url: '/pages/detail/detail?id=1&name=test'
+})
+```
+
+#### 接收参数
+
+```vue
+<template>
+  <view>
+    <text>ID: {{ id }}</text>
+    <text>Name: {{ name }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
+const id = ref('')
+const name = ref('')
+
+onLoad((options) => {
+  id.value = options.id as string
+  name.value = options.name as string
+})
+</script>
+```
+
+### 使用 uView Pro 搜索框导航
+
+```vue
+<template>
+  <view>
+    <u-search 
+      placeholder="搜索内容" 
+      v-model="keyword"
+      @search="handleSearch"
+      @custom="handleCustom"
+    ></u-search>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const keyword = ref('')
+
+const handleSearch = () => {
+  uni.navigateTo({
+    url: `/pages/search/search?keyword=${keyword.value}`
+  })
+}
+
+const handleCustom = () => {
+  // 自定义操作
+}
+</script>
+```
+
+### 导航栏返回按钮自定义
+
+```vue
+<template>
+  <view>
+    <u-navbar 
+      title="详情页"
+      :back-icon-name="'arrow-left'"
+      @leftClick="handleBack"
+    ></u-navbar>
+  </view>
+</template>
+
+<script setup lang="ts">
+const handleBack = () => {
+  // 自定义返回逻辑
+  uni.navigateBack({
+    delta: 1
+  })
+}
+</script>
+```
+
+## 注意事项
+
+1. **路径格式**：路径必须以 `/` 开头
+2. **TabBar 跳转**：使用 `uni.switchTab` 跳转到 tabBar 页面
+3. **参数传递**：URL 参数需要编码
+4. **页面栈**：注意页面栈限制（最多 10 层）
+5. **返回按钮**：自定义导航栏需要自己处理返回逻辑
+6. **TypeScript**：使用 TypeScript 类型定义，确保类型安全
@@ -0,0 +1,273 @@
+# Pages Configuration | Pages 配置
+
+## Instructions
+
+This example demonstrates how to configure pages.json for uView Pro in UniAppX projects.
+
+### Key Concepts
+
+- Pages routing configuration
+- Easycom component configuration
+- Navigation bar configuration
+- Tab bar configuration with uView Pro
+- Custom navigation with uView Pro components
+
+### 基本配置
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  },
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UniAppX",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#f5f5f5"
+  }
+}
+```
+
+### 使用 uView Pro 导航栏
+
+#### 方式一：使用 uView Pro 导航栏组件
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "首页"
+      }
+    }
+  ]
+}
+```
+
+页面中使用 uView Pro 导航栏：
+
+```vue
+<template>
+  <view>
+    <u-navbar title="首页" :border="true"></u-navbar>
+    <!-- 页面内容 -->
+  </view>
+</template>
+
+<script setup lang="ts">
+// UniAppX 使用 setup 语法
+</script>
+```
+
+#### 方式二：使用原生导航栏
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationBarBackgroundColor": "#409EFF",
+        "navigationBarTextStyle": "white"
+      }
+    }
+  ]
+}
+```
+
+### TabBar 配置
+
+```json
+{
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#409EFF",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "static/tab-home.png",
+        "selectedIconPath": "static/tab-home-current.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/user/user",
+        "iconPath": "static/tab-user.png",
+        "selectedIconPath": "static/tab-user-current.png",
+        "text": "我的"
+      }
+    ]
+  }
+}
+```
+
+### 使用 uView Pro TabBar 组件
+
+如果使用 uView Pro 的 TabBar 组件，可以禁用原生 TabBar：
+
+```json
+{
+  "tabBar": {
+    "custom": true,
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      }
+    ]
+  }
+}
+```
+
+### 页面样式配置
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationBarBackgroundColor": "#409EFF",
+        "navigationBarTextStyle": "white",
+        "backgroundColor": "#f5f5f5",
+        "enablePullDownRefresh": true,
+        "onReachBottomDistance": 50
+      }
+    }
+  ]
+}
+```
+
+### 下拉刷新配置
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/list/list",
+      "style": {
+        "navigationBarTitleText": "列表",
+        "enablePullDownRefresh": true
+      }
+    }
+  ]
+}
+```
+
+页面中使用 uView Pro 下拉刷新：
+
+```vue
+<template>
+  <view>
+    <u-list @refresh="onRefresh" @loadmore="onLoadMore">
+      <!-- 列表内容 -->
+    </u-list>
+  </view>
+</template>
+
+<script setup lang="ts">
+const onRefresh = () => {
+  // 刷新逻辑
+}
+
+const onLoadMore = () => {
+  // 加载更多逻辑
+}
+</script>
+```
+
+### 条件编译配置
+
+不同平台可以有不同的配置：
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "// #ifdef H5": {
+          "navigationStyle": "custom"
+        },
+        "// #ifdef MP-WEIXIN": {
+          "navigationBarTitleText": "微信首页"
+        }
+      }
+    }
+  ]
+}
+```
+
+### 完整示例
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  },
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "navigationBarBackgroundColor": "#409EFF",
+        "navigationBarTextStyle": "white"
+      }
+    },
+    {
+      "path": "pages/list/list",
+      "style": {
+        "navigationBarTitleText": "列表",
+        "enablePullDownRefresh": true
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UniAppX",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#f5f5f5"
+  },
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#409EFF",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页"
+      }
+    ]
+  }
+}
+```
+
+## 注意事项
+
+1. **easycom 配置**：必须在 pages.json 中配置 easycom
+2. **路径正确性**：确保组件路径正确
+3. **样式配置**：合理配置页面样式，与 uView Pro 主题协调
+4. **平台差异**：注意不同平台的配置差异
+5. **性能优化**：合理配置下拉刷新和上拉加载
+6. **TypeScript**：UniAppX 使用 TypeScript，注意类型定义
@@ -0,0 +1,233 @@
+# UniAppX API Integration | UniAppX API 集成
+
+## Instructions
+
+This example demonstrates how to use UniAppX APIs with uView Pro components.
+
+### Key Concepts
+
+- Using UniAppX APIs with uView Pro components
+- Network requests for component data
+- Storage API for component state
+- System information for responsive components
+- Lifecycle hooks with uView Pro components
+- TypeScript type definitions
+
+### Example: Network Request with uView Pro Components
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view>
+    <u-button type="primary" :loading="loading" @click="loadData">
+      加载数据
+    </u-button>
+    <u-list v-if="dataList.length > 0">
+      <u-list-item v-for="item in dataList" :key="item.id">
+        {{ item.name }}
+      </u-list-item>
+    </u-list>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const loading = ref(false)
+const dataList = ref([])
+
+const loadData = () => {
+  loading.value = true
+  uni.request({
+    url: 'https://api.example.com/data',
+    method: 'GET',
+    success: (res) => {
+      dataList.value = res.data
+    },
+    fail: (err) => {
+      uni.showToast({
+        title: '加载失败',
+        icon: 'none'
+      })
+    },
+    complete: () => {
+      loading.value = false
+    }
+  })
+}
+</script>
+```
+
+### Example: Storage API with uView Pro Components
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const userInfo = ref({})
+
+onMounted(() => {
+  // Load from cache first
+  uni.getStorage({
+    key: 'userInfo',
+    success: (res) => {
+      userInfo.value = res.data
+    },
+    fail: () => {
+      // Load from network
+      loadUserInfo()
+    }
+  })
+})
+
+const loadUserInfo = () => {
+  uni.request({
+    url: 'https://api.example.com/user',
+    success: (res) => {
+      userInfo.value = res.data
+      // Cache the data
+      uni.setStorage({
+        key: 'userInfo',
+        data: res.data
+      })
+    }
+  })
+}
+</script>
+```
+
+### Example: System Information for Responsive Components
+
+```vue
+<template>
+  <view>
+    <u-grid :col="gridCol">
+      <u-grid-item v-for="item in gridData" :key="item.id">
+        {{ item.name }}
+      </u-grid-item>
+    </u-grid>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const gridCol = ref(3)
+const gridData = ref([])
+
+onMounted(() => {
+  uni.getSystemInfo({
+    success: (res) => {
+      // Adjust grid columns based on screen width
+      if (res.windowWidth > 750) {
+        gridCol.value = 4
+      } else if (res.windowWidth > 500) {
+        gridCol.value = 3
+      } else {
+        gridCol.value = 2
+      }
+    }
+  })
+})
+</script>
+```
+
+### Example: Show Loading with uView Pro
+
+```vue
+<template>
+  <view>
+    <u-loading-page :loading="loading" />
+    <u-button @click="loadData">加载数据</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const loading = ref(false)
+
+const loadData = () => {
+  loading.value = true
+  uni.request({
+    url: 'https://api.example.com/data',
+    success: (res) => {
+      // Handle data
+    },
+    complete: () => {
+      loading.value = false
+    }
+  })
+}
+</script>
+```
+
+### Example: Pull to Refresh with uView Pro
+
+```json
+// pages.json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页",
+        "enablePullDownRefresh": true
+      }
+    }
+  ]
+}
+```
+
+```vue
+<!-- pages/index/index.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const dataList = ref([])
+
+const onPullDownRefresh = () => {
+  loadData()
+}
+
+const loadData = () => {
+  uni.request({
+    url: 'https://api.example.com/data',
+    success: (res) => {
+      dataList.value = res.data
+    },
+    complete: () => {
+      uni.stopPullDownRefresh()
+    }
+  })
+}
+</script>
+```
+
+### Example: Navigation with uView Pro Components
+
+```vue
+<template>
+  <view>
+    <u-button type="primary" @click="goToDetail">查看详情</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+const goToDetail = () => {
+  uni.navigateTo({
+    url: '/pages/detail/detail?id=123'
+  })
+}
+</script>
+```
+
+### Key Points
+
+- Use `uni.request()` for loading data with uView Pro components
+- Use `uni.getStorage()` and `uni.setStorage()` for caching component state
+- Use `uni.getSystemInfo()` for responsive component sizing
+- Use `u-loading-page` component for loading states
+- Handle pull-to-refresh for component data updates
+- Use TypeScript types for better type safety
+- Use Composition API and setup syntax (recommended for UniAppX)
@@ -0,0 +1,78 @@
+# App Platform | App 平台
+
+## Instructions
+
+This example demonstrates App platform-specific considerations when using uView Pro in UniAppX.
+
+### Key Concepts
+
+- App manifest configuration
+- Native capabilities
+- Performance optimization
+- Platform-specific features
+
+### Example: App Configuration
+
+```json
+// manifest.json
+{
+  "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.INTERNET\"/>"
+        ]
+      },
+      "ios": {}
+    }
+  }
+}
+```
+
+### Example: App Component Usage
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view class="container">
+    <u-button type="primary" @click="handleClick">按钮</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const handleClick = () => {
+  // #ifdef APP-PLUS
+  // App specific code
+  plus.navigator.setStatusBarStyle('dark')
+  // #endif
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  padding: 20rpx;
+}
+</style>
+```
+
+### Key Points
+
+- Configure `usingComponents: true` in manifest.json
+- Use App-specific APIs when needed
+- Optimize for native performance
+- Handle status bar and navigation bar
+- Test on actual device for best results
+- Use conditional compilation for App-specific code
@@ -0,0 +1,95 @@
+# H5 Platform | H5 平台
+
+## Instructions
+
+This example demonstrates H5 platform-specific considerations when using uView Pro in UniAppX.
+
+### Key Concepts
+
+- H5 responsive design
+- Browser compatibility
+- Performance optimization
+- CSS and SCSS support
+
+### Example: H5 Responsive Components
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view class="container">
+    <u-grid :col="gridCol">
+      <u-grid-item v-for="item in gridData" :key="item.id">
+        {{ item.name }}
+      </u-grid-item>
+    </u-grid>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const gridCol = ref(3)
+const gridData = ref([])
+
+onMounted(() => {
+  // #ifdef H5
+  // H5: Adjust based on window width
+  const updateGridCol = () => {
+    if (window.innerWidth > 1200) {
+      gridCol.value = 4
+    } else if (window.innerWidth > 768) {
+      gridCol.value = 3
+    } else {
+      gridCol.value = 2
+    }
+  }
+  updateGridCol()
+  window.addEventListener('resize', updateGridCol)
+  // #endif
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  /* H5: Use viewport units for responsive sizing */
+  padding: 20rpx;
+  
+  // #ifdef H5
+  @media (min-width: 768px) {
+    padding: 40rpx;
+  }
+  // #endif
+}
+</style>
+```
+
+### Example: H5 Browser Compatibility
+
+```vue
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  // #ifdef H5
+  // Check browser compatibility
+  if (!window.CSS || !CSS.supports('display', 'flex')) {
+    uni.showModal({
+      title: '提示',
+      content: '您的浏览器版本过低，部分功能可能无法正常使用',
+      showCancel: false
+    })
+  }
+  // #endif
+})
+</script>
+```
+
+### Key Points
+
+- H5 supports full CSS and SCSS features
+- Use viewport units (vw, vh) for responsive sizing
+- Handle window resize events for responsive components
+- Check browser compatibility for modern CSS features
+- Use conditional compilation (`#ifdef H5`) for H5-specific code
+- Use media queries for responsive design
@@ -0,0 +1,118 @@
+# Mini-Program Platform | 小程序平台
+
+## Instructions
+
+This example demonstrates mini-program platform-specific considerations when using uView Pro in UniAppX.
+
+### Key Concepts
+
+- Mini-program manifest configuration
+- Component performance
+- Code size limits
+- Platform-specific APIs
+
+### Example: Mini-Program Configuration
+
+```json
+// manifest.json
+{
+  "mp-weixin": {
+    "appid": "your-appid",
+    "setting": {
+      "urlCheck": false,
+      "es6": true,
+      "enhance": true,
+      "postcss": true,
+      "minified": true
+    },
+    "usingComponents": true
+  }
+}
+```
+
+### Example: Mini-Program Component Usage
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view class="container">
+    <u-button type="primary" @click="handleClick">按钮</u-button>
+    <u-form :model="formData">
+      <u-form-item label="姓名">
+        <u-input v-model="formData.name" />
+      </u-form-item>
+    </u-form>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const formData = ref({
+  name: ''
+})
+
+const handleClick = () => {
+  // #ifdef MP-WEIXIN
+  // WeChat mini-program specific code
+  wx.showToast({
+    title: '操作成功',
+    icon: 'success'
+  })
+  // #endif
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  padding: 20rpx;
+}
+</style>
+```
+
+### Example: Performance Optimization
+
+```vue
+<template>
+  <view>
+    <u-list>
+      <u-list-item 
+        v-for="item in dataList" 
+        :key="item.id"
+        :lazy-load="true"
+      >
+        {{ item.name }}
+      </u-list-item>
+    </u-list>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const dataList = ref([])
+
+// #ifdef MP-WEIXIN
+// Mini-program: Optimize for performance
+const loadData = () => {
+  // Load data in chunks
+  uni.request({
+    url: 'https://api.example.com/data',
+    success: (res) => {
+      dataList.value = res.data.slice(0, 20) // Limit initial load
+    }
+  })
+}
+// #endif
+</script>
+```
+
+### Key Points
+
+- Configure `usingComponents: true` in manifest.json
+- Use lazy loading for large lists
+- Optimize component usage for code size limits
+- Use conditional compilation for platform-specific code
+- Test on actual mini-program platform
+- Be aware of code package size limits
@@ -0,0 +1,58 @@
+# nvue Platform | nvue 平台
+
+## Instructions
+
+This example demonstrates nvue platform-specific considerations when using uView Pro in UniAppX.
+
+### Key Concepts
+
+- nvue rendering engine
+- Weex syntax
+- Performance considerations
+- Style limitations
+
+### Example: nvue Configuration
+
+```json
+// manifest.json
+{
+  "app-plus": {
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3
+  }
+}
+```
+
+### Example: nvue Component Usage
+
+```vue
+<!-- pages/index/index.nvue -->
+<template>
+  <view class="container">
+    <u-button type="primary">按钮</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+// nvue uses same script setup syntax
+</script>
+
+<style lang="scss" scoped>
+/* nvue: Limited CSS support */
+.container {
+  width: 750rpx;
+  padding: 20rpx;
+  /* Use flexbox for layout */
+  flex-direction: column;
+}
+</style>
+```
+
+### Key Points
+
+- nvue has limited CSS support
+- Use flexbox for layout
+- Avoid complex CSS selectors
+- Test on actual device
+- Use conditional compilation for nvue-specific code
+- Consider performance implications
@@ -0,0 +1,150 @@
+# Basic UniAppX Project Template | 基础 UniAppX 项目模板
+
+## Instructions
+
+This template provides a basic UniAppX project structure with uView Pro integration.
+
+### Project Structure
+
+```
+uniappx-uview-pro-project/
+├── uni_modules/
+│   └── uview-pro/
+├── pages/
+│   ├── index/
+│   │   └── index.vue
+│   └── detail/
+│       └── detail.vue
+├── components/
+├── static/
+├── App.vue
+├── main.uts
+├── pages.json
+├── manifest.json
+└── uni.scss
+```
+
+### main.uts
+
+```typescript
+// main.uts
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import uViewPro from 'uview-pro'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(uViewPro)
+  return {
+    app
+  }
+}
+```
+
+### App.vue
+
+```vue
+<!-- App.vue -->
+<template>
+  <view id="app">
+    <!-- App root -->
+  </view>
+</template>
+
+<script setup lang="ts">
+// App setup
+</script>
+
+<style lang="scss">
+/* Import uView Pro styles */
+@import "uview-pro/index.scss";
+</style>
+```
+
+### pages.json
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    }
+  ],
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UniAppX uView Pro",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}
+```
+
+### manifest.json
+
+```json
+{
+  "name": "uniappx-uview-pro-demo",
+  "appid": "__UNI__XXXXX",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "h5": {
+    "router": {
+      "mode": "hash"
+    }
+  },
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  },
+  "app-plus": {
+    "usingComponents": true
+  }
+}
+```
+
+### pages/index/index.vue
+
+```vue
+<!-- pages/index/index.vue -->
+<template>
+  <view class="container">
+    <u-button type="primary" @click="handleClick">按钮</u-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+  uni.showToast({
+    title: '点击成功',
+    icon: 'success'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 20rpx;
+}
+</style>
+```
+
+### Key Points
+
+- Use TypeScript (.uts files) for main entry
+- Use Composition API and setup syntax
+- Configure easycom for automatic component import
+- Import uView Pro styles in App.vue
+- Use rpx units for responsive sizing
@@ -0,0 +1,91 @@
+# Manifest Configuration Template | Manifest 配置模板
+
+## Instructions
+
+This template provides manifest.json configuration for UniAppX projects with uView Pro.
+
+### Basic Template
+
+```json
+{
+  "name": "uniappx-uview-pro-demo",
+  "appid": "__UNI__XXXXX",
+  "description": "UniAppX uView Pro Demo",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "h5": {
+    "router": {
+      "mode": "hash"
+    }
+  },
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  },
+  "app-plus": {
+    "usingComponents": true
+  }
+}
+```
+
+### Complete Template
+
+```json
+{
+  "name": "uniappx-uview-pro-demo",
+  "appid": "__UNI__XXXXX",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "h5": {
+    "devServer": {
+      "port": 8080
+    },
+    "router": {
+      "mode": "hash",
+      "base": "/"
+    },
+    "optimization": {
+      "treeShaking": {
+        "enable": true
+      }
+    }
+  },
+  "mp-weixin": {
+    "appid": "your-appid",
+    "setting": {
+      "urlCheck": false,
+      "es6": true,
+      "enhance": true,
+      "postcss": true,
+      "minified": true
+    },
+    "usingComponents": true
+  },
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
+        ]
+      },
+      "ios": {}
+    }
+  }
+}
+```
+
+### Key Points
+
+- Configure `usingComponents: true` for mini-program and App
+- Set platform-specific settings
+- Configure build options
+- Use `transformPx: false` to avoid unit conversion issues
+- Test configuration on each platform
@@ -0,0 +1,87 @@
+# Pages Configuration Template | Pages 配置模板
+
+## Instructions
+
+This template provides pages.json configuration for UniAppX projects with uView Pro.
+
+### Basic Template
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    }
+  ],
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "UniAppX uView Pro",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}
+```
+
+### With Tab Bar
+
+```json
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "首页"
+      }
+    },
+    {
+      "path": "pages/user/user",
+      "style": {
+        "navigationBarTitleText": "我的"
+      }
+    }
+  ],
+  "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/user/user",
+        "iconPath": "static/tab-user.png",
+        "selectedIconPath": "static/tab-user-current.png",
+        "text": "我的"
+      }
+    ]
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+    }
+  }
+}
+```
+
+### Key Points
+
+- Configure pages array with all pages
+- Set up easycom for automatic uView Pro component import
+- Configure navigation bar titles
+- Use tabBar for bottom navigation
+- Configure global styles