วิธีการติดตั้ง Vue CLI บน Ubuntu 20.04

ในบทความนี้ เราจะอธิบายวิธีการติดตั้ง Vue CLI บน Ubuntu 20.04

Vue.js เป็นเฟรมเวิร์ก JavaScript ส่วนหน้า model–view–viewmodel แบบโอเพนซอร์ส บทความนี้จะแนะนำขั้นตอนการติดตั้งและสร้างโปรเจ็กต์ Hello world first

ข้อกำหนดเบื้องต้น

• Ubuntu 20.04 ติดตั้งเซิร์ฟเวอร์เฉพาะหรือ KVM VPS
• การเข้าถึงของผู้ใช้รูทหรือผู้ใช้ปกติที่มีสิทธิ์ระดับผู้ดูแลระบบ

ติดตั้ง Vue CLI บน Ubuntu 20.04

1 - ปรับปรุงเซิร์ฟเวอร์ให้ทันสมัยอยู่เสมอ

# apt update -y

2 - ดาวน์โหลด NodeJS

ดาวน์โหลด NodeJS รุ่นล่าสุดที่เสถียร

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

3 - ติดตั้ง NodeJS

ถัดไป ติดตั้ง NodeJS โดยใช้คำสั่งต่อไปนี้:

# apt-get install -y nodejs

4 - ตรวจสอบการติดตั้ง

# node -v && npm -v

เอาท์พุท:

v15.9.0
7.5.4

5. ติดตั้ง Vue CLI

คำสั่งต่อไปนี้จะติดตั้ง Vue CLI

# npm install -g @vue/cli

ตรวจสอบการติดตั้ง:

# vue --version

เอาท์พุท:

@vue/cli 4.5.11

6. สร้างโครงการ Vue

# vue create hello-world

คุณจะได้รับแจ้งให้เลือกพรีเซ็ต คุณสามารถเลือกพรีเซ็ตเริ่มต้นที่มาพร้อมกับการตั้งค่า Babel + ESLint พื้นฐาน หรือเลือก "เลือกคุณสมบัติด้วยตนเอง" เพื่อเลือกคุณสมบัติที่คุณต้องการ

เอาท์พุท:

Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features

สร้างโปรเจ็กต์ hello-world สำเร็จแล้ว
เริ่มต้นด้วยคำสั่งต่อไปนี้:

# cd hello-world
# npm run serve

เอาท์พุท:

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.106:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

ไปที่เบราว์เซอร์ของคุณและเปิด http://[server_IP]:8080

แค่นั้นแหละ. การติดตั้งเสร็จสมบูรณ์

ในบทความนี้ เราได้เห็นวิธีการติดตั้ง Vue CLI บน Ubuntu 20.04 แล้ว