这里是antd版本,如果你更倾向于使用element-plus,请点击这里。
- 优化项目结构,mock目录移动到项目根目录
- 优化类型定义,新增types目录用于存放类型文件
- 优化request封装,请求成功默认返回res.data,支持定义data类型
vue-clownfish-admin 是一个由Vue最新技术栈开发的后台管理前端简易框架。基于vue3,集成vue3最新生态系统的核心库实现。主要的技术栈有
ES2015+,typescript,vue3,pinia,vue-router,vite,antd,了解这些技术会让你更容易入手此项目。此项目基于vite
构建,并使用vue3
作为开发技术,所以只针对现代浏览器做开发,不支持低版本的浏览器(如ie),如有需要请自行添加polyfill
进行适配。
- 几乎使用当前前端最新技术开发(vite, vue3, ts, pinia, csswg)
- 布局组件解耦,可轻易切换,替代组件
- 框架实现代码行数少,通俗易懂容易上手
- 根据路由配置自动生成侧边栏菜单(支持多层嵌套和外链)
- 根据当前路由信息动态生成面包屑
- 导航标签页(右键弹出菜单,支持页面刷新,关闭)
- 侧边栏菜单、面包屑、标签页都支持icon图标(antd图标和svg)
- 根据路由配置动态缓存页面
- 路由权限配置
- 自动注册全局组件(antd组件及components/*.vue)
- 支持原生CSS变量和CSSWG草案规定进行开发,编写符合未来标准的css
- 自动为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
- dev:本地开发
- stage: 预发布环境开发
- build:打包项目代码
- build:stage: 打包预发布环境代码
- preview:预览打包后的项目
项目基本架构搭建完成,即将启动页面功能解决方案的开发。如果你有你的想法,也欢迎提pr参与项目开发。
遇到项目任何问题欢迎提issue。
Copyright © 2022-present ZhaoJieXin