sprucecss root admin template

พื้นที่เก็บข้อมูลนี้มีเทมเพลตแบบคงที่ของผู้ดูแลระบบ Laravel ของเราชื่อ Root

เทมเพลตนี้สร้างขึ้นด้วย Eleventy เพื่อความมีสติและการจัดการที่ง่ายขึ้น คุณสามารถดึงเนื้อหาจากไฟล์เทมเพลต Nunjucks หรือโฟลเดอร์ dist ที่คอมไพล์แล้ว

เทมเพลตอาจจะมีการเปลี่ยนแปลงเป็นประจำในอนาคตเนื่องจากการพัฒนาแพ็คเกจ Laravel

สิ่งที่คุณได้รับ

เราใช้ Alpine.js เพื่อจัดการโค้ด JS แม้ว่าจะมีพฤติกรรม JS ค่อนข้างสมบูรณ์ แต่เทมเพลตนี้ยังคงเป็น HTML/CSS แบบคงที่ ดังนั้นคุณต้องทำส่วนที่โต้ตอบได้

ตอนนี้คุณสามารถคว้ามุมมองหรือเค้าโครงต่อไปนี้:

• แดชบอร์ด
• รายการสินค้า
• รายการสั่งซื้อ
• รายชื่อลูกค้า
• รายการหมวดหมู่
• แก้ไขรายการ
• มุมมองรายการ
• การตั้งค่า
• เข้าสู่ระบบ
• ลงทะเบียน
• รีเซ็ตรหัสผ่าน

มีองค์ประกอบเฉพาะของผู้ดูแลระบบมากมาย:

• หน้าต่าง Modal พร้อมการปรับแต่ง
• บล็อกตารางข้อมูลพร้อมการสนับสนุนการค้นหาและตัวกรอง
• ค้นหาง่าย
• เมนูแบบเลื่อนลงต่างๆ
• การ์ดวิดเจ็ต
• โมดอลตัวจัดการสื่อ
• คอมโบบ็อกซ์

ลุกขึ้นและวิ่ง

เราใช้ eleventy --serve และคอมไพล์ Sass ด้วย sass-cli พร้อมสคริปต์ npm

1. โคลนพื้นที่เก็บข้อมูล

2. ติดตั้งการพึ่งพา

   ในไฟล์ package.json คุณจะพบการขึ้นต่อกันทั้งหมด (และสคริปต์) เพื่อติดตั้งโดยใช้คำสั่งต่อไปนี้:

   npm install

3. เรียกใช้โหมดการพัฒนา

   หากต้องการรันโหมดการพัฒนา ให้ใช้ npm script สคริปต์นี้จะคอยดูการเปลี่ยนแปลงด้วย

   npm start

4. เรียกใช้โหมดการผลิต

   ก่อนที่คุณจะถ่ายทอดสด คุณควรใช้สคริปต์การผลิตเพื่อบีบอัดไฟล์ Sass

   npm run prod

สสส

โปรเจ็กต์รวบรวมไฟล์ SCSS จากโฟลเดอร์ ./src/scss ลงในโฟลเดอร์ ./src/css โปรเจ็กต์นี้ประกอบด้วย Spruce CSS ซึ่งให้สไตล์กับส่วนประกอบ Spruce UI บางส่วน

สคริปต์อื่น ๆ

• sass:lint/sass:lint:fix คุณสามารถlint ไฟล์ SCSS ของคุณด้วยการตั้งค่าล่วงหน้า Stylelint และ stylelint-config-sass-guidelines ด้วยคำสั่ง npm run sass:lint ใช้คำสั่ง npm run sass:lint:fix หากคุณต้องการการแก้ไขอัตโนมัติ

• js:lint/js:lint:fix คุณสามารถ lint JS ของคุณเหมือนกับ Sass ได้ สำหรับกฎเกณฑ์ เราใช้ค่าที่ตั้งล่วงหน้าของ Airbnb

ใบอนุญาต

รหัสนี้ได้รับอนุญาตภายใต้ MIT