เริ่มต้นโปรเจคกับ electornjs + vuejs
19 มิ.ย. 67 , 05:02
อักษร และอักขระพิเศษ

หลังจากหาวิธีทำอยู่ตั้งนาน ลองนู่นลองนี่ ปรากฏว่า มันมี template ให้ใช้ สั่งสร้างโปรเจคด้วย template ตัวนี้ ได้ครบทุกอย่างที่ต้องการ เซงเบย เสียเวลาไปงมเองทีละอย่างตั้งนาน เริ่มต้นด้วยคำสั่งนี้เลยครับ (สมมุติว่า เราลง พวก vue-cli เรียบร้อยแล้ว นะ)

มันจะถามคำถามสุขภาพ 4-5 ข้อ

จุดสำคัญๆ นอกจากพวกชื่อโปรเจคแล้ว มีประมาณนี้ครับ

Scss - โอเค ใช้มันซะครับ แล้วโลกของ CSS คุณจะเปลี่ยนไป
Plugin - อันนี้ของหลักๆ ที่เราจะใช้ (ซึ่ง ก็ใช้หมดนั่นล่ะ)
axios - สำหรับใช้ในการติดต่อ backend ผ่าน http
vue-electron - ใช้สำหรับสร้างแอฟ electron (คือไม่เลือกอันนี้ก็ไม่รู้จะ ใช้ template นี้ทำไมนะ)
vue-router - จัดการ router
vuex - จัดการ state
ESLint - อันนี้มันจะตรวจ มาตราฐานการเขียนโค้ดเรา ว่าถูกรูปแบบรึเปล่า ซึ่งผมเลือกใช้ แบบ standard นะครับ (ไม่ค่อยชอบ airbnb เท่าไร จองห้องแล้วไม่ค่อยว่างตรงกันเลย) ซึ่ง ตัวตรวจโค้ดอันนี้ บันเทิงมาก เพราะ เราวรรคผิดแค่อันเดียว โค้ดก็พังไปเลย สะใจดี
Karma + Mocha - ก็เรื่อง unit test ทั่วไป ซึ่งจริงๆ จะเขียนแอฟ ก็ควรทำ test
build tool - อันนี้มีแยกเป็น 2 แบบ สะดวกคนละแบบ คือ
electron-builder - จะสร้างเป็นตัว Setup ขึ้นมาให้เอาไปใช้ แถมมีตัว Check Update แถมมาให้ด้วยอีก แจ่มโครต
electron-packager - จะเป็นตัวสร้าง .exe ให้ เวลาจะเอาไปใช้ ก็แค่ก็อปไฟล์ ไปเปิด

สุดท้ายพอได้ครบแล้ว เราก็สั่ง

ก็จะได้หน้าตาแบบนี้ขึ้นมาครับ



ซึ่งตัวแอฟ ที่เห็นนี้ เป็นแบบ Hot Reload ด้วยนะครับ เขียนโค้ดกันได้สนุกสุดๆ

จบครับ ไว้มีต่อเรื่องถัดไป