Wrikka Learn

Dark mode

Grok

Introduction ​

Vite เป็นเครื่องมือ build ที่ทันสมัยสำหรับ Vue.js ที่ให้:

  • การเริ่มต้นโปรเจคที่เร็วมาก
  • Hot Module Replacement (HMR) ที่ทำงานทันที
  • การ optimize โค้ดอัตโนมัติสำหรับ production

Prerequisites ​

  • Node.js เวอร์ชั่น 18+
  • npm หรือ yarn หรือ pnpm
  • Basic knowledge of command line

Project Creation ​

1. สร้างโปรเจคใหม่ ​

bash
npm create vite@latest my-vue-app -- --template vue

คำอธิบาย options:

  • my-vue-app - ชื่อโปรเจค (สามารถเปลี่ยนได้)
  • --template vue - เลือก template Vue.js

2. ติดตั้ง dependencies ​

bash
cd my-vue-app
npm install

3. รัน development server ​

bash
npm run dev

// turbo

bash
cd my-vue-app && npm install && npm run dev

Project Structure Explained ​

my-vue-app/
├── node_modules/    # เก็บ dependencies ทั้งหมด
├── public/          # ไฟล์ static ที่ไม่ผ่านการ process
│   └── favicon.ico
├── src/             # โค้ดหลักของแอปพลิเคชัน
│   ├── assets/      # เก็บรูปภาพ, fonts
│   ├── components/  # Vue components
│   ├── App.vue      # Root component
│   └── main.js      # จุดเริ่มต้นของแอป
├── index.html       # หน้า HTML หลัก
├── package.json     # Project configuration
└── vite.config.js   # Vite configuration

Available Scripts ​

CommandDescription
npm run devStart development server
npm run buildBuild for production
npm run previewPreview production build locally

Customizing Vite Config ​

สามารถแก้ไขไฟล์ vite.config.js เพื่อปรับแต่งการทำงาน:

js
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // เปลี่ยน port
    open: true, // เปิด browser อัตโนมัติ
  },
});

Next Steps ​