egg typescript element kit

egg-typescript-element-kit

อิงจาก Egg + TypeScript + Element + Webpack3 แบบหลายเพจและเพจเดียวฝั่งเซิร์ฟเวอร์ เรนเดอร์โครงการทางวิศวกรรมที่สมบูรณ์แบบ isomorphic

• ระบบแผนกต้อนรับ: http://localhost:7001

• ระบบแบ็กเอนด์: http://localhost:7001/admin

1. การแนะนำโครงการ

รุ่นปลั๊กอิน

• ไข่: ^2.xx
• โหนด: โหนด ^8.x.x+,
• เว็บแพ็ค^4.xx
• วิว: ^2.5.0
• ประเภทสคริปต์: ^2.6.2
• UI องค์ประกอบ: ^2.0.0
• easywebpack-vue.php
• egg-view-vue-ssr
• ไข่-webpack
• ไข่-webpack-vue

ลักษณะโครงการ

• รองรับโค้ดด้านข้างของ Egg Node และการเขียนและสร้าง TypeScript โค้ดส่วนหน้า

• สนับสนุนพนักงานบริการก่อสร้างอัตโนมัติ

• รองรับคุณสมบัติ async และ await คอนโทรลเลอร์ถูกเขียนในโหมดคลาส

• รองรับการแก้ไขโค้ดเซิร์ฟเวอร์และไคลเอ็นต์, การคอมไพล์แบบเรียลไทม์ของ Webpack และการอัปเดตแบบด่วน, การเริ่มต้นแอปพลิเคชัน npm run dev ด้วยคลิกเดียว

• อิงตาม vue + vuex + vue-router + axios การนำ isomorphic ของไคลเอ็นต์เซิร์ฟเวอร์หน้าเดียวไปใช้

• รองรับสภาพแวดล้อมการพัฒนา สภาพแวดล้อมการทดสอบ และการรวบรวม Webpack สภาพแวดล้อมอย่างเป็นทางการ

• รองรับการพึ่งพาทรัพยากร js/css/image รองรับคุณสมบัติ CDN ในตัว

• รองรับการสร้างอัตโนมัติของ Webpack DLL

• รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์คอมโพเนนต์ Vue และการโหลดแบบอะซิงโครนัส

2. ฟังก์ชั่นระบบ

ระบบบล็อกแผนกต้อนรับ

การใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ Egg + Vue

• หน้าแรกของบล็อก
• แสดงรายการบทความในบล็อก
• หน้ารายละเอียดบทความในบล็อก
• การเรียกดูหมวดหมู่บล็อก

ระบบการจัดการแบ็กเอนด์

การใช้ Egg + Vue + Vue-Router + Element การเรนเดอร์ isomorphic ฝั่งเซิร์ฟเวอร์หน้าเดียว

• เข้าสู่ระบบของผู้ใช้
• การลงทะเบียนผู้ใช้
• แดชบอร์ด
• การจัดการบทความ
• Markdown เพิ่มบทความ
• การจัดการสิทธิ์

3. การใช้งาน

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

npm install
npm start

3.2 เริ่มแอปพลิเคชัน

npm run dev

การเข้าถึงแอปพลิเคชัน: http://127.0.0.1:7001

3.3 โครงสร้าง

• การสร้างไข่ TypeScript

npm run tsc

• การสร้างโครงการส่วนหน้า TypeScript

npm run tsc

3.4 การใช้งานแพ็คเกจ

1. รันครั้งแรก npm run build เพื่อสร้างโค้ด TypeScript Egg และโค้ดส่วนหน้าของ TypeScript
2. รหัสโปรเจ็กต์และโค้ดบิลด์ถูกรวมเข้าด้วยกัน
3. หลังจากปรับใช้แอปพลิเคชันแล้ว ให้เริ่มแอปพลิเคชันจนถึงเวลา npm start

4. เอกสารประกอบ

• http://hubcarl.github.io/easywebpack/vue/rule
• https://zhuanlan.zhihu.com/easywebpack

5. ข้อมูลอ้างอิง

• vue องค์ประกอบผู้ดูแลระบบ

ใบอนุญาต

เอ็มไอที