Vue3+Vite2.6+TypeScript+Ant-design-vue構建企業級中後臺響應式管理後臺

vipbic發表於2021-12-21
VueViteTypeScript

Vue3+Vite2.6+TypeScript+ant-design-vue構建，提供基礎的框架，快速搭建企業級中後臺產品，響應式管理後臺系統，整合專案切換，動態選單路由等等，讓開發者能快速開發

文件教程

文件教程

點這裡直達

文件教程

Github

文件地址

使用專案

克隆專案
git clone https://github.com/hangjob/vue-vite-admin-ts.git

安裝依賴

node.js版本需要大於12，vite的編譯環境是12以上的版本

npm i

啟動應用

npm run dev

釋出

npm run build

其他

# eslint程式碼格式檢查
npm run lint 
# eslint自動修復程式碼
npm run lint:fix

Eslint

eslint 已做過濾配置，只會對package檔案中程式碼做檢查

已完成的功能

✅ 使用Vue 3

✅ 使用Vuex 4.x

✅ 使用Vue-router 4.x

✅ 基於Vite 2.6

✅ 基於Ant Design Vue

✅ 整體框架響應式佈局

✅ 專案切換

✅ 使用者登入攔截，使用者退出

✅ 麵包屑導航 + 多種佈局效果

✅ 基於後臺許可權,按鈕許可權設計

✅ 選單導航 + 多種佈局

✅ 內建iconfont字型圖示，自動生成元件

✅ 基於axios封裝post，get，all，upload，download

✅ http錯誤重連

✅ 元件許可權指令封裝

✅ tsx構建全域性元件

✅ http網路元件(vue3新特性)

✅ 選單管理，包含增、刪、改、查，選單是快取、是否固定、是否隱藏(但展示)、是否隱藏等待 具體功能,檢視文件

✅ 包含富文字編輯器，檔案列印，圖表預覽，動畫元件，狀態詳情元件等等

✅ 支援多頁面應用

✅ 支援iframe內嵌

✅ 頁面重新整理

✅ 頁面全屏

✅ 右鍵選單封裝

✅ 滾動條優化

✅ 骨架屏元件預覽

✅ 基於封裝loadsh深層遍歷、查詢、無規律查詢

✅ 基於mitt全域性通訊

✅ 基於vxe-table解決萬量級表格渲染

✅ Mock資料

✅ Egg.js後端服務，具體操作看文件

✅ sequelize模型增刪改查

✅ Eslint程式碼檢查

✅ 開發編輯器全域性配置

✅ 打包壓縮處理Gzip

待完成

✖️ 主題切換

✖️ 中/英文切換

✖️ iframe快取

預覽直通車

相關文章