ดาวน์โหลด DncVueSample - ดาวน์โหลดซอร์สโค้ด DncVueSample

DncVueSample

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

เกี่ยวกับ DncVueSample

VncVueSample เปิดตัวโดย CodeDefault.com (https://codedefault.com) และให้การสนับสนุนการอัปเดต

ผู้แต่ง:อธิการบดี

ที่อยู่สาธิต: https://codedefault.github.io/DncVueSample/

DncVueSample: เป็นเทมเพลตระบบการจัดการแบ็คเอนด์ที่ใช้ Vue.js + เฟรมเวิร์กส่วนหน้า iview เหมาะสำหรับการพัฒนาระบบการจัดการแบ็คเอนด์ เช่น OA, CRM และ CMS

การแนะนำเทมเพลต

ข้อมูลเวอร์ชัน

ข้อมูลเวอร์ชันของส่วนประกอบที่ DncVueSample ขึ้นอยู่กับในปัจจุบันมีดังนี้:

Vue.js: 2.5.17 iview: 3.1.0

เค้าโครงและเมนู

เทมเพลตนี้จัดวางโดยมีเมนูทางด้านซ้ายและแผงการทำงานทางด้านขวา แผนผังเมนูด้านซ้ายรองรับเมนูสองระดับในขณะนี้ และแผนผังเมนูถูกกำหนดในรูปแบบ JSON รายการเมนูรองรับตัวเลือกต่างๆ เช่น การระบุไอคอน ที่อยู่ลิงก์เมนู และคุณลักษณะการกำหนดค่าโดยละเอียด เช่น:

 {
    title:"用户及授权",
    name:"1",
    icon:"logo-apple",
    menuItem:[
        {
            label:"用户管理",
            name:"1-1",
            href:"/account/user/list",
            icon:"logo-apple"
        },
        {
            label:"资源管理",
            name:"1-2",
            href:"/account/resource/list",
            icon:"logo-windows"
        },
        {
            label:"角色管理",
            name:"1-3",
            href:"/account/role/list",
            icon:"logo-tux"
        }
    ]
}

เมนูด้านซ้ายรองรับการยุบและขยาย เมื่อเมนูอยู่ในสถานะยุบ เฉพาะไอคอนของรายการเมนูเท่านั้นที่จะแสดง ซึ่งจะทำให้อินเทอร์เฟซการทำงานในแนวนอนของทั้งระบบกว้างขึ้นและเอฟเฟกต์การแสดงข้อมูลจะดีขึ้น

แท็บ

พื้นที่ดำเนินการทางด้านขวาคืออินเทอร์เฟซการดำเนินการแต่ละรายการที่เปิดด้วยแท็บ (iframe) และหน้าแท็บแต่ละหน้าเป็นหน้าที่แยกจากกัน

เมื่อคลิกแต่ละแท็บ เมนูด้านซ้ายจะติดตามไปยังเมนูที่เปิดอยู่ในปัจจุบันโดยอัตโนมัติ

เมื่อสลับแท็บ รองรับการสลับเอฟเฟกต์ภาพเคลื่อนไหว และประสบการณ์การมองเห็นก็ดีมาก

บทสรุป

DncVueSample เป็นเทมเพลตระบบการจัดการแบ็กเอนด์แบบคงที่ที่เรียบง่ายโดยใช้ Vue.js + iview มันเป็นเพียง UI ต้นแบบของเทมเพลตระบบการจัดการแบ็กเอนด์และไม่เกี่ยวข้องกับฟังก์ชันของระบบ อย่างไรก็ตาม ดังคำกล่าวที่ว่า "นกกระจอกมีขนาดเล็ก แต่มี" อวัยวะภายในทั้งหมด" เลือก DncVueSample เป็นเทมเพลต เทมเพลตเริ่มต้นของระบบการจัดการแบ็กเอนด์สามารถช่วยให้ผู้ใช้เริ่มสร้างเฟรมเวิร์ก UI ของโปรเจ็กต์ได้อย่างรวดเร็ว

หมายเหตุ: ปัจจุบัน DncVueSample ยังไม่ได้รับการปรับให้เข้ากับอุปกรณ์มือถือและเบราว์เซอร์รุ่นเก่าที่ต่ำกว่า IE10 ดังนั้นโปรดใช้เบราว์เซอร์รุ่นใหม่บนอุปกรณ์พีซีของคุณเพื่อดูตัวอย่างและใช้งาน