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

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25367
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย MBMoo »

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

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

โค้ด: เลือกทั้งหมด

npm install -g @vue/cli
มาใส่ เพื่อทำการติดตั้ง
1.JPG
1.JPG (15.99 KiB) Viewed 4275 times

2. ทำการเลือกว่าจะเก็บ โปรเจค ไว้ที่ไหน เราจะเลือกเก็บไว้ที่ drive d นะคะ
2.JPG
2.JPG (15.56 KiB) Viewed 4275 times

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

โค้ด: เลือกทั้งหมด

vue create nameproject
เราจะใช้ชื่อว่า lue
3.JPG
3.JPG (16.74 KiB) Viewed 4275 times

4. เลือกเป็น

โค้ด: เลือกทั้งหมด

Manually select features
4.JPG
4.JPG (17.92 KiB) Viewed 4275 times

5.เลือกตามที่ตัวเองต้องการ แต่เราจะใช้ทั้งหมด 4 ตัว
5.JPG
5.JPG (23.61 KiB) Viewed 4275 times

6.พิมพ์
6.JPG
6.JPG (23.51 KiB) Viewed 4275 times

7.

โค้ด: เลือกทั้งหมด

เลือกESLint + Standard config
7.JPG
7.JPG (30.77 KiB) Viewed 4275 times

8.เลือก

โค้ด: เลือกทั้งหมด

 Lint on save
8.JPG
8.JPG (33.42 KiB) Viewed 4275 times

9. เลือก

โค้ด: เลือกทั้งหมด

In package. Json
9.JPG
9.JPG (36.98 KiB) Viewed 4275 times

10. พิมพ์
10.JPG
10.JPG (38.72 KiB) Viewed 4275 times

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

โค้ด: เลือกทั้งหมด

 Project -> cd lue -> npm run serve
11.JPG
11.JPG (39.98 KiB) Viewed 4275 times
ผลลัพธ์ : -ttp://localhost:8080/
Jquery & Ajax Knowledge-1.png
Jquery & Ajax Knowledge-1.png (41.32 KiB) Viewed 4275 times

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

โค้ด: เลือกทั้งหมด

vue add vuetify
13.JPG
13.JPG (17.63 KiB) Viewed 4275 times

เลือก

โค้ด: เลือกทั้งหมด

Default (recommended)
14.JPG
14.JPG (32.92 KiB) Viewed 4275 times

ผลลัพธ์ :
Jquery & Ajax Knowledge-1.png

สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง 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
ภาพประจำตัวสมาชิก
flapjack
PHP Newbie
PHP Newbie
โพสต์: 3
ลงทะเบียนเมื่อ: 04/11/2020 7:50 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย flapjack »

สอบถามครับตอนลง dependencies ของ node
ตัว command ของ windows สามารถแสดง font เหมือน mac os ได้ไหมครับรูปภาพ
รูปภาพ
ภาพประจำตัวสมาชิก
flapjack
PHP Newbie
PHP Newbie
โพสต์: 3
ลงทะเบียนเมื่อ: 04/11/2020 7:50 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย flapjack »

flapjack เขียน: 05/11/2020 9:02 pm สอบถามครับตอนลง dependencies ของ node
ตัว command ของ windows สามารถแสดง font เหมือน mac os ได้ไหมครับรูปภาพ
ทำได้แล้วน่ะครับ ทำตาม

นี้เลย
รูปภาพ
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 25