Tic Tac Vue
1.0.0
TIC-TAC-VUE เป็นแอปพลิเคชันหน้าเดียว JavaScript (SPA) ที่เขียนด้วย Vue, Vuex และ Vue เราเตอร์ เป้าหมายของมันคือการเป็น "กรณีศึกษา" สำหรับผู้เริ่มต้นที่ต้องการเรียนรู้ Vue และระบบนิเวศที่ทรงพลัง
คลิกที่นี่เพื่อลองเวอร์ชันตัวอย่างออนไลน์
ในโครงการนี้ฉันใช้สองวิธีเพื่อให้มีรหัสที่ดีกว่าและไฟล์แหล่งที่มาที่เป็นระเบียบ: BEM และการออกแบบอะตอม
BEM (ซึ่งหมายถึงตัวดัดแปลงองค์ประกอบบล็อก) เป็นวิธีการที่ช่วยให้คุณสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้ในการพัฒนาส่วนหน้า ทุกอย่างเกี่ยวกับการแยกคลาส CSS ของคุณโดยใช้ บล็อก องค์ประกอบ และ ตัวดัดแปลง DOM สุดท้ายอาจเป็น verbose แต่คุณจะมีซอร์สโค้ดที่ดีกว่าและเนื่องจากคุณไม่จำเป็นต้องทำรัง CSS, ชุด CSS ของคุณจะส่งผลหนักน้อยลง
คลิกที่นี่หากคุณต้องการลึกลงไปใน BEM
การออกแบบอะตอม เป็นวิธีการในการสร้างระบบการออกแบบ ในทำนองเดียวกันกับเคมีคุณสามารถจัดระเบียบไฟล์ส่วนประกอบของคุณ (ในสถานการณ์นี้ Vue ส่วนประกอบไฟล์เดียว) โดยใช้ อะตอม โมเลกุล และ สิ่งมีชีวิต
อะตอมเป็นหน่วยการสร้างพื้นฐานของสสาร นำไปใช้กับอินเตอร์เฟสเว็บอะตอมเป็นแท็ก HTML ของเราเช่นฉลากฟอร์ม, อินพุตหรือปุ่ม
โมเลกุลเป็นกลุ่มของอะตอมที่ถูกผูกมัดเข้าด้วยกันและเป็นหน่วยพื้นฐานที่เล็กที่สุดของสารประกอบ
สิ่งมีชีวิตเป็นกลุ่มของโมเลกุลที่รวมเข้าด้วยกันเพื่อสร้างส่วนที่ค่อนข้างซับซ้อนและแตกต่างกันของอินเทอร์เฟซ
ก่อนอื่นฉันขอแนะนำให้คุณดูเอกสาร Vue โดยเฉพาะอย่างยิ่ง:
คุณสามารถติดตั้ง tic-tac-vue cloning โครงการ:
git clone https://github.com/Sanfra1407/tic-tac-vue.git
จากนั้นติดตั้งการพึ่งพา NPM:
npm install
เนื่องจากโครงการนี้ได้รับการพัฒนาด้วย Vite.js คุณสามารถใช้คำสั่ง CLI แบบบูรณาการของตัวเองเพื่อให้บริการสร้างหรือมีตัวอย่างของแอปพลิเคชัน
npm run dev
npm run build
npm run preview
npm run lint
ในการปรับใช้แอปพลิเคชันของคุณคุณสามารถทำตามคู่มือ Vite.js อย่างเป็นทางการ
