vue dash
v0.1.3
เทมเพลตแดชบอร์ดผู้ดูแลระบบที่ทันสมัย ตอบสนอง และปรับแต่งได้ ซึ่งสร้างด้วย Vue.js , Nuxt.js 3 , NuxtUI และ Tailwind CSS เทมเพลตนี้เหมาะสำหรับการสร้างอินเทอร์เฟซผู้ดูแลระบบ แดชบอร์ด และเว็บแอปพลิเคชันที่มีประสิทธิภาพด้วยการออกแบบที่เรียบง่ายและสะอาดตา
โคลนพื้นที่เก็บข้อมูล :
git clone https://github.com/Kei-K23/vue-dash
cd vue-dashติดตั้งการพึ่งพา :
pnpm install
# or
npm installรันเซิร์ฟเวอร์การพัฒนา :
pnpm run dev
# or
npm run dev เปิดเบราว์เซอร์ของคุณแล้วไปที่ 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
| เส้นทาง | ชื่อเพจ | คำอธิบาย |
|---|---|---|
/ | หน้าหลัก | หน้า Landing Page หลักของแดชบอร์ดผู้ดูแลระบบ |
/login | หน้าเข้าสู่ระบบ | อนุญาตให้ผู้ใช้เข้าสู่ระบบเพื่อเข้าถึงแดชบอร์ดของผู้ดูแลระบบ |
/register | หน้าลงทะเบียน | ช่วยให้ผู้ใช้ใหม่สามารถสร้างบัญชีได้ |
/contact | ติดต่อเพจ | แสดงแบบฟอร์มให้ผู้ใช้ติดต่อขอความช่วยเหลือหรือสอบถามข้อมูล |
/invoice | หน้าใบแจ้งหนี้ | แสดงรายการใบแจ้งหนี้หรือรายละเอียดสำหรับบันทึกทางการเงิน |
/todo | หน้าแอปสิ่งที่ต้องทำ | หน้าสำหรับจัดการและติดตามงานในรูปแบบรายการสิ่งที่ต้องทำ |
/products | หน้าสินค้า | เพจสำหรับจัดการข้อมูลผลิตภัณฑ์รวมทั้งรายละเอียดและราคา |
/order-lists | หน้ารายการสั่งซื้อ | แสดงรายการคำสั่งซื้อของลูกค้าทั้งหมดพร้อมตัวเลือกในการดูและจัดการ |
/product-stock | หน้าสต๊อกสินค้า | แสดงระดับสต็อกปัจจุบันและตัวเลือกการจัดการสินค้าคงคลัง |
/settings | หน้าการตั้งค่า | อนุญาตให้ผู้ใช้จัดการการตั้งค่าระบบและการตั้งค่าส่วนบุคคล |
/team | เพจทีม | แสดงตัวเลือกการจัดการสมาชิกในทีม บทบาท และสิทธิ์ |
แก้ไขไฟล์ tailwind.config.js เพื่อปรับแต่งธีม ขยายสไตล์ หรือเพิ่มปลั๊กอิน
ส่วนประกอบทั้งหมดอยู่ในไดเร็กทอรี components/ ภายในไดเร็กทอรี features/(domain)/ สร้างส่วนประกอบใหม่หรือขยายส่วนประกอบที่มีอยู่เพื่อให้เหมาะกับความต้องการของโครงการของคุณ
เพิ่มหรือแก้ไขไฟล์ใน pages/ ไดเร็กทอรีเพื่อสร้างเส้นทางใหม่แบบไดนามิก
คุณสามารถรวมบริการการตรวจสอบสิทธิ์ใดๆ ก็ได้ (เช่น Firebase, Auth0 หรือ JWT แบบกำหนดเอง) โดยใช้มิดเดิลแวร์และปลั๊กอินของ Nuxt โปรดดูโมดูลการตรวจสอบสิทธิ์ Nuxt.js สำหรับรายละเอียดเพิ่มเติม
ใช้เส้นทางเซิร์ฟเวอร์ของ Nuxt หรือการเรียก API ภายนอกใน pages/ หรือ composables/ ไดเร็กทอรี เรียนรู้เพิ่มเติมเกี่ยวกับการจัดการ Nuxt.js API ที่นี่
ติดตั้งและกำหนดค่า Vitest สำหรับหน่วยที่ทดสอบส่วนประกอบ Vue ของคุณ
ใช้ Cypress หรือ Playwright สำหรับการทดสอบแบบ end-to-end
การสร้างไซต์แบบคงที่ (SSG) :
pnpm run generate ปรับใช้ไฟล์ที่สร้างขึ้นจาก dist/ โฟลเดอร์ไปยังผู้ให้บริการโฮสต์แบบคงที่ (เช่น Netlify, Vercel)
การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) :
pnpm run build
pnpm run startปรับใช้แอปพลิเคชันกับโฮสติ้ง Node.js (เช่น AWS, Heroku หรือ DigitalOcean)
หากคุณพบปัญหาใดๆ มีคำถาม หรือต้องการขอคุณสมบัติหรือเพจใหม่ โปรดอย่าลังเลที่จะเปิดปัญหาหรือติดต่อไปที่ [email protected]
ยินดีบริจาค! โปรดทำตามขั้นตอนเหล่านี้:
git checkout -b feature-name )git commit -m "Add feature" )git push origin feature-name )โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT
