close

การติดตั้ง Vue.js และสร้างโปรเจ็กต์แรกของคุณ

ในการติดตั้ง Vue.js คุณสามารถทำตามขั้นตอนด้านล่าง:

ขั้นตอนที่ 1: สร้างไดเรกทอรีใหม่สำหรับโครงการของคุณและเปิดเทอร์มินัลในไดเรกทอรีนั้น

ขั้นตอนที่ 2: ใช้ npm เพื่อติดตั้ง Vue CLI(Command Line Interface) โดยเรียกใช้คำสั่งต่อไปนี้:

npm install -g @vue/cli


ขั้นตอนที่ 3: หลังจากติดตั้งสำเร็จ คุณสามารถสร้างโครงการ Vue ใหม่ได้โดยใช้คำสั่งต่อไปนี้:

vue create my-vue-project


ขั้นตอนที่ 4: เลือกตัวเลือกการกำหนดค่าสำหรับโครงการของคุณ รวมถึงการติดตั้งตัวประมวลผลล่วงหน้า Babel, ESLint และ CSS(ทางเลือก)

ขั้นตอนที่ 5: เมื่อกระบวนการสร้างโครงการเสร็จสมบูรณ์ ให้ไปที่ไดเร็กทอรีโครงการโดยใช้คำสั่ง:

cd my-vue-project


ขั้นตอนที่ 6: เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มโครงการ Vue:

npm run serve


หลังจากกระบวนการเริ่มต้นเสร็จสิ้น คุณจะเห็น URL เพื่อเข้าถึงแอปพลิเคชัน Vue ของคุณบนเบราว์เซอร์

ตัวอย่างง่ายๆ ของ Vue.js:

มาสร้างไฟล์ HTML ใหม่และตั้งชื่อว่า index.html ` ในไฟล์นี้ ให้เพิ่มโค้ดต่อไปนี้:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

ในตัวอย่างนี้ เราได้สร้างแอปพลิเคชัน Vue อย่างง่ายด้วย h1 แท็กและปุ่ม เมื่อคลิกปุ่ม ข้อความจะเปลี่ยน

บันทึก index.html  ไฟล์และเปิดในเบราว์เซอร์ คุณจะเห็นข้อความเริ่มต้นเป็น "Hello Vue.js!" เมื่อคุณคลิกปุ่ม ข้อความจะเปลี่ยนเป็น "เปลี่ยนข้อความเรียบร้อยแล้ว!"

นี่เป็นเพียงตัวอย่างง่ายๆ ในการเริ่มใช้งาน Vue.js คุณสามารถสำรวจคุณสมบัติและความสามารถอันทรงพลังของ Vue.js ได้อีกมากมายในขณะที่พัฒนาแอปพลิเคชันของคุณ