Celeris Web เป็นเฟรมเวิร์กการพัฒนาฟรอนต์เอนด์แบบโอเพ่นซอร์สฟรีที่ใช้เทคโนโลยีล่าสุด รวมถึง Vue 3, Vite และ TypeScript แนวทาง monorepo ทำให้ง่ายต่อการจัดการการพึ่งพาและทำงานร่วมกันในหลายโครงการ ทำให้นักพัฒนามีโซลูชันที่ครอบคลุมสำหรับการสร้างแอปพลิเคชันเว็บที่ทันสมัย
ไม่ว่าคุณจะเป็นนักพัฒนาที่มีประสบการณ์หรือเพิ่งเริ่มต้น Celeris Web นำเสนอกระบวนการพัฒนาส่วนหน้าที่มีประสิทธิภาพซึ่งใช้ประโยชน์จากเครื่องมือและเทคนิคล่าสุด
เริ่มต้นกับ celeris-web วันนี้และสัมผัสกับกระบวนการพัฒนาส่วนหน้าที่มีความคล่องตัวสูง ซึ่งควบคุมพลังของเทคโนโลยีล่าสุด รวมถึงความสามารถในการประมวลผลภาษาธรรมชาติที่ล้ำสมัย
กราฟ TD
ผู้ดูแลระบบ{ผู้ดูแลระบบ}
ผู้ดูแลระบบ -> ผู้ดูแลระบบ-api
ผู้ดูแลระบบ -> สินทรัพย์
ผู้ดูแลระบบ -> ส่วนประกอบ CA
ผู้ดูแลระบบ -> ส่วนประกอบ
ผู้ดูแลระบบ -> ค่าคงที่
ผู้ดูแลระบบ -> คำสั่ง
ผู้ดูแลระบบ -> ตะขอ
ผู้ดูแลระบบ -> สถานที่
ผู้ดูแลระบบ --> คำขอ
ผู้ดูแลระบบ -> สไตล์
ผู้ดูแลระบบ -> ประเภท
ผู้ดูแลระบบ -> ยูทิลิตี้
สินทรัพย์
ส่วนประกอบ
ส่วนประกอบ -> สินทรัพย์
ส่วนประกอบ -> ส่วนประกอบ CA
ส่วนประกอบ -> ค่าคงที่
ส่วนประกอบ -> สไตล์
ส่วนประกอบ -> ประเภท
ส่วนประกอบ -> ประโยชน์
ส่วนประกอบ CA
ส่วนประกอบ ca -> ค่าคงที่
ส่วนประกอบ ca -> utils
คำสั่ง
คำสั่ง -> ยูทิลิตี้
ตะขอ
ตะขอ -> ประเภท
สถานที่
สถานที่ --> ค่าคงที่
สถานที่ --> ประเภท
สถานที่ --> ยูทิลิตี้
ขอ
คำขอ -> ค่าคงที่
คำขอ -> สถานที่
คำขอ -> ประเภท
คำขอ -> ยูทิลิตี้
ประเภท
ประเภท -> ค่าคงที่
ยูทิลิตี้
ยูทิลิตี้ --> ประเภท
ผู้ดูแลระบบ API
admin-api -> ค่าคงที่
ผู้ดูแลระบบ-api -> ประเภท
หากต้องการอัปเดตไดอะแกรมด้านบน ให้แก้ไขไฟล์ README และเปิด PR ใหม่พร้อมการเปลี่ยนแปลง
ในการออกแบบ Celeris Web เราเน้นความสามารถในการอ่านและการเรียนรู้ของโค้ด เพื่อให้บรรลุเป้าหมายนี้ แต่ละฟังก์ชันจะมีความคิดเห็นแบบสองภาษาทั้งภาษาจีนและภาษาอังกฤษ เพื่อให้มั่นใจว่านักพัฒนา โดยไม่คำนึงถึงภาษาแม่ของตน สามารถเข้าใจและเรียนรู้จากโค้ดได้อย่างง่ายดาย
เหตุใดจึงเลือกความคิดเห็นแบบสองภาษา
การทำงานร่วมกันทั่วโลก: ในทีมที่มีความหลากหลายทางวัฒนธรรม ความคิดเห็นแบบสองภาษาส่งเสริมการสื่อสารและการทำงานร่วมกันที่ดีขึ้น ทำให้มั่นใจได้ว่าสมาชิกในทีมสามารถเข้าใจการทำงานและการนำโค้ดไปใช้ได้อย่างถูกต้อง
การเรียนรู้ที่สะดวก: สำหรับผู้เริ่มต้น ความคิดเห็นแบบสองภาษาจะมอบสภาพแวดล้อมการเรียนรู้ที่เป็นมิตรต่อผู้ใช้มากขึ้น ช่วยให้พวกเขาเข้าใจตรรกะและโครงสร้างของโค้ดได้อย่างรวดเร็ว
เป็นมิตรกับนักพัฒนา: เรามุ่งมั่นที่จะสร้างสภาพแวดล้อมที่เป็นมิตรต่อนักพัฒนา และความคิดเห็นแบบสองภาษาเป็นมาตรการสำคัญที่เราดำเนินการเพื่อให้บรรลุเป้าหมายนี้
ตัวอย่าง:
/**
* 打开一个新的浏览器窗口
* Open a new browser window
*
* @param {string} url - 要在新窗口中打开的 URL
* The URL to open in the new window
*
* @param {object} options - 打开窗口的选项
* Options for opening the window
* @param {string} options.target - 新窗口的名称或特殊选项,默认为 "_blank"
* @param {string} options.features - 新窗口的特性(大小,位置等),默认为 "noopener=yes,noreferrer=yes"
*/
export function openWindow ( url : string , { target = "_blank" , features = "noopener=yes,noreferrer=yes" } : {
target ?: "_blank" | "_self" | "_parent" | "_top" ; // 新窗口的名称或特殊选项,默认为 "_blank"
features ?: string ; // 新窗口的特性(大小,位置等),默认为 "noopener=yes,noreferrer=yes"
} = { } ) {
window . open ( url , target , features ) ;
}
เรามุ่งหวังที่จะมอบประสบการณ์การเขียนโค้ดที่สนุกสนานและมีประสิทธิภาพมากขึ้นผ่านความคิดเห็นสองภาษาเหล่านี้ ทำให้ Celeris Web เป็นเทมเพลตส่วนหน้าที่ง่ายต่อการหยิบใช้และเจาะลึก
1. การจัดการการพึ่งพาที่ง่ายขึ้น: Monorepo รวมศูนย์การจัดการการพึ่งพาสำหรับโปรเจ็กต์ทั้งหมด หลีกเลี่ยงความขัดแย้งของเวอร์ชันระหว่างโปรเจ็กต์ต่างๆ และทำให้การจัดการการพึ่งพาโดยรวมชัดเจนและง่ายขึ้น
2. การใช้โค้ดร่วมกันและการใช้ซ้ำ: โปรเจ็กต์ต่างๆ สามารถแชร์และนำโค้ดกลับมาใช้ใหม่ได้อย่างง่ายดาย ช่วยลดภาระงานในการพัฒนาที่ซ้ำซ้อน สิ่งนี้มีประโยชน์อย่างมากสำหรับการรักษาความสอดคล้องของโค้ดและปรับปรุงประสิทธิภาพการพัฒนา
3. การสร้างและการปรับใช้แบบครบวงจร: Monorepo ทำให้กระบวนการพัฒนาทั้งหมดง่ายขึ้นผ่านเวิร์กโฟลว์การสร้างและการปรับใช้แบบรวมศูนย์ ลดความซับซ้อนของการกำหนดค่าและการจัดการ และเพิ่มประสิทธิภาพการทำงานร่วมกันภายในทีมพัฒนา
4. การควบคุมเวอร์ชันแบบรวม: ด้วยโปรเจ็กต์ทั้งหมดในพื้นที่เก็บข้อมูลการควบคุมเวอร์ชันเดียวกัน การจัดการเวอร์ชันจะมีความสอดคล้องและควบคุมได้มากขึ้น สิ่งนี้ช่วยให้ทีมติดตามและจัดการปัญหาที่เกี่ยวข้องกับเวอร์ชันได้ดีขึ้น การออกแบบ Monorepo ไม่เพียงแต่วางตำแหน่ง Celeris Web ให้เป็นเทมเพลตระบบผู้ดูแลระบบเท่านั้น แต่ยังเป็นเทมเพลตเว็บส่วนหน้าสำหรับการพัฒนาผลิตภัณฑ์ C-end อย่างรวดเร็วอีกด้วย ด้วย Celeris Web การเดินทางของการพัฒนาส่วนหน้าจะผ่อนคลายและสนุกสนานยิ่งขึ้น!
ในตลาด เทมเพลตฟรอนต์เอนด์ส่วนใหญ่ตอบสนองความต้องการของผู้ใช้ B-end เป็นหลัก โดยมีฟีเจอร์ที่มีประสิทธิภาพและอินเทอร์เฟซที่ยืดหยุ่นสำหรับระบบการจัดการองค์กร (ผู้ดูแลระบบ) อย่างไรก็ตาม มีเทมเพลตเพียงไม่กี่เทมเพลตที่คำนึงถึงคุณลักษณะของผลิตภัณฑ์ C-end ในการออกแบบ และนี่คือจุดที่ Celeris Web สร้างสรรค์สิ่งใหม่ๆ
ทลายขีดจำกัดของการจัดการผู้ดูแลระบบ:
ระบบการจัดการผู้ดูแลระบบแบบเดิมให้ความสำคัญกับการแสดงข้อมูลและการจัดการธุรกิจ ในขณะที่ผลิตภัณฑ์ C-end เน้นประสบการณ์ผู้ใช้และความดึงดูดสายตา ด้วยการตระหนักถึงความต้องการของผู้ใช้ C-end ในด้านอินเทอร์เฟซที่สวยงามและการโต้ตอบที่ราบรื่น Celeris Web ไม่เพียงแต่นำเสนอคุณสมบัติการจัดการแบ็กเอนด์ที่แข็งแกร่งเท่านั้น แต่ยังมุ่งเน้นไปที่การยกระดับอินเทอร์เฟซฟรอนต์เอนด์ให้เป็นระดับความพึงพอใจของผู้ใช้ที่สูงขึ้นอีกด้วย
มุ่งเน้นไปที่ประสบการณ์ผู้ใช้ C-End:
Celeris Web ไม่ได้เป็นเพียงเทมเพลตสำหรับระบบผู้ดูแลระบบเท่านั้น เป็นเทมเพลตเว็บส่วนหน้าที่จัดลำดับความสำคัญของประสบการณ์ผู้ใช้สำหรับผลิตภัณฑ์ C-end เรามุ่งมั่นที่จะหลุดพ้นจากข้อจำกัดของระบบผู้ดูแลระบบแบบเดิมด้วยการแนะนำหลักการออกแบบที่เป็นนวัตกรรมใหม่ เพื่อให้มั่นใจว่าผลิตภัณฑ์ C-end ที่นำเสนอในส่วนหน้าจะมอบประสบการณ์ผู้ใช้ที่โดดเด่น
คุณสมบัติเด่น:
ด้วยปรัชญาการออกแบบที่เป็นเอกลักษณ์นี้ Celeris Web มุ่งมั่นที่จะสำรวจความเป็นไปได้ใหม่ ๆ ในการพัฒนาส่วนหน้า โดยเพิ่มความมีชีวิตชีวาและความคิดสร้างสรรค์ให้กับผลิตภัณฑ์ C-end เราเชื่อว่านวัตกรรมดังกล่าวจะได้รับการยอมรับจากผู้ใช้อย่างกว้างขวางและมีส่วนทำให้มูลค่าผลิตภัณฑ์สูงขึ้น ในโลกของ Celeris Web การพัฒนาส่วนหน้าอยู่เหนือขอบเขตของระบบผู้ดูแลระบบ โดยผสมผสานองค์ประกอบที่น่าตื่นเต้นที่เกี่ยวข้องกับประสบการณ์ผู้ใช้
สร้าง repo จากเทมเพลตนี้บน GitHub
npx degit kirklin/celeris-web my-vite-app
cd my-vite-app
pnpm i
เพียงเรียกใช้และไปที่ http://localhost:8888
pnpm run dev
หากต้องการสร้างแอป ให้เรียกใช้
pnpm run build
และคุณจะเห็นไฟล์ที่สร้างขึ้นใน dist
ซึ่งพร้อมที่จะให้บริการ
ไปที่ Netlify และเลือกโคลนของคุณ OK
ระหว่างทาง จากนั้นแอปของคุณจะใช้งานได้ภายในไม่กี่นาที
ขั้นแรก สร้างอิมเมจ celeris-web โดยเปิดเทอร์มินัลในไดเร็กทอรีรากของโปรเจ็กต์
docker buildx build . -t celeris-web:latest
รันอิมเมจและระบุการแมปพอร์ตด้วยแฟล็ก -p
docker run --rm -it -p 8080:80 celeris-web:latest