cloud-app-admin是一個使用了最新前端技術的項目，包括Vue 3.2+、vite 3、Element-Plus、TypeScript和Tailwind CSS等主流技術。它旨在與大家一起學習和探索最新前端技術的應用。
cloud-app-admin已經實現了以下功能：
路由集成
該項目已經集成了路由功能，可以輕松管理頁面之間的跳轉和導航。
頁面與按鈕權限集成
cloud-app-admin還集成了頁面與按鈕級別的權限控制功能，以確保只有授權用戶才能訪問特定頁面和操作。
狀態管理集成（Pinia）
狀態管理在復雜的應用中起著重要作用。cloud-app-admin使用Pinia進行狀態管理，提供了可靠和高效的狀態管理解決方案。
Hooks集成（VueUse）
為了提高開發效率和代碼復用性，cloud-app-admin集成了VueUse提供的Hooks，使得開發者可以更好地處理常見的邏輯和功能。
ElementPlus集成
ElementPlus是一個流行的Vue組件庫，提供了豐富的UI組件。cloud-app-admin已經集成了ElementPlus，并可以直接使用其中的組件來構建用戶界面。
Tailwind CSS集成
對于樣式設計和布局，cloud-app-admin使用了Tailwind CSS，這是一個高效的CSS框架。它提供了許多實用的CSS類，可以快速創建出各種樣式。
Axios二次封裝
為了更好地處理HTTP請求，cloud-app-admin對Axios進行了二次封裝，提供了更便捷、優雅的請求方式。
i18n國際化集成
國際化是開發具有全球用戶的應用時的重要考慮因素。cloud-app-admin集成了i18n，使得應用可以支持多語言切換。
代碼規范集成（EditorConfig、Eslint、Prettier、Husky、Lint-staged）
為了保持代碼質量和一致性，cloud-app-admin集成了許多代碼規范工具，包括EditorConfig、Eslint、Prettier、Husky和Lint-staged。
Vxe-table多維度圖表組件引入
為了展示數據和創建圖表，cloud-app-admin引入了Vxe-table組件庫，它提供了豐富的表格和圖表組件，方便開發者進行數據可視化。
封裝常用通知、表格Hooks
為了簡化開發過程，cloud-app-admin封裝了常用的通知和表格Hooks，使得開發者可以更快地實現常見的功能。
Echarts圖表組件庫引入
除了Vxe-table，cloud-app-admin還引入了Echarts圖表組件庫，為應用提供了更多繪制各類圖表的選擇。
富文本編輯器引入（WangEditor）
在處理富文本內容時，cloud-app-admin使用了WangEditor富文本編輯器，使得用戶可以輕松創建和編輯富文本。
Mock引入
在開發階段，mock數據非常有用。cloud-app-admin引入了Mock，可以方便地生成模擬數據，加快開發速度。
支持暗黑模式
亮度適應以及用戶體驗方面，cloud-app-admin支持了暗黑模式，并根據用戶的系統設置進行自動切換。
支持動態換膚（CSSVariables方案）
cloud-app-admin支持動態換膚功能，使用了CSS Variables方案。開發者可以通過改變CSS變量的值來實現應用的動態換膚效果。
unplugin-icons引入
為了方便訪問數千個圖標，并將它們作為組件使用，cloud-app-admin引入了unplugin-icons。這個庫與unplugin-components配合使用，在無需注冊的情況下即可按需訪問數千個圖標。
項目結構
├── LICENSE 授權文件 ├── README.md README ├── dist 編譯目錄 │ ├── assets │ ├── favicon.ico │ ├── images │ └── index.html ├── index.html HTML模板 ├── locales I18n文件 │ ├── en.json │ └── zh-CN.json ├── mock 模擬數據文件 │ ├── article.ts │ ├── route.ts │ ├── upload.ts │ └── user.ts ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── public 網站公共目錄 │ ├── favicon.ico 網站圖標 │ └── images 資源文件 ├── screenshot 截圖 │ ├── crud.png │ ├── dashboard-dark.png │ ├── dashboard-light.png │ ├── editor.png │ ├── i18n.png │ ├── login.png │ ├── mobile.png │ └── nested.png ├── src 源碼目錄 │ ├── App.vue 頁面入口 │ ├── api 接口文件 │ ├── assets 靜態資源 │ ├── components 公共組件 │ ├── directives 指令庫 │ ├── enum 全局枚舉文件 │ ├── env.d.ts │ ├── hooks 自定義hooks │ ├── layouts 項目布局文件 │ ├── main.ts 程序入口 │ ├── model 模型定義類型文件 │ ├── plugins 插件文件 │ ├── router 路由文件 │ ├── store 全局狀態 │ ├── style 全局樣式 │ ├── utils 工具庫 │ └── views 視圖 ├── stats.html ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json ├── types ts類型定義 │ ├── auto-imports.d.ts │ ├── components.d.ts │ ├── http.d.ts │ ├── menu.d.ts │ ├── resultType.d.ts │ ├── router.d.ts │ ├── table.d.ts │ └── viteEnv.d.ts ├── vite │ ├── alias.ts vite別名配置 │ ├── plugins vite插件模塊 │ └── util.ts vite工具庫 └── vite.config.ts vite配置文件
安裝和使用
如果你想使用cloud-app-admin項目，按照以下步驟操作：
- 安裝依賴：
cd cloud-app-admin
pnpm install - 運行項目：
pnpm dev
注意：從V1.7版本開始，cloud-app-admin基于vite3構建。由于vite3不支持node14.18以下版本，使用較低的node版本進行安裝或啟動可能會出現異常。推薦升級至最新穩定版本的node16，或使用V1.6版本（V1.6及以下版本使用vite2構建）。
通過以上步驟，你可以開始使用cloud-app-admin項目，學習和探索最新前端技術的應用。它提供了許多功能和集成的主流技術，使得開發過程更加高效和愉快。
