ต่อเนื่องจากบทความตอนที่แล้ว ตอนแรกของการพัฒนา vue project
ในขั้นตอนการเรียกใช้คำสั่ง npm run dev เพื่อเริ่มต้นการทำงานของ
vue application ตัวอย่าง
เตรียมพร้อม เริ่มต้นศึกษาใช้งาน VueJS http://niik.in/1080
https://www.ninenik.com/content.php?arti_id=1080 via @ninenik
จะมีการเรียกใช้งานเครื่องมือที่ชื่อว่า Vite (วิท) เข้าใจอย่างง่ายก็คือ server สำหรับ
การพัฒนาที่มาพร้อมคุณสมบัติต่างๆ มากมาย
Vite (วิท) คืออะไร
Vite (วิท) เป็นเครื่องมือสำหรับการพัฒนาเว็บแอปพลิเคชันที่ใช้ในสภาพแวดล้อม
ของ JavaScript หรือ TypeScript โดยเฉพาะ โดย Vite มุ่งเน้นการพัฒนาและ
สร้างเว็บแอปพลิเคชันให้มีประสิทธิภาพและเร็วขึ้น โดยมีลักษณะสำคัญดังนี้:
1.Development Server ที่รวดเร็ว: Vite มี development server ที่ให้ความ
เร็วในการโหลดและรีเฟรชเว็บแอปพลิเคชัน ทำให้นักพัฒนาสามารถดูการเปลี่ยนแปลงทันที
ที่เกิดขึ้นโดยไม่ต้องรอนาน
2.Hot Module Replacement (HMR): Vite มาพร้อมกับ Hot Module
Replacement ซึ่งช่วยให้นักพัฒนาสามารถดูผลลัพธ์ของการเปลี่ยนแปลงโค้ดโดยไม่ต้อง
รีเฟรชหน้าเว็บแอปพลิเคชัน
3.การสนับสนุนและปลั๊กอินขั้นสูง: Vite สามารถสนับสนุนการใช้งานกับรูปแบบไฟล์ที่
หลากหลาย เช่น Vue.js, React, หรือ Svelte และยังสามารถใช้งานได้กับรูปแบบของ
ไฟล์อื่น ๆ อีกมากมาย เช่น CSS, JSON, SVG, และอื่น ๆ นอกจากนี้ยังมีปลั๊กอินที่ช่วย
ให้สามารถใช้งานร่วมกับ Vite ได้อย่างสะดวกและมีประสิทธิภาพ
4.Production Build ที่เร็วและมีประสิทธิภาพ: ในขณะที่ Vite มีความเร็วในการพัฒนา
แต่การสร้าง Production Build ก็เช่นเดียวกัน โดยมีเวลาการสร้างไฟล์ขนาดเล็กและ
ประสิทธิภาพสูง
5.Modern JavaScript Features: Vite สนับสนุนการใช้งานของคุณสมบัติ JavaScript
ที่ล่าสุด เช่น ES Module, import/export syntax, และ dynamic import ซึ่งทำให้
สามารถใช้งานโค้ด JavaScript ใหม่ ๆ ได้อย่างง่ายดาย
6.Framework Agnostic: Vite เป็นเครื่องมือที่ไม่ขึ้นกับเฟรมเวิร์กแมกซ์ใด ๆ แต่สามารถ
ใช้งานได้กับหลายเฟรมเวิร์กแมกซ์ ซึ่งเป็นประโยชน์อย่างมากสำหรับผู้พัฒนาที่ต้องการใช้เฟรม
เวิร์กแมกซ์ที่แตกต่างกัน
Vite เป็นเครื่องมือที่ถูกพัฒนาขึ้นโดย Evan You, ผู้สร้าง Vue.js ซึ่งเป็นเครื่องมือที่นักพัฒนา
Vue.js หลายคนให้ความสนใจและนำมาใช้ในการพัฒนาเว็บแอปพลิเคชันของตนในปัจจุบันและ
เป็นเครื่องมือที่มีความนิยมในชุมชนนักพัฒนาเว็บในขณะนี้
สำรวจโครงสร้างโปรเจกต์ vue ตัวอย่าง
เราจะมาดูว่าในโปรเจกต์ตัวอย่างประกอบด้วยอะไรกันบ้าง ดูรูปภาพด้านล่างประกอบ
node_modules
node_modules เป็นโฟลเดอร์ที่ใช้เก็บโมดูล (หรือไลบรารี) ที่ติดตั้งผ่าน npm (Node
Package Manager) ในโปรเจ็กต์ Node.js หรือ JavaScript อื่น ๆ ที่ใช้ Node.js
runtime environment เพื่อการพัฒนาซอฟต์แวร์
เมื่อเราใช้ npm เพื่อติดตั้งโมดูลใด ๆ ในโปรเจ็กต์ โมดูลที่ติดตั้งจะถูกดาวน์โหลดและเก็บไว้ใน
โฟลเดอร์ node_modules ภายใต้โปรเจ็กต์ โดยทั่วไปแล้ว node_modules จะปรากฏ
ที่ระดับ root ของโปรเจ็กต์ (ระดับเดียวกับไฟล์ package.json) ซึ่งเป็นไดเร็กทอรีหลักสำหรับ
การจัดเก็บโมดูล
การใช้ node_modules มีความสำคัญเพราะมันช่วยให้โปรเจ็กต์สามารถใช้งานโมดูลที่ต้องการ
ได้โดยง่าย ๆ โดยไม่ต้องนำโมดูลนั้นมาเก็บไว้แยกโดยตรง นอกจากนี้ยังช่วยให้การจัดการและ
การแก้บั๊กในโปรเจ็กต์ เป็นไปอย่างราบรื่น เนื่องจาก npm สามารถจัดการการติดตั้งและ
การอัปเดตโมดูลอัตโนมัติให้และยังรวมถึงการตรวจสอบความเข้ากันได้ระหว่างเวอร์ชันของโมดูล
ที่ติดตั้งในโปรเจ็กต์ได้ด้วย
public
ในโปรเจ็กต์ Vue.js โฟลเดอร์ public มักถูกใช้เพื่อเก็บไฟล์ที่ต้องการให้เป็นสาธารณะ
หรือสามารถเข้าถึงได้โดยตรงจากผู้ใช้งานทั่วไปผ่านทางเว็บไซต์ โดยไม่ต้องผ่าน
การประมวลผลหรือการจัดการจาก Vue.js หรือโค้ด JavaScript
สิ่งที่โฟลเดอร์ public ในโปรเจ็กต์ Vue.js สามารถใช้งานได้:
1.สำหรับไฟล์สาธารณะ: เราสามารถเก็บไฟล์ที่ต้องการให้สามารถเข้าถึงได้โดยตรงจากเว็บไซต์
เช่นไฟล์ HTML, CSS, รูปภาพ, หรือไฟล์อื่น ๆ ที่ต้องการให้ผู้ใช้งานสามารถดาวน์โหลดหรือ
เข้าถึงได้โดยไม่ต้องผ่านการจัดการโดยโปรแกรม
2.สำหรับสร้าง URL สาธารณะ: เราสามารถเก็บไฟล์ในโฟลเดอร์ public เพื่อสร้าง URL สาธารณะ
ที่สามารถใช้เข้าถึงได้โดยตรง โดยไม่ต้องผ่านการประมวลผลหรือการจัดการจาก Vue.js
หรือโค้ด JavaScript เช่นไฟล์รูปภาพหรือไฟล์เอกสารที่ต้องการให้ผู้ใช้งานสามารถเข้าถึงได้โดย
ใช้ URL สาธารณะ
3.สำหรับการตั้งค่าหรือการกำหนดค่า: เราสามารถเก็บไฟล์การตั้งค่าหรือไฟล์ที่ใช้ในการกำหนดค่า
ในโฟลเดอร์ public เพื่อให้ง่ายต่อการเข้าถึงและใช้งาน โดยไม่ต้องผ่านการจัดการโดยโปรแกรม
สรุปคือ โฟลเดอร์ public ในโปรเจ็กต์ Vue.js เป็นส่วนที่ที่เราสามารถเก็บไฟล์ที่ต้องการให้เป็น
สาธารณะหรือสามารถเข้าถึงได้โดยตรงจากผู้ใช้งานทั่วไปผ่านทางเว็บไซต์ โดยไม่ต้องผ่านการ
จัดการหรือการประมวลผลโดยโค้ด Vue.js
src
ในโปรเจ็กต์ Vue.js โฟลเดอร์ src (จากคำว่า "source") เป็นส่วนสำคัญของโครงสร้างโปรเจ็กต์
ซึ่งใช้เก็บโค้ดและไฟล์ที่เป็นต้นฉบับของแอปพลิเคชัน Vue.js โดยทั่วไปแล้ว src จะประกอบด้วย
ไฟล์และโฟลเดอร์ต่อไปนี้:
1.ไฟล์ JavaScript (หรือ TypeScript): ไดเรกทอรีนี้มักจะมีไฟล์ JavaScript (หรือ
TypeScript ถ้าใช้ TypeScript) ที่ใช้สำหรับเขียนโค้ดและคอมโพเนนต์ของแอปพลิเคชัน Vue.js
ไฟล์หลักที่สำคัญสำหรับแอปพลิเคชัน Vue.js จะอยู่ในนี้ เช่น main.js หรือ App.vue
2.ไฟล์ CSS (หรือ Pre-processor): ไดเรกทอรีนี้อาจมีไฟล์ CSS (หรือไฟล์ที่ใช้งานกับ pre-
processor เช่น Sass หรือ Less) สำหรับสไตล์ที่ใช้ในแอปพลิเคชัน Vue.js ไฟล์ที่มักจะอยู่
ในนี้มักจะเป็น App.vue หรือ styles.css
3.ไฟล์ Assets: ไดเรกทอรีนี้สามารถมีโฟลเดอร์ที่ใช้เก็บไฟล์ที่ใช้ในแอปพลิเคชัน Vue.js เช่น
รูปภาพ ไอคอน หรือไฟล์อื่น ๆ ที่จำเป็นสำหรับแอปพลิเคชัน
4.ไฟล์ Components: ไดเรกทอรีนี้อาจมีโฟลเดอร์ที่ใช้เก็บคอมโพเนนต์ของแอปพลิเคชัน Vue.js
เพื่อการจัดระเบียบโค้ดและการบริหารจัดการ โครงสร้างโปรเจ็กต์ Vue.js อาจมีโฟลเดอร์ชื่อว่า
components ที่ใช้เก็บไฟล์คอมโพเนนต์ที่ใช้ในแอปพลิเคชัน
5.ไฟล์การกำหนดค่าและการประมวลผล: นอกจากนี้ยังอาจมีไฟล์หรือโฟลเดอร์ที่ใช้เก็บการ
กำหนดค่าและการประมวลผลต่าง ๆ ที่เกี่ยวข้องกับโปรเจ็กต์ Vue.js ได้ เช่นไฟล์ router
สำหรับการกำหนดค่าเส้นทาง หรือไฟล์ store สำหรับการจัดการสถานะของแอปพลิเคชัน
โดยทั่วไปแล้ว โฟลเดอร์ src ในโปรเจ็กต์ Vue.js มักจะเป็นจุดเริ่มต้นสำคัญสำหรับการพัฒนา
และจัดการโค้ดของแอปพลิเคชัน Vue.js และมักจะเป็นที่ที่ใช้งานอย่างส่วนใหญ่ในการพัฒนา
.gitignore
ไฟล์ .gitignore ในโปรเจ็กต์ Vue.js (หรือในโปรเจ็กต์ที่ใช้ Git อื่น ๆ) ถูกใช้เพื่อระบุไฟล์หรือ
โฟลเดอร์ที่ Git ควรละเว้นไม่ต้องติดตามหรือเก็บในระบบควบคุมเวอร์ชัน (Version Control
System) โดยอัตโนมัติ นั่นหมายความว่าเมื่อเราทำการ commit หรือ push โปรเจ็กต์ไปยัง
เซิร์ฟเวอร์ Git ไฟล์หรือโฟลเดอร์ที่ระบุในไฟล์ .gitignore จะไม่ถูกเก็บไว้ใน Git repository
นั้นๆ
การใช้ไฟล์ .gitignore มีหลายเหตุผล เช่น:
1.ลดขนาดของ Repository: ป้องกันไม่ให้ไฟล์ที่ไม่จำเป็น เช่นไฟล์ชั่วคราวหรือไฟล์ที่ถูกสร้างขึ้น
โดยโปรแกรมในระหว่างการพัฒนา มากเกินไป ส่งผลให้ repository มีขนาดใหญ่ขึ้น ทำให้การ
clone หรือ pull repository เป็นไฟล์ใหญ่ลงมาใช้เวลามากขึ้น และใช้พื้นที่ดิสก์มากขึ้นด้วย
2.รักษาความปลอดภัยและความเป็นส่วนตัว: ป้องกันไม่ให้ไฟล์ที่มีความลับหรือเชื่อมโยงทางความ
ปลอดภัยถูกเก็บใน repository โดยไม่ตั้งใจ อย่างเช่นไฟล์ที่เก็บรหัสผ่าน ไฟล์กำหนดค่าสำหรับ
บนเซิร์ฟเวอร์ เป็นต้น
3.สะดวกในการแยกแยะการพัฒนาและการโปรดักชัน: ในกรณีที่มีโปรแกรมหรือโมดูลสำหรับการ
ทดสอบ สร้างไฟล์ชั่วคราว หรือไฟล์ที่ถูกสร้างขึ้นโดยแพคเกจเมเนจเมนต์ (dependency
management) อย่าง npm มากมาย เราสามารถบอก Git ให้ละเว้นไฟล์เหล่านี้ได้ในไฟล์
.gitignore เพื่อให้มั่นใจว่าเฉพาะไฟล์ที่เกี่ยวข้องกับโปรเจ็กต์และการพัฒนาที่สำคัญเท่านั้น
ที่จะถูกเก็บใน repository
โดยทั่วไปแล้วไฟล์ .gitignore ในโปรเจ็กต์ Vue.js จะประกอบไปด้วยรายการของไฟล์หรือ
โฟลเดอร์ที่ไม่ต้องการให้ Git ติดตามหรือเก็บไว้ เช่น:
- ไฟล์และโฟลเดอร์ที่ถูกสร้างโดยระบบที่อยู่ใน .gitignore มาตรฐานของ Vue CLI เช่น node_modules, dist เป็นต้น
- ไฟล์โค้ดหรือโปรเจ็กต์ที่สร้างขึ้นโดย IDE หรือเครื่องมือพัฒนาต่าง ๆ ซึ่งมักจะมีไฟล์ชื่อ
index.html
ไฟล์ index.html ในโปรเจ็กต์ Vue.js มีบทบาทสำคัญในการแสดงผลหน้าเว็บแอปพลิเคชัน
Vue.js ในบราวเซอร์ของผู้ใช้งาน ไฟล์ index.html จะเป็นหน้าเว็บหลักที่โปรเจ็กต์ Vue.js
จะโหลดขึ้นมาเป็นจุดเริ่มต้นของแอปพลิเคชัน
jsconfig.json
ไฟล์ jsconfig.json ในโปรเจ็กต์ Vue.js มักถูกใช้เพื่อกำหนดการตั้งค่าสำหรับโครงสร้าง
โปรเจ็กต์ JavaScript โดยใช้ Visual Studio Code (VSCode) ในการพัฒนา ไฟล์นี้
ช่วยให้ VSCode เข้าใจโครงสร้างของโปรเจ็กต์ JavaScript และช่วยในการเติมโค้ด (code
completion) และการจัดการโค้ด (code navigation) อย่างมีประสิทธิภาพมากขึ้น
ไฟล์ jsconfig.json สามารถใช้งานได้กับโปรเจ็กต์ JavaScript ที่ใช้ ES6 Module
(โมดูล ES6) และสามารถกำหนดค่าต่าง ๆ ได้ตามความต้องการของโปรเจ็กต์ บางค่าที่
สามารถกำหนดได้ใน jsconfig.json ได้แก่:
1.Compiler Options: สามารถกำหนดตัวเลือกของคอมไพเลอร์สำหรับโครงสร้างโปรเจ็กต์
JavaScript ได้ เช่น target, module, lib, allowJs, checkJs เป็นต้น
2.Include: สามารถระบุไดเรกทอรีที่จะถูกนำเข้า (include) ไฟล์ JavaScript เพื่อให้
VSCode สามารถตรวจจับไฟล์ JavaScript และใช้งานความสามารถของ IntelliSense ได้
3.Exclude: สามารถระบุไดเรกทอรีที่จะถูกยกเว้น (exclude) ไฟล์ JavaScript เพื่อ
ไม่ให้ VSCode ตรวจจับหรือแสดงในหน้าต่าง Project Explorer
4.Compiler Options Strictness: สามารถกำหนดความสามารถของคอมไพเลอร์เพื่อให้
มีการตรวจสอบข้อผิดพลาดอย่างเข้มงวดหรือไม่ โดยการกำหนดค่า strict เป็น true หรือ false
5.Path Mapping: สามารถกำหนดการแมปเส้นทาง (path mapping) เพื่อชี้ไปยัง
โฟลเดอร์หรือไฟล์ที่ต่างกัน โดยการใช้ค่า paths
package.json และ package-lock.json
ไฟล์ package.json และ package-lock.json ในโปรเจ็กต์ Vue.js เป็นส่วนสำคัญ
ของการจัดการและสร้างสภาพแวดล้อมของโปรเจ็กต์ JavaScript โดยใช้ npm (Node
Package Manager) หรือ Yarn โดยทั่วไป:
package.json:
- เป็นไฟล์ JSON ที่ใช้เก็บข้อมูลเกี่ยวกับโปรเจ็กต์ JavaScript เช่นชื่อโปรเจ็กต์ (name),
เวอร์ชัน (version), คำอธิบาย (description), ผู้เผยแพร่ (author), และข้อมูลอื่น ๆ
เกี่ยวกับโปรเจ็กต์
- ระบุรายการของ dependencies (dependencies) และ devDependencies ที่ใช้
ในโปรเจ็กต์ รวมถึงเวอร์ชันของแต่ละโมดูลที่ติดตั้ง
- จัดการสคริปต์ (scripts) ที่สามารถใช้ในการเรียกใช้คำสั่งต่าง ๆ เช่นการรันโปรเจ็กต์,
การทดสอบ, หรือการสร้าง
package-lock.json:
- เป็นไฟล์ JSON ที่ใช้เก็บข้อมูลเกี่ยวกับโมดูลที่ติดตั้งและเวอร์ชันของโมดูลนั้น ๆ และข้อมูล
เกี่ยวกับลิงค์ของโมดูลที่เชื่อมโยงกัน
- รักษาความสอดคล้องของเวอร์ชันของโมดูลระหว่างทีมพัฒนา และใช้สำหรับการสร้าง
สภาพแวดล้อมในอนาคตที่มีความเข้ากันได้
- ป้องกันปัญหาของสิ่งที่เรียกว่า "Dependency Hell" ซึ่งเกิดขึ้นเมื่อมีการติดตั้งโมดูล
ที่ไม่สามารถทำงานร่วมกันได้เนื่องจากเวอร์ชันที่แตกต่างกัน
การใช้งาน package.json และ package-lock.json ในโปรเจ็กต์ Vue.js ช่วยให้การ
จัดการและการสร้างสภาพแวดล้อมของโปรเจ็กต์เป็นไปอย่างเรียบง่ายและมีประสิทธิภาพ
และช่วยให้ทีมพัฒนามีความสอดคล้องกันในการใช้โมดูลและเวอร์ชันที่ต่างกันในโปรเจ็กต์
README.md
ไฟล์ README.md ในโปรเจ็กต์ Vue.js เป็นไฟล์ที่ใช้ในการอธิบายหรือแสดงข้อมูลสำคัญ
เกี่ยวกับโปรเจ็กต์ โดยทั่วไปมักจะใช้เพื่อเป็นแหล่งข้อมูลที่สามารถอ่านได้ง่ายโดยผู้ใช้งานที่สนใจ
โปรเจ็กต์ โดยปกติไฟล์ README.md มักจะประกอบด้วย:
1.คำอธิบายเกี่ยวกับโปรเจ็กต์ (Project Description): อธิบายว่าโปรเจ็กต์นี้เกี่ยวกับอะไร
มีวัตถุประสงค์อย่างไร และทำอะไรบ้าง
2.วิธีการติดตั้ง (Installation Instructions): อธิบายขั้นตอนการติดตั้งและการเริ่มต้น
ใช้งานโปรเจ็กต์ รวมถึงการติดตั้ง dependencies และวิธีการเริ่มต้นเซิร์ฟเวอร์ (ถ้ามี)
3.วิธีการใช้งาน (Usage Instructions): อธิบายวิธีการใช้งานโปรเจ็กต์ รวมถึงคำสั่งหรือ
วิธีการใช้งานต่าง ๆ ของโปรเจ็กต์ เช่นวิธีการรันแอปพลิเคชัน วิธีการทดสอบ หรือวิธีการสร้าง
production build
4.ตัวอย่าง (Examples): ตัวอย่างการใช้งานหรือโค้ดตัวอย่างที่เกี่ยวข้องกับโปรเจ็กต์
ช่วยให้ผู้ใช้งานเข้าใจได้ง่ายขึ้น
5.เอกสารเพิ่มเติม (Additional Documentation): ลิงก์หรือเอกสารเพิ่มเติมที่สำคัญ
เกี่ยวกับโปรเจ็กต์ เช่น API documentation, Wiki, เป็นต้น
5.แหล่งข้อมูลเพิ่มเติม (Additional Resources): ลิงก์หรือแหล่งข้อมูลอื่น ๆ ที่เกี่ยวข้อง
กับโปรเจ็กต์ เช่นเว็บไซต์, บล็อก, หรือแหล่งข้อมูลที่เกี่ยวข้อง
การใช้งาน README.md ในโปรเจ็กต์ Vue.js ช่วยให้ผู้ใช้งานที่สนใจโปรเจ็กต์สามารถเข้าใจ
และเริ่มต้นใช้งานโปรเจ็กต์ได้อย่างง่ายดายและสะดวก และยังเป็นที่ที่ดีในการแบ่งปันข้อมูลสำคัญ
และเอกสารเกี่ยวกับโปรเจ็กต์ให้กับผู้ใช้งานอื่น ๆ ด้วย
vite.config.js
ไฟล์ vite.config.js ในโปรเจ็กต์ Vue.js เป็นไฟล์ที่ใช้กำหนดค่าและกำหนดคอนฟิกเรื่องการ
สร้างและการรันโปรเจ็กต์โดยใช้ Vite ซึ่งเป็นเครื่องมือสำหรับการสร้างเว็บแอปพลิเคชันแบบบันเดิล
(bundler) สำหรับ JavaScript และ TypeScript โดยเฉพาะสำหรับโปรเจ็กต์ Vue.js โดย
ส่วนใหญ่มักจะใช้สำหรับกำหนดค่าต่าง ๆ ที่เกี่ยวข้องกับการสร้างและการพัฒนาโปรเจ็กต์ Vue.js
ซึ่งสามารถทำได้หลากหลายตามความต้องการของโปรเจ็กต์ โดยไฟล์ vite.config.js มักจะ
ประกอบไปด้วย:
1.ตัวแปรของการกำหนดค่า (Config Variables): การกำหนดค่าที่เกี่ยวข้องกับโปรเจ็กต์ เช่น
ตัวแปรสำหรับกำหนดโหมดการพัฒนา (development mode) หรือโหมดการสร้าง
(production mode)
2.การกำหนดค่าของโหลดเอกสาร (Document Loading Configuration): การกำหนดค่า
เกี่ยวกับการโหลดเอกสารและไฟล์ข้อมูลต่าง ๆ ที่ใช้ในโปรเจ็กต์ เช่นรูปแบบของไฟล์, การใช้งาน
โหลดโมดูล (module loading), การตั้งค่าที่เกี่ยวกับการโหลด CSS และการโหลดภาพ
3.การกำหนดค่าของโหลดโมดูล (Module Loading Configuration): การกำหนดค่าที่
เกี่ยวข้องกับโหลดโมดูล JavaScript และโหลดโมดูลอื่น ๆ ซึ่งสามารถใช้ในโปรเจ็กต์ Vue.js
4.การกำหนดค่าของโปรไฟล์ (Profile Configuration): การกำหนดค่าเกี่ยวกับโปรไฟล์
ที่ใช้ในการสร้างและรันโปรเจ็กต์ เช่นการตั้งค่าที่เกี่ยวข้องกับการสร้าง production build,
dev server, หรือ testing server
5.การกำหนดค่าอื่น ๆ (Other Configuration): การกำหนดค่าที่เกี่ยวข้องกับการใช้งานอื่น ๆ
ในโปรเจ็กต์ Vue.js เช่นการกำหนดค่าการตั้งค่าต่าง ๆ สำหรับโปรเจ็กต์
ไฟล์ vite.config.js ช่วยให้ผู้พัฒนาสามารถกำหนดและปรับแต่งการทำงานของโปรเจ็กต์ Vue.js
ตามความต้องการของโปรเจ็กต์ได้อย่างมีประสิทธิภาพและยืดหยุ่น
เนื้อหานี้เราได้ทำความรู้จักกับส่วนต่างของ vue project ตัวอย่างเรียบร้อยแล้ว