vue clownfish 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