arco-pro-admin

基于 Arco Design 的管理系统

特性

• ⚡️ Vue 3, Vite, pnpm 优先 - 就是快！
• 📲 组件自动加载
• 📥 API 自动加载 - 直接使用 Composition API 无需引入
• 🎨 UnoCSS - 高性能且极具灵活性的原子化 CSS 引擎
• 😃 各种图标集为你所用 - 150+ 图标集, 200000+ 图标为你所用, 从不妥协
• 🍍 使用 Pinia 的状态管理
• 🔥 使用 新的 <script setup> 语法
• 🦾 TypeScript 支持

预配置

UI 框架

• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

Icons

• Iconify - 使用任意的图标集, 使用 Icônes 或 iconify 查看或搜索图标
  • 用 CSS 的方式使用图标

组件库

• Arco Design - 能力全面的企业级产品设计系统

插件

• Pinia - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理
• vite-plugin-uni-components - 自动加载组件
• unplugin-auto-import - 直接使用 Composition API 等，无需导入
• VueUse - 实用的 Composition API 工具合集

编码风格

• 使用 Composition API 的 <script setup> SFC 语法
• ESLint 配置为 @moomfe/eslint-config, 单引号, 有分号

开发工具

• TypeScript
• pnpm - 快, 节省磁盘空间的包管理器
• VS Code- IDE
• VS Code 扩展
  • Volar - Vue 3 <script setup> IDE 支持
  • ESLint - 代码风格检查及修正
  • UnoCSS - UnoCSS 样式提示及自动补全
  • Iconify IntelliSense - 图标内联显示及自动补全

开始

使用项目根目录的 ***.code-workspace 文件进入 VsCode 工作区

安装相应的 VsCode 扩展 ( 首次进入工作区时, 右下角会提示安装 ), 可以在扩展界面, 输入 @recommended 检查安装状态

执行以下命令就可以启动项目

pnpm dev # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm

License

MIT License © 2024-PRESENT It-Moom