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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by bolue » 05/06/2020 4:54 pm

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

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

Code: Select all

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

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

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

Code: Select all

vue create nameproject
เราจะใช้ชื่อว่า lue
5.JPG
5.JPG (23.61 KiB) Viewed 115 times

4. เลือกเป็น

Code: Select all

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

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

6.พิมพ์

Code: Select all

 Y
2.JPG
2.JPG (15.56 KiB) Viewed 115 times

7.

Code: Select all

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

8.เลือก

Code: Select all

 Lint on save
9.JPG
9.JPG (36.98 KiB) Viewed 115 times

9. เลือก

Code: Select all

In package. Json
8.JPG
8.JPG (33.42 KiB) Viewed 115 times

10. พิมพ์

Code: Select all

N
11.JPG
11.JPG (39.98 KiB) Viewed 115 times

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

Code: Select all

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

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

Code: Select all

vue add vuetify
14.JPG
14.JPG (32.92 KiB) Viewed 115 times

เลือก

Code: Select all

Default (recommended)
13.JPG
13.JPG (17.63 KiB) Viewed 115 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

Top