VueJS - การตั้งค่าสภาพแวดล้อม
มีหลายวิธีในการติดตั้ง VueJS บางส่วนของวิธีการติดตั้งจะกล่าวถึงข้างหน้า
ใช้แท็ก <script> โดยตรงในไฟล์ HTML
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>ไปที่เว็บไซต์บ้าน https://vuejs.org/v2/guide/installation.htmlของ VueJS และดาวน์โหลด vue.js ตามต้องการ มีสองเวอร์ชันสำหรับการใช้งาน - เวอร์ชันใช้งานจริงและเวอร์ชันระหว่างการพัฒนา เวอร์ชันระหว่างการพัฒนาไม่ได้ถูกย่อให้เล็กที่สุดในขณะที่เวอร์ชันที่ใช้งานจริงจะถูกย่อให้เล็กที่สุดดังที่แสดงในภาพหน้าจอต่อไปนี้ เวอร์ชันการพัฒนาจะช่วยในการเตือนและโหมดดีบักในระหว่างการพัฒนาโครงการ
ใช้ CDN
เรายังสามารถเริ่มใช้ไฟล์ VueJS จากไลบรารี CDN ลิงค์https://unpkg.com/vueจะให้ VueJS เวอร์ชันล่าสุด VueJS ยังมีอยู่ใน jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) และ cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).
เราสามารถโฮสต์ไฟล์ในตอนท้ายของเราได้หากจำเป็นและเริ่มต้นด้วยการพัฒนา VueJS
ใช้ NPM
สำหรับแอปพลิเคชันขนาดใหญ่ที่มี VueJS ขอแนะนำให้ติดตั้งโดยใช้แพ็คเกจ npm มาพร้อมกับ Browserify และ Webpack พร้อมกับเครื่องมือที่จำเป็นอื่น ๆ ซึ่งช่วยในการพัฒนา ต่อไปนี้เป็นคำสั่งสำหรับติดตั้งโดยใช้ npm
npm install vueใช้ CLI Command Line
VueJS ยังจัดเตรียม CLI เพื่อติดตั้ง vue และเริ่มต้นด้วยการเปิดใช้งานเซิร์ฟเวอร์ ในการติดตั้งโดยใช้ CLI เราจำเป็นต้องติดตั้ง CLI ซึ่งทำได้โดยใช้คำสั่งต่อไปนี้
npm install --global vue-cli
เมื่อเสร็จแล้วจะแสดงเวอร์ชัน CLI สำหรับ VueJS ใช้เวลาไม่กี่นาทีในการติดตั้ง
+ [email protected]
added 965 packages in 355.414sต่อไปนี้เป็นคำสั่งในการสร้างโครงการโดยใช้ Webpack
vue init webpack myproject
ในการเริ่มต้นใช้คำสั่งต่อไปนี้
cd myproject
npm install
npm run dev
เมื่อเรารัน npm run dev มันจะเริ่มเซิร์ฟเวอร์และจัดเตรียม url สำหรับแสดงให้เห็นในเบราว์เซอร์ซึ่งดังที่แสดงในภาพหน้าจอต่อไปนี้
โครงสร้างโครงการโดยใช้ CLI มีลักษณะดังต่อไปนี้
