94 lines
4.2 KiB
Markdown
94 lines
4.2 KiB
Markdown
<p align="center">
|
||
<img src="https://github.com/uni-helper/vitesse-uni-app/raw/main/.github/images/preview.png" width="300"/>
|
||
</p>
|
||
|
||
<h2 align="center">
|
||
uni-app
|
||
</h2>
|
||
## 特性
|
||
|
||
- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [esbuild](https://github.com/evanw/esbuild) - 就是快！
|
||
|
||
- 🔧 [ESM 优先](https://github.com/uni-helper/plugin-uni)
|
||
|
||
- 🗂 [基于文件的路由](./src/pages)
|
||
|
||
- 📦 [组件自动化加载](./src/components)
|
||
|
||
- 📑 [布局系统](./src/layouts)
|
||
|
||
- 🎨 [UnoCSS](https://github.com/unocss/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎
|
||
|
||
- 😃 [各种图标集为你所用](https://github.com/antfu/unocss/tree/main/packages/preset-icons)
|
||
|
||
- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)
|
||
|
||
- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入
|
||
|
||
- 🦾 [TypeScript](https://www.typescriptlang.org/) & [ESLint](https://eslint.org/) - 保证代码质量
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
Road_roller/
|
||
├── .github/ # GitHub Actions CI/CD 配置
|
||
├── .hbuilderx/ # HBuilderX 编辑器配置
|
||
├── .opencode/ # OpenCode AI 工具配置（skills、插件等）
|
||
├── .vscode/ # VS Code 编辑器配置
|
||
├── dist/ # 构建输出目录
|
||
├── node_modules/ # 依赖包
|
||
├── src/ # 源代码目录
|
||
│ ├── api/ # 接口请求
|
||
│ │ ├── request.ts # Axios 请求封装（拦截器、基础配置）
|
||
│ │ └── home/ # 首页相关接口
|
||
│ ├── components/ # 公共组件（自动加载）
|
||
│ │ ├── AppFooter.vue
|
||
│ │ ├── AppLogos.vue
|
||
│ │ ├── HiCounter.vue
|
||
│ │ └── InputEntry.vue
|
||
│ ├── composables/ # 组合式函数（自动加载）
|
||
│ │ ├── useCount.ts # 计数器逻辑
|
||
│ │ └── useQuery.ts # 查询参数解析
|
||
│ ├── layouts/ # 页面布局组件
|
||
│ │ ├── default.vue # 默认布局
|
||
│ │ └── home.vue # 首页布局
|
||
│ ├── mock/ # 模拟数据
|
||
│ │ ├── index.ts # Mock 数据入口
|
||
│ │ └── time.ts # 时间相关 Mock
|
||
│ ├── pages/ # 页面文件（文件路由）
|
||
│ │ ├── home/ # 首页
|
||
│ │ ├── work/ # 工作页
|
||
│ │ └── report/ # 报告页
|
||
│ ├── static/ # 静态资源（图标、图片）
|
||
│ ├── store/ # Pinia 状态管理
|
||
│ │ └── index.js
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── App.vue # 根组件
|
||
│ ├── main.ts # 应用入口
|
||
│ ├── manifest.json # uni-app 应用配置
|
||
│ ├── pages.json # 页面路由配置（自动生成）
|
||
│ ├── theme.json # 主题变量（亮色/暗色）
|
||
│ └── uni.scss # uni-app 全局样式变量
|
||
├── eslint.config.js # ESLint 配置
|
||
├── manifest.config.ts # uni-app manifest 配置（源文件）
|
||
├── pages.config.ts # 页面路由配置（源文件）
|
||
├── unh.config.ts # uni-helper CLI 配置
|
||
├── uno.config.ts # UnoCSS 原子化 CSS 配置
|
||
├── vite.config.ts # Vite 构建配置
|
||
└── vitest.config.ts # Vitest 测试配置
|
||
```
|
||
|
||
### 目录说明
|
||
|
||
| 目录 | 作用 |
|
||
|------|------|
|
||
| `src/api` | 接口请求封装，基于 Axios + uni-app 适配器 |
|
||
| `src/components` | 公共 Vue 组件，通过 vite-plugin-uni-components 自动加载 |
|
||
| `src/composables` | Vue 3 组合式函数，通过 unplugin-auto-import 自动导入 |
|
||
| `src/layouts` | 页面布局模板，通过 vite-plugin-uni-layouts 管理 |
|
||
| `src/mock` | 开发环境模拟数据 |
|
||
| `src/pages` | 页面组件，文件即路由（vite-plugin-uni-pages） |
|
||
| `src/static` | 静态资源，打包时原样复制到输出目录 |
|
||
| `src/store` | Pinia 状态管理，自动导入 |
|
||
| `src/utils` | 工具函数，自动导入 |
|