Wrikka Learn

Dark mode

Quick Start Vue.js (with Vite) ​

Vue.js คือเฟรมเวิร์ค JavaScript สำหรับสร้าง UI ที่ใช้งานง่ายและยืดหยุ่น เหมาะกับทั้งโปรเจ็กต์เล็กและใหญ่

ในปัจจุบัน การเริ่มต้นโปรเจกต์ Vue ที่แนะนำคือการใช้ Vite ซึ่งเป็นเครื่องมือ build ที่รวดเร็วและทันสมัย รองรับ TypeScript และ Single File Component (SFC) เต็มรูปแบบ

วิธีเริ่มต้นโปรเจกต์ Vue ด้วย Vite + TypeScript ​

  1. ติดตั้ง Node.js (แนะนำเวอร์ชันล่าสุด)
  2. สร้างโปรเจกต์ใหม่ด้วย Vite
bash
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm run dev
  1. เปิดเบราว์เซอร์ที่ localhost faviconhttp://localhost:5173 เพื่อดูแอปของคุณ

จุดเด่นของการใช้ Vite ​

  • Build และ hot reload เร็วมาก
  • รองรับ TypeScript, SFC, และ tooling สมัยใหม่เต็มรูปแบบ
  • โครงสร้างโปรเจกต์ชัดเจน ขยายง่าย
  • ใช้งานร่วมกับ UnoCSS, ESLint, Prettier, Pinia ฯลฯ ได้ทันที

ตัวอย่างโค้ดเริ่มต้น (src/App.vue) ​

vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <h1>Hello Vue 3 + Vite + TypeScript!</h1>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

Tip: สำหรับโปรเจกต์ Vue สมัยใหม่ แนะนำให้เริ่มต้นด้วย Vite + TypeScript เพื่อประสบการณ์ dev ที่ดีที่สุดและรองรับการขยายในอนาคต