การติดตั้ง Vue CLI
ติดตั้งและใช้ Vue CLI เพื่อสร้างโปรเจกต์ใหม่
การติดตั้ง Vue CLI เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
Vue CLI คืออะไร
Vue CLI คือเครื่องมือบรรทัดคำสั่งแบบดั้งเดิมสำหรับสร้างโครงร่างและจัดการโปรเจกต์ Vue
- สร้างโปรเจกต์ด้วยค่าเริ่มต้นที่เหมาะสม
- จัดการการกำหนดค่าการสร้างผ่านปลั๊กอิน
- สร้างขึ้นบน webpack
เครื่องมือนี้เป็นมาตรฐานมาหลายปี แต่ปัจจุบัน Vue นิยมใช้ Vite มากกว่า
การติดตั้ง Vue CLI ทั่วทั้งระบบ
ติดตั้ง CLI ทั่วทั้งระบบเพื่อให้คำสั่ง vue ใช้งานได้จากทุกที่
# Install globally with npm
npm install -g @vue/cli
# Verify the installation
vue --version
# @vue/cli 5.0.8การสร้างโปรเจกต์
ใช้ vue create เพื่อสร้างโครงร่างโปรเจกต์ใหม่ โดยระบุชื่อโปรเจกต์ให้กับคำสั่ง
# Create a new project
vue create my-project
# The CLI launches an interactive promptการเลือกค่าที่ตั้งไว้ล่วงหน้า
CLI จะขอให้คุณเลือก ค่าที่ตั้งไว้ล่วงหน้า:
- ค่าเริ่มต้นมี Babel และ ESLint ซึ่งเป็นวิธีที่รวดเร็ว
- เลือกคุณลักษณะด้วยตนเองช่วยให้คุณเพิ่ม Router, Vuex, TypeScript, การทดสอบ และอื่น ๆ ได้
คุณสามารถบันทึกค่าที่ตั้งไว้ล่วงหน้าและนำกลับมาใช้กับโปรเจกต์ในอนาคตได้
การเลือกคุณลักษณะด้วยตนเอง
เมื่อเลือกการตั้งค่าด้วยตนเอง คุณสามารถเปิดหรือปิดคุณลักษณะที่ต้องการได้
# Example feature checklist
? Check the features needed for your project:
(*) Babel
( ) TypeScript
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatterการเรียกใช้โปรเจกต์
หลังจากสร้างโปรเจกต์แล้ว CLI จะแสดงคำสั่งสำหรับเริ่มแอปของคุณ
# Move into the project
cd my-project
# Start the dev server
npm run serve
# App runs at http://localhost:8080ทำความรู้จัก Vite
Vite คือเครื่องมือสร้างสมัยใหม่ที่ทีม Vue พัฒนาขึ้น
- ใช้โมดูล ES แบบเนทีฟเพื่อเริ่มต้นได้ทันที
- การแทนที่โมดูลแบบทันทีที่รวดเร็วมาก
- เร็วกว่า Vue CLI ที่ใช้ webpack มาก
ปัจจุบัน Vite เป็นเครื่องมือที่แนะนำสำหรับโปรเจกต์ Vue ใหม่
Vite กับ Vue CLI
เปรียบเทียบเครื่องมือทั้งสอง:
- Vue CLI ใช้ webpack เริ่มต้นแบบเย็นช้ากว่า แต่มีความพร้อมใช้งานและกำหนดค่าได้มาก
- Vite ใช้ esbuild และ ESM แบบเนทีฟ เริ่มต้นเกือบจะทันที และเป็นค่าเริ่มต้นในอนาคต
Vue CLI อยู่ในโหมดบำรุงรักษาแล้ว โปรดเลือกใช้ Vite เว้นแต่คุณจะต้องดูแลโปรเจกต์เก่า
npm create vue@latest
วิธีอย่างเป็นทางการในการเริ่มโปรเจกต์ Vue ใหม่ที่ขับเคลื่อนด้วย Vite คือใช้เครื่องมือ create-vue
# Scaffold a Vite + Vue project
npm create vue@latest
# Prompts for name and features:
# TypeScript, JSX, Vue Router, Pinia,
# Vitest, ESLint, Prettierการเรียกใช้โปรเจกต์จาก create-vue
create-vue ใช้สคริปต์มาตรฐานของ Vite
# After scaffolding
cd my-vue-app
npm install
npm run dev
# Dev server: http://localhost:5173ควรเลือกใช้แบบใด
คำแนะนำในการเลือก:
- เริ่มโปรเจกต์ใหม่ในปี 2024 หรือหลังจากนั้นใช่หรือไม่ ให้ใช้ npm create vue@latest (Vite)
- กำลังดูแลโปรเจกต์เก่าที่สร้างด้วย Vue CLI อยู่ใช่หรือไม่ ให้ใช้ต่อไป
- ต้องการประสบการณ์การพัฒนาที่เร็วที่สุดใช่หรือไม่ Vite เหมาะที่สุด
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับการเลือกเครื่องมือของ Vue
สรุป: การติดตั้ง Vue CLI
คุณได้เรียนรู้เกี่ยวกับเครื่องมือสร้างโครงร่าง Vue:
- Vue CLI ติดตั้งด้วย npm install -g @vue/cli
- vue create สร้างโครงร่างด้วยค่าที่ตั้งไว้ล่วงหน้า
- Vite เป็นทางเลือกสมัยใหม่ที่รวดเร็ว
- npm create vue@latest เป็นวิธีเริ่มต้นสมัยใหม่ที่แนะนำ
ถัดไป: สำรวจโครงสร้างโปรเจกต์ที่สร้างขึ้น
คำถามที่พบบ่อย
บทเรียน “การติดตั้ง Vue CLI” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การติดตั้ง Vue CLI” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การติดตั้ง Vue CLI”
ติดตั้งและใช้ Vue CLI เพื่อสร้างโปรเจกต์ใหม่ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “การติดตั้ง Vue CLI” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การติดตั้ง Vue CLI
- โครงสร้างโปรเจกต์ที่สร้างขึ้น
- การกำหนดค่า CLI และปลั๊กอิน