Skip to content

Create Project with Vite

สร้างโปรเจคใหม่ด้วย Vite โดยใช้คำสั่ง npm create vite@latest ตัวอย่างเทมเพลตที่นิยมใช้:

เทมเพลตคำสั่ง
Vuenpm create vite@latest my-project -- --template vue
Reactnpm 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:

file: vite.config.ts
ts
// vite.config.ts
export default defineConfig({
  plugins: [
    Vue(),
    UnoCSS() // เพิ่ม UnoCSS
  ],
  server: {
    port: 3000
  }
})

Core Configuration

APITypeคำอธิบาย
vitejs.dev faviconplugins(Plugin | Plugin[])[]กำหนดปลั๊กอินต่างๆ ที่จะใช้ในโปรเจค
vitejs.dev faviconserverobjectตั้งค่าการทำงานของ development server
vitejs.dev faviconbuildobjectกำหนดการตั้งค่าสำหรับการ build production
vitejs.dev faviconpreviewobjectตั้งค่าเกี่ยวกับ server preview
vitejs.dev faviconbasestringกำหนด base URL สำหรับแอปพลิเคชัน

Module & Assets

APITypeคำอธิบาย
vitejs.dev faviconresolveobjectกำหนดการ resolve สำหรับโมดูลและไฟล์
vitejs.dev faviconcssobjectตั้งค่าเกี่ยวกับ CSS และ pre-processors
vitejs.dev faviconjsonobjectตั้งค่าเกี่ยวกับการทำงานกับ JSON
vitejs.dev faviconassetsIncludestring | RegExp | (string | RegExp)[]กำหนดประเภทไฟล์ที่จะถือเป็น static assets

Development Tools

APITypeคำอธิบาย
vitejs.dev faviconlogLevel'info' | 'warn' | 'error' | 'silent'กำหนดระดับการแสดง log
vitejs.dev faviconclearScreenbooleanควบคุมการล้างหน้าจอ console
vitejs.dev faviconenvDirstringกำหนดไดเรกทอรีสำหรับไฟล์ .env
vitejs.dev faviconoptimizeDepsobjectตั้งค่าการ optimize dependencies

Advanced Features

APITypeคำอธิบาย
vitejs.dev faviconworkerobjectตั้งค่าเกี่ยวกับ Web Workers
vitest.dev favicontestobjectตั้งค่าเกี่ยวกับการทดสอบ (Vitest)

CLI Commands

คำสั่ง CLI ที่สำคัญใน Vite:

คำสั่งคำอธิบาย
npm create vite@latestสร้างโปรเจคใหม่ด้วย Vite
npm run devเริ่ม development server
npm run buildBuild สำหรับ production
npm run previewดูตัวอย่างผลลัพธ์หลัง build
npm outdatedตรวจสอบ dependency ที่ล้าสมัย

Plugins

Vite มีปลั๊กอินมากมายสำหรับขยายความสามารถ แบ่งเป็น 2 ประเภทหลัก:

Built-in Plugins

Pluginคำอธิบาย
vitejs.dev favicon@vitejs/plugin-vueสำหรับ Vue.js (มากับ Vite โดยตรง)
vitejs.dev favicon@vitejs/plugin-reactสำหรับ React (มากับ Vite โดยตรง)
vitejs.dev favicon@vitejs/plugin-legacyสำหรับรองรับเบราว์เซอร์รุ่นเก่า

Community Plugins

Pluginคำอธิบาย
unocss.dev faviconunocss/viteสำหรับ UnoCSS
vite-pwa-org.netlify.app faviconvite-plugin-pwaสำหรับ PWA
github.com faviconvite-plugin-inspectตรวจสอบการทำงานของ Vite
github.com faviconvite-plugin-mockสำหรับสร้าง mock API
github.com faviconvite-plugin-svg-iconsสำหรับจัดการ SVG icons
github.com faviconvite-plugin-checkerสำหรับตรวจสอบ TypeScript และ ESLint errors ระหว่าง development
file: vite.config.ts
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']
    })
  ]
})
  1. ติดตั้ง plugins ก่อนใช้งาน:
file: package.json
bash
npm install @vitejs/plugin-vue unocss vite-plugin-pwa
  1. นำเข้า plugins ในไฟล์ config
  2. กำหนดค่าตามต้องการในออบเจ็กต์ plugins

ENV and Modes

Vite รองรับตัวแปรสภาพแวดล้อมผ่านไฟล์ .env ตัวอย่างไฟล์ .env.development:

file: .env.development
env
# .env.development
VITE_API_URL=http://localhost:3000

เข้าถึงตัวแปรในโค้ดด้วย import.meta.env.VITE_API_URL

Building for Production

คำสั่งสำหรับ build โปรเจคเพื่อใช้งานจริง:

file: package.json
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:

file: component.vue
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 ยังมีคุณสมบัติอื่นๆ อีกมากมายที่ช่วยให้การพัฒนาเว็บแอปพลิเคชันทำได้ง่ายและรวดเร็วยิ่งขึ้น

Last updated: