cloud-template

cloud-template vite + vue3 + ts^(极速)

在线预览

简体中文 | English

🐳 特性

• ⚡️ Vue 3, Rolldown-Vite, pnpm

• 🚀 Rolldown-Vite - 基于 Rust 的下一代构建工具，极致性能

• 📦 组件自动导入

• 🍍 通过 Pinia 进行状态管理

• 🎨 Tailwind CSS v4 - 现代化原子 CSS 框架

• 😃 Lucide Icons - 精美的开源图标库

• 📥 API 自动导入 - 直接使用 Composition API 等

• 🦾 API 封装 - 基于 [axios] 的简单封装

• 🔍 Ultracite + Biome - 基于 Rust 的超快速代码检查和格式化工具

• 🎨 Element Plus - Vue 3.0 UI 组件库

• 🔄 TanStack Query - 强大的异步状态管理

• 🚀 自动版本更新并生成 CHANGELOG

• 🎨 Lottie - 用于解析 After Effects 动画的 JavaScript 库

• 📊 Echarts - 在 Vue 中使用 Echarts

• 📊 Utils-@iceywu/utils - 一套通用工具函数集合

• 🌐 i18n - 国际化支持

• 🎨 shadcn-vue - 基于 Reka UI 和 Tailwind CSS 构建的可复用组件

🚀 代码质量与性能

构建工具

• Rolldown-Vite - 基于 Rust 的下一代打包工具，提供显著更快的构建时间和热重载

代码检查

• Ultracite - 基于 Biome 的现代化代码检查和格式化工具
• Biome - 基于 Rust 的超快速代码检查和格式化工具

脚本命令

# 运行代码检查
pnpm lint

# 自动修复问题
pnpm lint:fix

动机

为什么要做这个模板？

1. 节省下次开发时浪费在配置上的时间
2. 结合主流插件，整合现代开发架构，提高开发效率

灵感来源

该模板受 tov-template 启发

使用方法

开发

运行以下命令并访问 http://localhost:5173/

pnpm dev

构建

构建应用，运行

pnpm build

预览

预览构建结果

pnpm preview

代码检查

# 检查代码规范
pnpm lint

# 自动修复代码问题
pnpm lint:fix

# 类型检查
pnpm typecheck

测试

# 运行测试
pnpm test

# 运行测试覆盖率
pnpm coverage

项目结构

cloud-template/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 接口
│   ├── assets/            # 资源文件
│   ├── components/        # 组件
│   ├── composables/       # 组合式函数
│   ├── layouts/           # 布局
│   ├── pages/             # 页面
│   ├── plugins/           # 插件
│   ├── stores/            # 状态管理
│   ├── styles/            # 样式
│   ├── utils/             # 工具函数
│   └── main.ts            # 入口文件
├── biome.jsonc            # Biome 配置
├── components.json        # shadcn-vue 配置
├── postcss.config.js      # PostCSS 配置
└── vite.config.ts         # Vite 配置

配置说明

代码检查配置

项目使用 Ultracite + Biome 进行代码检查和格式化：

• 配置文件：biome.jsonc
• 基于 Rust 实现，提供极速的代码检查体验
• 集成代码格式化和 lint 功能

构建工具

使用 Rolldown-Vite 替代传统 Vite，基于 Rust 实现，提供：

• 更快的冷启动时间
• 更快的热重载
• 更快的生产构建

许可证

MIT License © 2023 IceyWu