วิธีการ ติดตั้ง vue.js สำหรับผู้เริ่มต้น หัดเขียน สอนติดตั้ง

[bolue]

วิธีการ ติดตั้ง vue.js และวิธีการติดตั้ง css ของ vuetify เพื่อทำงานควบคู่กัน ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม

1. เปิด cmd แล้วพิมหรือ copy คำว่า

Code: Select all

npm install -g @vue/cli

มาใส่ เพื่อทำการติดตั้ง

1.JPG (15.99 KiB) Viewed 253 times

2. ทำการเลือกว่าจะเก็บ โปรเจค ไว้ที่ไหน เราจะเลือกเก็บไว้ที่ drive d นะคะ

2.JPG (15.56 KiB) Viewed 253 times

3.ทำการสร้างโปรเจคด้วยคำว่า

Code: Select all

vue create nameproject

เราจะใช้ชื่อว่า lue

3.JPG (16.74 KiB) Viewed 253 times

4. เลือกเป็น

Code: Select all

Manually select features

4.JPG (17.92 KiB) Viewed 253 times

5.เลือกตามที่ตัวเองต้องการ แต่เราจะใช้ทั้งหมด 4 ตัว

5.JPG (23.61 KiB) Viewed 253 times

6.พิมพ์

Code: Select all

 Y

6.JPG (23.51 KiB) Viewed 253 times

7.

Code: Select all

เลือกESLint + Standard config

7.JPG (30.77 KiB) Viewed 253 times

8.เลือก

Code: Select all

 Lint on save

8.JPG (33.42 KiB) Viewed 253 times

9. เลือก

Code: Select all

In package. Json

9.JPG (36.98 KiB) Viewed 253 times

10. พิมพ์

Code: Select all

N

10.JPG (38.72 KiB) Viewed 253 times

11.Create Project เสร็จสิ้น ให้ทำการ เข้าสู่โฟล์เดอร์โปรเจคและทำการรันทดสอบ

Code: Select all

 Project -> cd lue -> npm run serve

11.JPG (39.98 KiB) Viewed 253 times

ผลลัพธ์ : -ttp://localhost:8080/

Jquery & Ajax Knowledge-1.png (41.32 KiB) Viewed 253 times

หลังจากนั้นให้ทำการ

Code: Select all

vue add vuetify

13.JPG (17.63 KiB) Viewed 253 times

เลือก

Code: Select all

Default (recommended)

14.JPG (32.92 KiB) Viewed 253 times

ผลลัพธ์ :

สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify viewtopic.php?f=73&t=67912