# vue3-app-admin **Repository Path**: gecko-three-thousand/vue3-app-admin ## Basic Information - **Project Name**: vue3-app-admin - **Description**: vue3 vite element-plus unocss vxe-table - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2026-01-31 - **Last Updated**: 2026-01-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # cat-admin ### 📖介绍 cat-admin 一款基于 Vue3.5、TypeScript、Vite5、Pinia、Element-Plus、Unocss 开源的前端项目模板，使用目前最新技术栈开发，美观的页面，简洁的代码结构，不过度封装，简单易上手。 ### ⚡️技术栈 1. ✨Vue3.5，Vite6 , [pnpm](<[https://](https://www.pnpm.cn/)https://>) 速度快，本地开发占有磁盘空间小 2. ⭐[Element-Plus](https://element-plus.org/zh-CN/) 最流行的Vue3 UI组件库，社区活跃，易用 3. ⏳[Unocss](http://www.unocss.cn/) 原子化css,丰富的图标集，图标选择不用愁 [icones](https://icones.js.org/) ，[iconify](https://iconify.design/)，简单易用，复制图标名，项目封装好了Svg-Icon组件 4. ☘️[vueuse](https://vueuse.org/)巨多封装好使用的hooks集合，强大无需多言 5. 💪TypeScript 必须，适当的约束，更好的规范 6. 🍍使用[Pinia](https://pinia.vuejs.org/zh/) 进行数据状态管理，符合直觉的 Vue.js 状态管理库 7. ☀ [vxetable](https://vxetable.cn/#/start/install) 强大的table，丰富的功能，虚拟列表，超大数据渲染的不二选择 8. ✋[auto-animate](https://auto-animate.formkit.com/#usage)适用于多种框架的动画库，简单易用，一个指令搞定过度效果 9. ✊[better-scroll2.0](https://better-scroll.github.io/docs/zh-CN/)强大的滚动库，很多大厂都在使用，项目已在better-scroll基础上封装组件，简化使用 10. 💾[vite-plugin-mock-dev-server](https://vite-plugin-mock-dev-server.netlify.app/)本地mock数据 11. 🌓 支持暗夜模式，可以根据操作系统主题自动切换，也可手动更改，自由，浪漫 12. ⚙️ 多种定制化布局，主题颜色，自由度高 ### 项目启动 首先必须安装node.js [node.js下载地址](<[https://](https://nodejs.org/zh-cn)https://>) 推荐使用[nvm](<[https://](https://nvm.uihtm.com/)https://>)管理node版本 确保你的环境满足以下要求： - **git**: 你需要git来克隆和管理项目版本。 - **NodeJS**: >=18.12.0，推荐 18.19.0 或更高。 - **pnpm**: >= 8.7.0，推荐 8.14.0 或更高。 **安装依赖** ```bash npm i pnpm -g pnpm i ``` > 由于本项目采用了 pnpm monorepo 的管理方式，因此请不要使用 npm 或 yarn 来安装依赖。 **启动项目** ```bash pnpm dev ``` **构建项目** ```bash pnpm build ``` ``` cat-admin ├─ 📁.vscode // vscode 配置文件 ├─ 📁build // 打包相关插件配置 │ └─ 📁vite ├─ 📁mock // mock 数据 ├─ 📁public // 网站 logo ├─ 📁src // 主目录 │ ├─ 📁api // api请求 │ ├─ 📁assets //静态资源 │ │ ├─ 📁images // 图片 │ │ └─ 📁svgs // svg │ ├─ 📁components // 组件 │ │ ├─ 📁common // 全局组件（会自动注册到全局） │ │ └─ 📁custom // 自定义组件 （手动导入使用） │ ├─ 📁config // 项目的一些配置文件 │ ├─ 📁constant // 一些常量 │ ├─ 📁directives // vue 指令 │ ├─ 📁hooks // hooks │ ├─ 📁language // 多语言 │ ├─ 📁layouts // 多种布局封装 │ │ ├─ 📁components │ │ │ ├─ 📁Breadcrumb │ │ │ ├─ 📁Footer │ │ │ ├─ 📁Header │ │ │ ├─ 📁Logo │ │ │ ├─ 📁Main │ │ │ ├─ 📁Sidebar │ │ │ ├─ 📁Tabs │ │ │ └─ 📁ThemeDrawer │ ├─ 📁pages // 常用的页面 │ │ ├─ 📁error │ │ └─ 📁refresh │ ├─ 📁plugins // 项目第三方库的注册使用 │ │ ├─ 📄autoAnimate.ts │ │ ├─ 📄colord.ts │ │ ├─ 📄css.ts │ │ ├─ 📄dayjs.ts │ │ ├─ 📄directives.ts │ │ ├─ 📄element-plus-icon.ts │ │ ├─ 📄element-plus.ts │ │ ├─ 📄index.ts │ │ ├─ 📄nprogress.ts │ │ ├─ 📄router.ts │ │ ├─ 📄store.ts │ │ └─ 📄vxe-table.ts │ ├─ 📁router // 路由 │ ├─ 📁stores // 状态管理库 pinia │ ├─ 📁styles // 样式文件 │ ├─ 📁typings │ │ ├─ 📄components.d.ts // 自动导入的组件 │ │ ├─ 📄env.d.ts // vite 相关 │ │ ├─ 📄global.d.ts // 全局类型 │ │ ├─ 📄helps.d.ts // 一些自定义的类型 │ │ ├─ 📄index.d.ts │ │ ├─ 📄shims-vue.d.ts // vue 相关 │ │ └─ 📄vue-router.d.ts // 扩展路由类型 │ ├─ 📁utils // 一些工具函数 │ │ ├─ 📁alova │ │ ├─ 📁alovaAxios │ │ ├─ 📁eventBus // 全局事件 │ │ ├─ 📁file // 文件相关函数 │ │ ├─ 📁helpers // 辅助函数 │ │ └─ 📁request // axios 请求封装 │ │ ├─ 📄AbortAxios.ts │ │ ├─ 📄axiosMax.ts │ │ ├─ 📄config.ts │ │ ├─ 📄helper.ts │ │ ├─ 📄index.ts │ │ └─ 📄types.ts │ ├─ 📁views // 业务页面 │ ├─ 📄App.vue // 项目入口 vue │ └─ 📄main.ts // 项目起始 ├─ 📄.editorconfig // 编辑器配置 ├─ 📄.env //环境变量（任何环境都有效） ├─ 📄.env.development //环境变量（开发环境都有效） ├─ 📄.env.production //环境变量（生产环境都有效） ├─ 📄.gitignore ├─ 📄.npmrc ├─ 📄eslint.config.js // esling 本项目使用 @antfu/eslint-config ├─ 📄index.html ├─ 📄LICENSE ├─ 📄package.json ├─ 📄pnpm-lock.yaml ├─ 📄postcss.config.js // postcss 配置 ├─ 📄README.md ├─ 📄tsconfig.json // ts配置 ├─ 📄uno.config.ts // unocss 配置 └─ 📄vite.config.ts // vite 配置文件 ```