vue dash

VueDash（Vue Nuxt.js 3 Tailwind CSS 管理儀表板範本）

使用Vue.js 、 Nuxt.js 3 、 NuxtUI和Tailwind CSS建立的現代、響應式且可自訂的管理儀表板範本。此範本非常適合建立功能強大的管理介面、儀表板和具有簡潔設計的 Web 應用程式。

特徵

• Nuxt.js 3 ：使用 Vue 3 組合 API 進行無縫伺服器端渲染（SSR）和靜態網站產生（SSG）。
• Tailwind CSS ：實用程式優先的 CSS 框架，用於快速、響應式的 UI 開發。
• 待辦事項清單管理：內建 CRUD 待辦事項清單管理的支持
• 發票製作器：內建支援 CRUD，互動式發票製作器
• 可重複使用元件：模組化和可重複使用的 UI 元件，可輕鬆自訂。
• 深色模式：內建支援淺色和深色主題。
• 響應式設計：針對所有螢幕尺寸進行全面最佳化。
• 動態路由：由 Nuxt.js 提供支援的靈活路由系統。
• 可擴充：輕鬆新增頁面、元件和外掛程式。

？技術堆疊

• 前端框架：Vue.js 3（組合 API）
• 元框架：Nuxt.js 3
• 樣式：Tailwind CSS
• UI元件庫：NextUI
• 套件管理器：pnpm

安裝

1. 克隆儲存庫：

   git clone https://github.com/Kei-K23/vue-dash
   cd vue-dash

2. 安裝依賴項：

   pnpm install
   # or
   npm install

3. 運行開發伺服器：

   pnpm run dev
   # or
   npm run dev

4. 開啟瀏覽器並導航至http://localhost:3000 。

---

文件結構

 admin-dashboard-template/
├── layouts/           # Layouts for the app
├── pages/             # Nuxt.js pages and routes
├── features/          # Organize logic, ui components and state into domain or feature
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt.js configuration
└── tailwind.config.js # Tailwind CSS configuration

？路由和頁面文檔

路線	頁面名稱	描述
/	首頁	管理儀表板的主要登陸頁面。
/login	登入頁面	允許使用者登入並存取管理儀表板。
/register	註冊頁面	允許新使用者建立帳戶。
/contact	聯絡頁面	顯示一個表單，供使用者尋求支援或詢問。
/invoice	發票頁	顯示發票清單或財務記錄詳細資料。
/todo	都都應用程式頁面	用於以待辦事項清單格式管理和追蹤任務的頁面。
/products	產品頁面	用於管理產品資訊的頁面，包括詳細資訊和定價。
/order-lists	訂單清單頁面	列出所有客戶訂單，並提供查看和管理訂單的選項。
/product-stock	產品庫存頁	顯示目前庫存水準和庫存管理選項。
/settings	設定頁面	允許使用者管理系統設定和個人偏好。
/team	團隊頁面	展示團隊成員、角色和權限管理選項。

？客製化

順風 CSS

修改tailwind.config.js檔案以自訂主題、擴充樣式或新增外掛程式。

成分

所有元件都位於features/(domain)/目錄內的components/目錄中。建立新組件或擴展現有組件以滿足您的專案需求。

頁面和路由

在pages/目錄中新增或編輯檔案以動態建立新路由。

？依賴關係

• 視圖3
• Nuxt.js 3
• 順風 CSS
• 努克斯圖使用者介面

文件

設定身份驗證

您可以使用 Nuxt 的中間件和插件來整合任何驗證服務（例如 Firebase、Auth0 或自訂 JWT）。有關更多詳細信息，請參閱 Nuxt.js 身份驗證模組。

添加 API 集成

在pages/或composables/目錄中使用Nuxt的伺服器路由或外部API呼叫。在此處了解有關 Nuxt.js API 處理的更多資訊。

？測試

單元測試

安裝並設定 Vitest 以對 Vue 元件進行單元測試。

端對端測試

使用 Cypress 或 Playwright 進行端對端測試。

部署

1. 靜態站點產生（SSG） ：

   pnpm run generate

   將產生的檔案從dist/資料夾部署到靜態託管提供者（例如 Netlify、Vercel）。

2. 伺服器端渲染（SSR） ：

   pnpm run build
   pnpm run start

   將應用程式部署到 Node.js 託管（例如 AWS、Heroku 或 DigitalOcean）。

？支援

如果您遇到任何問題、有疑問或想要要求新功能或頁面，請隨時提出問題或聯絡 [email protected]。

？貢獻

歡迎貢獻！請依照以下步驟操作：

1. 分叉儲存庫。
2. 建立一個功能分支（ git checkout -b feature-name ）。
3. 提交您的變更（ git commit -m "Add feature" ）。
4. 推送到分支（ git push origin feature-name ）。
5. 打開拉取請求。

執照

該項目已獲得 MIT 許可證的許可。

？致謝

• Vue.js
• Nuxt.js
• 努克斯圖使用者介面
• 順風 CSS

頁面預覽

桌面視圖

平板電腦視圖

手機查看