在线 Demo

特性

• ⚡️ Vue3、vite4、pnpm 快速搭建项目
• 🗂 动态路由
• 📦 组件自动化加载
• 🍍 使用 Pinia 的状态管理
• 📑 布局系统
• 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
• 😃 支持多种图标
• 🔥 使用 新的<script setup>语法
• 🤙🏻 多种有趣的功能
• 📥 API 自动加载 - 直接使用 Composition API 无需引入
• 🦾 TypeScript

预配置

UI 框架

• Element Plus - Vue3 UI 组件库
• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

Icons

• Iconify - 使用任意的图标集
• UnoCSS 的纯 CSS 图标方案

插件

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

编码风格

• 使用 Composition API 的 <script setup>SFC 语法
• ESLint、Prettier

开发工具

• TypeScript
• pnpm - 快, 节省磁盘空间的包管理器
• VS Code 扩展
  • Vite - 自动启动 Vite 服务器
  • Volar - Vue 3 <script setup> IDE 支持
  • ESLint
  • Prettier
  • UnoCSS

使用

安装依赖

pnpm install

开发

pnpm dev

构建

pnpm build

系统功能

多级菜单

拖拽布局

使用 vue-grid-layout、echarts 搭建数据看板

分割面板

使用 splitpanes 的例子

可插入 dom 节点的文本框

基于 codemirror6 开发的文本框，支持插入 dom 节点

页面缓存

动态路由

根据登录用户的菜单，生成路由数据，动态添加。

404 页面

页面不存在，跳到 404 页面

表格封装

二次封装 el-table，支持插槽、动态多级表头导出等。

图标集