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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

bolue
PHP VIP Members
PHP VIP Members
Posts: 1533
Joined: 04/06/2020 10:05 am

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

Post by bolue »

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

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

Code: Select all

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

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

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

Code: Select all

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

4. เลือกเป็น

Code: Select all

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

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

6.พิมพ์

Code: Select all

 Y
6.JPG
6.JPG (23.51 KiB) Viewed 253 times

7.

Code: Select all

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

8.เลือก

Code: Select all

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

9. เลือก

Code: Select all

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

10. พิมพ์

Code: Select all

N
10.JPG
10.JPG (38.72 KiB) Viewed 253 times

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

Code: Select all

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

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

Code: Select all

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

เลือก

Code: Select all

Default (recommended)
14.JPG
14.JPG (32.92 KiB) Viewed 253 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
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests