Dark mode
Create Project with Vite
สร้างโปรเจคใหม่ด้วย Vite โดยใช้คำสั่ง npm create vite@latest
ตัวอย่างเทมเพลตที่นิยมใช้:
เทมเพลต | คำสั่ง |
---|---|
Vue | npm create vite@latest my-project -- --template vue |
React | npm create vite@latest my-project -- --template react |
my-project/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ └── main.ts
├── index.html
├── package.json
└── vite.config.ts
my-project/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── package.json
└── vite.config.ts
ตัวอย่างการสร้างโปรเจคด้วยเทมเพลต Vue + TypeScript:
bash
npm create vite@latest my-project -- --template vue-ts
bash
pnpm create vite@latest my-project -- --template vue-ts
bash
yarn create vite my-project --template vue-ts
bash
bun create vite my-project --template vue-ts
Configuring (vite.config.ts)
ตั้งค่า Vite ผ่านไฟล์ vite.config.ts
ตัวอย่างการตั้งค่าพื้นฐานที่เพิ่ม Vue และ UnoCSS:
ts
// vite.config.ts
export default defineConfig({
plugins: [
Vue(),
UnoCSS() // เพิ่ม UnoCSS
],
server: {
port: 3000
}
})
Core Configuration
API | Type | คำอธิบาย |
---|---|---|
plugins | (Plugin | Plugin[])[] | กำหนดปลั๊กอินต่างๆ ที่จะใช้ในโปรเจค |
server | object | ตั้งค่าการทำงานของ development server |
build | object | กำหนดการตั้งค่าสำหรับการ build production |
preview | object | ตั้งค่าเกี่ยวกับ server preview |
base | string | กำหนด base URL สำหรับแอปพลิเคชัน |
Module & Assets
API | Type | คำอธิบาย |
---|---|---|
resolve | object | กำหนดการ resolve สำหรับโมดูลและไฟล์ |
css | object | ตั้งค่าเกี่ยวกับ CSS และ pre-processors |
json | object | ตั้งค่าเกี่ยวกับการทำงานกับ JSON |
assetsInclude | string | RegExp | (string | RegExp)[] | กำหนดประเภทไฟล์ที่จะถือเป็น static assets |
Development Tools
API | Type | คำอธิบาย |
---|---|---|
logLevel | 'info' | 'warn' | 'error' | 'silent' | กำหนดระดับการแสดง log |
clearScreen | boolean | ควบคุมการล้างหน้าจอ console |
envDir | string | กำหนดไดเรกทอรีสำหรับไฟล์ .env |
optimizeDeps | object | ตั้งค่าการ optimize dependencies |
Advanced Features
API | Type | คำอธิบาย |
---|---|---|
worker | object | ตั้งค่าเกี่ยวกับ Web Workers |
test | object | ตั้งค่าเกี่ยวกับการทดสอบ (Vitest) |
CLI Commands
คำสั่ง CLI ที่สำคัญใน Vite:
คำสั่ง | คำอธิบาย |
---|---|
npm create vite@latest | สร้างโปรเจคใหม่ด้วย Vite |
npm run dev | เริ่ม development server |
npm run build | Build สำหรับ production |
npm run preview | ดูตัวอย่างผลลัพธ์หลัง build |
npm outdated | ตรวจสอบ dependency ที่ล้าสมัย |
Plugins
Vite มีปลั๊กอินมากมายสำหรับขยายความสามารถ แบ่งเป็น 2 ประเภทหลัก:
Built-in Plugins
Plugin | คำอธิบาย |
---|---|
@vitejs/plugin-vue | สำหรับ Vue.js (มากับ Vite โดยตรง) |
@vitejs/plugin-react | สำหรับ React (มากับ Vite โดยตรง) |
@vitejs/plugin-legacy | สำหรับรองรับเบราว์เซอร์รุ่นเก่า |
Community Plugins
Plugin | คำอธิบาย |
---|---|
unocss/vite | สำหรับ UnoCSS |
vite-plugin-pwa | สำหรับ PWA |
vite-plugin-inspect | ตรวจสอบการทำงานของ Vite |
vite-plugin-mock | สำหรับสร้าง mock API |
vite-plugin-svg-icons | สำหรับจัดการ SVG icons |
vite-plugin-checker | สำหรับตรวจสอบ TypeScript และ ESLint errors ระหว่าง development |
ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
// Built-in plugins
vue(),
// Community plugins
Unocss(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.ico']
})
]
})
- ติดตั้ง plugins ก่อนใช้งาน:
bash
npm install @vitejs/plugin-vue unocss vite-plugin-pwa
- นำเข้า plugins ในไฟล์ config
- กำหนดค่าตามต้องการในออบเจ็กต์ plugins
ENV and Modes
Vite รองรับตัวแปรสภาพแวดล้อมผ่านไฟล์ .env
ตัวอย่างไฟล์ .env.development
:
env
# .env.development
VITE_API_URL=http://localhost:3000
เข้าถึงตัวแปรในโค้ดด้วย import.meta.env.VITE_API_URL
Building for Production
คำสั่งสำหรับ build โปรเจคเพื่อใช้งานจริง:
bash
# Build สำหรับ production
npm run build
# ดูตัวอย่างผลลัพธ์หลัง build
npm run preview
Server-Side Rendering (SSR)
Vite รองรับ SSR ของ Vue โดยตรง สำหรับความต้องการขั้นสูงสามารถใช้ปลั๊กอิน vite-plugin-ssr
Dependency Pre-Bundling
Vite จัดการ dependency ล่วงหน้าเพื่อให้ dev server เริ่มทำงานเร็วขึ้น
Static Assets Handling
นำเข้าไฟล์ assets โดยตรงใน component:
vue
<script setup>
import logo from './assets/logo.svg'
</script>
## Features
คุณสมบัติหลักของ Vite:
| คุณสมบัติ | คำอธิบาย |
|----------|----------|
| NPM Dependency Resolving | แก้ไข dependency จาก node_modules โดยอัตโนมัติ |
| Pre-Bundling | รวม dependency ล่วงหน้าด้วย esbuild สำหรับการโหลดที่เร็วขึ้น |
| Hot Module Replacement (HMR) | อัปเดตโมดูลแบบเรียลไทม์โดยไม่รีเฟรชหน้า |
| TypeScript Support | รองรับ TypeScript โดยไม่ต้องตั้งค่าเพิ่มเติม |
| Vue/JSX Support | รองรับ Vue และ JSX ในตัว |
| CSS Handling | รองรับ CSS, PostCSS, CSS Modules และ pre-processors |
| Static Assets | นำเข้าไฟล์ static ต่างๆ โดยตรง |
| JSON Support | สามารถนำเข้าไฟล์ JSON ได้โดยตรง |
| Glob Import | รองรับการนำเข้าไฟล์หลายไฟล์พร้อมกันด้วย pattern |
| Dynamic Import | รองรับการนำเข้าแบบ dynamic |
| WebAssembly | รองรับการทำงานกับ WebAssembly |
| Web Workers | รองรับ Web Workers |
| Build Optimizations | มีการ optimize การ build อัตโนมัติ |
Vite ยังมีคุณสมบัติอื่นๆ อีกมากมายที่ช่วยให้การพัฒนาเว็บแอปพลิเคชันทำได้ง่ายและรวดเร็วยิ่งขึ้น