sakai vue cli

เทมเพลตผู้ดูแลระบบ Sakai สำหรับ Vue

ดูตัวอย่างสด

เยี่ยมชมเว็บไซต์ Sakai Vue เพื่อดูตัวอย่างสด

เริ่มต้นใช้งาน

Sakai เป็นเทมเพลตแอปพลิเคชันสำหรับ Vue ที่ใช้ Vue CLI ที่ให้เครื่องมือมาตรฐานที่พร้อมใช้งานทันทีสำหรับโปรเจ็กต์ Vue ในการเริ่มต้น ให้โคลนพื้นที่เก็บข้อมูลนี้จาก GitHub และติดตั้งการขึ้นต่อกันด้วย npm หรือเส้นด้าย

 npm install

หรือ

 yarn

ขั้นตอนต่อไปคือการเรียกใช้แอปพลิเคชันโดยใช้สคริปต์เสิร์ฟและไปที่ http://localhost:8080/ เพื่อดูแอปพลิเคชัน เพียงเท่านี้ คุณก็สามารถเริ่มต้นด้วยการพัฒนาแอปพลิเคชันของคุณโดยใช้เทมเพลต Sakai

 npm run serve

สคริปต์ Vue CLI

คำสั่งต่อไปนี้ได้มาจาก create-app-app

 "npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.

โครงสร้าง

ซาไกประกอบด้วย 2 ส่วนหลักคือ เค้าโครงแอปพลิเคชันและทรัพยากร App.vue ภายในโฟลเดอร์ src เป็นองค์ประกอบหลักที่มีเทมเพลตสำหรับโครงร่างพื้นฐาน ในขณะที่ทรัพยากรที่จำเป็น เช่น โครงสร้าง SASS สำหรับโครงร่างจะอยู่ภายในโฟลเดอร์ src/assets/

ส่วนประกอบเค้าโครง

เลย์เอาต์หลักคือเทมเพลตของ App.vue ซึ่งแบ่งออกเป็นคอมโพเนนต์ย่อยสองสามรายการ เช่น แถบด้านบน เมนู และส่วนท้าย นี่คือเทมเพลตของส่วนประกอบ App.vue ที่ใช้ตรรกะ เช่น สถานะเมนู โหมดเค้าโครง และอื่นๆ

เมนู

Menu เป็นองค์ประกอบแยกต่างหากที่กำหนดไว้ในไฟล์ AppMenu.vue โดยอิงตาม PrimeVue MenuModel API เพื่อกำหนดรายการเมนู ให้ไปที่ส่วนข้อมูลของไฟล์ App.vue และกำหนดโมเดลของคุณเองเป็นโครงสร้างแบบซ้อนโดยใช้คุณสมบัติ เมนู

การพึ่งพาอาศัยกัน

การขึ้นต่อกันของ Sakai แสดงอยู่ด้านล่างและจำเป็นต้องเพิ่มลงใน package.json

{
    "primevue" : " ~3.12.2 " ,
    "primeicons" : " ~5.0.0 " ,
    "primeflex" : " ~3.1.2 " ,
}

ธีม PrimeVue

Sakai ใช้ธีม Saga, Arya และ Vela ฟรีซึ่งเผยแพร่ภายใน PrimeVue อย่างไรก็ตาม สามารถใช้ได้กับธีม PrimeVue ใดๆ ได้ เช่นเดียวกับวัสดุ, tailwind และ bootstrap เนื่องจากสีโครงร่างได้มาจากธีมที่ใช้ผ่านตัวแปร CSS

ตัวแปร SASS

ในกรณีที่คุณต้องการปรับแต่งตัวแปรเลย์เอาต์ ให้เปิดไฟล์ _variables.scss ใต้โฟลเดอร์ src/layout รายการค่อนข้างสั้นเนื่องจากตัวแปรส่วนใหญ่ได้มาจากธีม PrimeVue ที่ใช้งานอยู่

src/assets/_variables.scss

$fontSize : 1rem;
$b or derRadius : 12px;
$transitionDuration : .2s;