รับเขียนโปรแกรม สร้างโปรเจค NUXT JS

รับเขียนโปรแกรม

สร้างโปรเจค NUXT JS

มาเตรียมความพร้อมก่อนจะเริ่มสร้างโปรเจคแรกกันครับ

สิ่งที่ต้องเตรียม

     – เตรียมตัวเตรียมใจพักผ่อนให้เพียงพอ ให้พร้อมกับการทำงานของเรา

     – คอมพิวเตอร์ที่เราจะใช้ในการทำงานจะเป็น OS ไหนก็ได้ ม่อนใช้เป็น Macbook

     – Code editor ที่ใช้ในการรับเขียนโปรแกรม ม่อนใช้เป็น VS Code ลงปลั๊กอินให้พร้อม สำปรับใครมี่ไม่รู้ว่าต้องติดตั้งปลั๊กอินไหนบ้าง EP หน้าม่อน จะบอกวิธีการติดตั้ง และ ปลั๊กอินที่ม่อนใช้ในการทำงานนะครับ

      ปลา ลิง : เพื่อนติดตั้ง Yarn กันด้วยนะครับ เราจะ yarn เป็น package manager หลักครับ สำหรับลิงค์ดาวโหลด : https://classic.yarnpkg.com/en/docs/install/#mac-stable

เตรียมพร้อมกันครบหมดแล้วใช้มั๊ยครับ จะเริ่มแล้วนะ

เปิด VS Code ขึ้นมาเลยครับ

เมื่อเปิด VS code ขึ้นมาแล้วให้ใช้ Terminal ของ VS Code ใส่ คำสั่งที่จะให้ด้านล้างลงไปได้เลยนะครับ

yarn create nuxt-app <project-name>

<project-name> เปลี่ยนเป็นชื่อ โปรเจคของเพื่อนๆนะครับ

เมื่อใส่คำสั่งไปแล้วจะได้หน้าตาเหมือนในรูปด้านล่างนะครับ ใครไม่ได้แบบนี้ แสดงว่าเพื่อนๆใส่ข้อมูลอะไรไม่ถูกนะครับสักอย่างนะครับ ลองตรวจสอบ และใส่คำสั่งอีกครั้งนะครับ ในส่วนนี้หากเพื่อนๆ เกิดปิ๊งชื่อโปรเจคใหม่ยังสามารถ แก้ไขโดยการพิมพ์ชื่อ ใหม่ได้เลยครับ ในที่นี้ผมชอบชื่อ imon เป็นชื่อโปรเจคแล้ว จากนั้นก็ Enter ได้เลยครับ

 

ต่อมาเลือก Javascript นะครับ เพราะม่อนถนัดกว่าใช้ Typescript ใครเป็นสาย Typescript ก็ให้เลือกเป็น Typescript นะครับ

 

Package manager เลือกใช้เป็น Yarn นะครับ

 

UI Framework ม่อนเลือกใช้เป็น vuetify นะครับ เพื่อนๆสามารถเลือกได้ตามที่เพื่อนๆถนัดเลยนะครับผม วิธีการเลือกคือให้ใช้ปุ่มลูกศร เลื่อนขึ้น เลื่อนลง ไปยัง ตัวที่เพื่อนๆเลือก หลังจากนั้น กด Enter เหมือนเดิมนะครับ

 

ในส่วนนี้ม่อนเลือกใช้เป็น Axios นะครับ ใช้ปุ่ม Spacer bar เลือกตามได้เลยนะครับ

 

เลือกใช้เป็น ESLint ตามผมได้เลยนะครับ กด Space bar เลือกเหมือนเดิมนะครับ

 

ใน EP นี้ยังไม่มีเรื่องของการทำในส่วนของ Test ม่อนจะขอเลือกเป็น None นะครับ

 

ใช้เป็น SSR นะครับ

 

ม่อนใช้เป็น Server Node.js hosting

 

เลือก jsconfig.json เหมือนในรูปด้านล่างได้เลยครับ

 

เลือก None ครับ

 

Version controls ม่อนใช้เป็น Git ครับ

 


 

รอระบบสร้างโปรเจคให้เรา

กระพริบตา 3 ที เสร็จเลยครับ ไม่นานเลยใช่มั๊ยครับ

เมื่อขึ้นแบบผมแล้วเป็นอันเสร็จครับ เรามาลองรันโปรเจคกันดีกว่าครับ

ใช้ Command :

       cd < project name > 

เพื่อเข้าไปยัง Folder ของโปรเจคเราครับ

จากนั้นใช้ Command :

       yarn dev

เสร็จแล้ว

มาลองดูกันดีกว่า เข้าไปที่ http://localhost:3000/

สอนใช้Google Search Console

ติดต่อ-สอบถาม