使用前端最新技术栈开发的后台管理系统前端框架 vite + vue3 + typescript + pinia + csswg（有 element-plus 和 antd 版本）

[1esse]

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

这里是element-plus版本，如果你更倾向于使用antd，请点击这里。

✨ 最新版本 v1.0.5

1. 新增环境配置，支持staging预发布环境

2. 支持mock模拟接口，appConfig.ts文件中开启

   // appConfig.ts
   
   /**
   * 使用mock代理api请求：on开，off关  
   */
   export const mock: 'on' | 'off' = 'on'
   
   /**
   * mock是否开启namespace，开启后文件名将作为前缀拼接在url
   */
   export const mockNamespace: boolean = true

🐬 简介

vue-clownfish-admin-elem 是一个由Vue最新技术栈开发的后台管理前端简易框架。基于vue3，集成vue3最新生态系统的核心库实现。主要的技术栈有 ES2015+，typescript，vue3，pinia，vue-router，vite，element-plus，了解这些技术会让你更容易入手此项目。此项目基于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-elem.git

# 进入目录
cd vue-clownfish-admin-elem

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

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

🐠 scripts命令

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

🦐 预览项目

在线预览

🐡 其他

项目基本架构搭建完成，即将启动页面功能解决方案的开发。如果你有你的想法，也欢迎提pr参与项目开发。

遇到项目任何问题欢迎提issue。

🐙 License

MIT License

Copyright © 2022-present ZhaoJieXin