1esse/vue-clownfish-admin

🐋vite vue3 antd admin

Vite + Vue3 + Antd + Typescript 管理后台前端简易框架

🐬 简介

vue-clownfish-admin 是一个由Vue最新技术栈开发的后台管理前端简易框架。基于vue3，集成vue3最新生态系统的核心库实现。主要的技术栈有 ES2015+，typescript，vue3，pinia，vue-router，vite，antd，了解这些技术会让你更容易入手此项目。此项目基于vite构建，并使用vue3作为开发技术，所以只针对现代浏览器做开发，不支持低版本的浏览器（如ie）。

🦑 优势

• 几乎使用当前前端最新技术开发（vite, vue3, ts, pinia）
• 布局组件解耦，可轻易切换，替代组件
• 轻量模板，学习成本低

🐳 主要功能

• 动态生成侧边栏菜单（支持多层嵌套和外链）
• 动态生成面包屑
• 导航标签页（拖拽排序，右键弹出菜单，页面刷新等）
• 侧边栏菜单、面包屑、标签页都支持icon图标(antd图标和svg)
• 根据路由配置动态缓存页面
• 动态路由页面
• 动态菜单
• 路由权限配置
• 自动为css代码添加前缀，使样式适配不同浏览器
• 支持使用JSX/TSX进行开发
• 支持mock模拟接口
• 多环境配置

🦀 开发准备

# 克隆项目
git clone https://github.com/1esse/vue-clownfish-admin.git

# 进入目录
cd vue-clownfish-admin

# 下载依赖包
npm install # 使用npm
yarn # 使用yarn

# 启动项目
npm run dev # 使用npm
yarn dev # 使用yarn

🐠 scripts命令

• dev：本地开发
• stage: 预发布环境开发
• build：打包项目代码
• build:stage: 打包预发布环境代码
• preview：预览打包后的项目

🐟了解这些可能会有帮助

1. src/components，antd组件，antd图标不需要显式导入（tsx除外）。
2. vue，pinia，vue-router及src/utils，src/composables下的函数不需要显式导入（可在vite.config.ts配置）。
3. 不需要对flex，grid等css样式进行多浏览器适配，框架已配置了自动适配。
4. 大部分场景推荐使用rem代替px以适配更多不同分辨率屏幕。

🦐 其他

在线预览

在线预览（国内网络访问）

Gitee地址

electron版本

ElementPlus版本

🐙 License

MIT License

Copyright © 2022-present ZhaoJieXin

vue-clownfish-admin's Issues

有动态路由这块的功能吗？

大佬你好，我是vue3和typescript新手，想问一下这个项目有木有动态路由这块的代码？就是根据后端返回的树形json动态生成左侧路由的这种，类似角色权限控制。

请教为啥我切换路由后页面是空白的？

仓库连接

路由那块没看懂 顺便请教一下开发的话往那个routes里面写啊？

TS声明文件中为啥不需要export呢？

大佬，再问一个问题，我看代码的时候发现像stores.d.ts，layout.d.ts这些声明文件中定义了一些全局interface，为啥这些声明文件不需要export，然后业务代码里边也不需要import却可以直接使用这些interface呢？

dev mock没有生效

1.dev环境起来之后 mock好像没有生效。

请问 style 文件中的 _antd.scss 怎么做到覆盖 UI 组件样式的

我看到 在 main.ts 引入了 import '@/styles/index.scss' // 全局样式 ，但是我在我的项目里参考你的方式 覆盖样式却不生效