เริ่มต้นโปรเจคกับ electornjs + vuejs

A
<h2>เริ่มต้น</h2> <p>หลังจากหาวิธีทำอยู่ตั้งนาน ลองนู่นลองนี่ ปรากฏว่า มันมี template ให้ใช้ สั่งสร้างโปรเจคด้วย template ตัวนี้ ได้ครบทุกอย่างที่ต้องการ เซงเบย เสียเวลาไปงมเองทีละอย่างตั้งนาน เริ่มต้นด้วยคำสั่งนี้เลยครับ (สมมุติว่า เราลง พวก vue-cli เรียบร้อยแล้ว นะ)</p> <pre class="language-bash"><code>vue init simulatedgreg/electron-vue my-project</code></pre> <p>มันจะถามคำถามสุขภาพ 4-5 ข้อ</p> <pre class="language-bash"><code>? Application Name ... ? Application Id com.un-no.... ? Application Version 0.0.1 ? Project description ... ? Use Sass / Scss? Yes ? Select which Vue plugins to install axios, vue-electron, vue-router, vuex ? Use linting with ESLint? Yes ? Which ESLint config would you like to use? Standard ? Set up unit testing with Karma + Mocha? Yes ? Set up end-to-end testing with Spectron + Mocha? Yes ? What build tool would you like to use? builder ? author EK &lt;service@un-no.com&gt;</code></pre> <p>จุดสำคัญๆ นอกจากพวกชื่อโปรเจคแล้ว มีประมาณนี้ครับ</p> <ul> <li>Scss - โอเค ใช้มันซะครับ แล้วโลกของ CSS คุณจะเปลี่ยนไป</li> <li>Plugin - อันนี้ของหลัๆ ที่เราจะใช้ (ซึ่ง ก็ใช้หมดนั่นล่ะ) <ul> <li>axios - สำหรับใช้ในการติดต่อ backend ผ่าน http</li> <li>vue-electron - ใช้สำหรับสร้างแอฟ electron (คือไม่เลือกอันนี้ก็ไม่รู้จะ ใช้ template นี้ทำไมนะ)</li> <li>vue-router - จัดการ router</li> <li>vuex - จัดการ state</li> </ul> </li> <li>ESLint - อันนี้มันจะตรวจ มาตราฐานการเขียนโค้ดเรา ว่าถูกรูปแบบรึเปล่า ซึ่งผมเลือกใช้ แบบ standard นะครับ (ไม่ค่อยชอบ airbnb เท่าไร จองห้องแล้วไม่ค่อยว่างตรงกันเลย) ซึ่ง ตัวตรวจโค้ดอันนี้ บันเทิงมาก เพราะ เราวรรคผิดแค่อันเดียว โค้ดก็พังไปเลย สะใจดี</li> <li>Karma + Mocha - ก็เรื่อง unit test ทั่วไป ซึ่งจริงๆ จะเขียนแอฟ ก็ควรทำ test</li> <li>build tool - อันนี้มีแยกเป็น 2 แบบ สะดวกคนละแบบ คือ <ul> <li>electron-builder - จะสร้างเป็นตัว Setup ขึ้นมาให้เอาไปใช้ แถมมีตัว Check Update แถมมาให้ด้วยอีก แจ่มโครต</li> <li>electron-packager - จะเป็นตัวสร้าง .exe ให้ เวลาจะเอาไปใช้ ก็แค่ก็อปไฟล์ ไปเปิด</li> </ul> </li> </ul> <p>สุดท้ายพอได้ครบแล้ว เราก็สั่ง</p> <pre class="language-bash"><code>npm install npm run dev</code></pre> <p>ก็จะได้หน้าตาแบบนี้ขึ้นมาครับ</p> <p><img src="/usercontents/image/NVZuaExnWHpTY1FvZUdndjZETklzRU1BY0ZhaFNrUXM4ZmZlV1ZpNXVuazE4S2t5L2tEd05jdGYzMjZHcHZZNTBoNTFlT0hTV0MyY1FkTmptMU9Wb0E9PQ,," /></p> <p>ซึ่งตัวแอฟ ที่เห็นนี้ เป็นแบบ Hot Reload ด้วยนะครับ เขียนโค้ดกันได้สนุกสุดๆ</p> <p>จบครับ ไว้มีต่อเรื่องถัดไป</p>
INFO
Beta Version v20.12.15 : ขออภัยเว็บกำลังก่อสร้าง (อีกแล้ว) แต่คราวนี้กำลังสร้างจริงจังละ