Wrikka Learn

Dark mode

Grok

สร้างโปรเจกต์ด้วย Vite ​

Vite เป็นเครื่องมือที่ช่วยในการพัฒนาเว็บแอปพลิเคชันที่รวดเร็วและทันสมัย ในคู่มือนี้เราจะเรียนรู้วิธีการสร้างโปรเจกต์ใหม่ด้วย Vite ตั้งแต่ต้นจนจบ

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

ก่อนเริ่มต้น ตรวจสอบให้แน่ใจว่ามีโปรแกรมต่อไปนี้ติดตั้งอยู่บนเครื่องของคุณ:

  • Node.js เวอร์ชัน 14.18+ หรือ 16+
  • npm (มากับ Node.js) หรือ Yarn หรือ pnpm
  • Code Editor เช่น VS Code

2. สร้างโปรเจกต์ใหม่ ​

เปิด Terminal หรือ Command Prompt แล้วรันคำสั่งตาม package manager ที่ใช้:

bash
npm create vite@latest my-vite-app -- --template vue-ts
cd my-vite-app
npm install
npm run dev
bash
yarn create vite my-vite-app --template vue-ts
cd my-vite-app
yarn
yarn dev
bash
pnpm create vite my-vite-app --template vue-ts
cd my-vite-app
pnpm install
pnpm dev
bash
bun create vite my-vite-app --template vue-ts
cd my-vite-app
bun install
bun run dev

3. Build และ Preview ​

เมื่อพร้อม deploy ใช้คำสั่ง:

bash
npm run build
npm run preview
bash
yarn build
yarn preview
bash
pnpm build
pnpm preview
bash
bun run build
bun run preview

เปิดเบราว์เซอร์ที่ http://localhost:4173 เพื่อดูผลลัพธ์

4. โครงสร้างโปรเจกต์ ​

bash
my-vite-app/
├── node_modules/    # ไลบรารี่ที่ติดตั้ง
├── public/          # ไฟล์ static
├── src/             # โค้ดต้นฉบับ
│   ├── assets/      # ไฟล์ static (รูปภาพ, ฟอนต์)
│   ├── components/  # Components
│   ├── App.vue      # ไฟล์หลักของแอป
│   └── main.ts      # จุดเริ่มต้นของแอป
├── .gitignore
├── index.html       # ไฟล์ HTML หลัก
├── package.json     # ไฟล์กำหนดค่าโปรเจกต์
├── tsconfig.json    # ตั้งค่า TypeScript
└── vite.config.ts   # ไฟล์กำหนดค่า Vite

5. ติดตั้ง Plugins เพิ่มเติม ​

ติดตั้ง plugins ต่างๆ ตามต้องการ:

bash
npm install vue-router@4 pinia
bash
yarn add vue-router@4 pinia
bash
pnpm add vue-router@4 pinia
bash
bun add vue-router@4 pinia

6. ตั้งค่า Environment Variables ​

สร้างไฟล์ .env ใน root โปรเจกต์:

txt
VITE_API_URL=https://api.example.com

เข้าถึงค่าในโค้ดด้วย import.meta.env.VITE_API_URL