ในยุคนี้การทําเว็บส่วนใหญ่จะเน้นไปทางการทำ Web ที่เป็น Single Page Application จึงมี Framework ที่มาช่วยในการทําเว็บแบบ Single Page Application ที่จะช่วยให้เราสร้างเว็บได้ง่ายขึ้น Vue.js ก็เป็น Framework ตัวนึงที่นิยมใช้กัน ซึ่งในบทความนี้เราจะมาเรียนรู้วิธีการใช้งาน Vue.js เบื้องต้น

แนวทางการพัฒนาเว็บด้วย Vue.js

แนวทางการพัฒนาเว็บด้วย Vue.js จะทําได้ 3 ทางดังนี้ 1. CDN คือการ import เข้าไปในไฟล์ html ของเราตรงๆได้เลยเช่น

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. NPM คือการติดตั้งผ่าน NPM

$ npm install -g @vue/cli

3. CLI (แนะนํา) vue-cli เป็นชุดคำสั่งที่จะทำให้เราสามารถขึ้น Project ด้วย Vue.js ซึ่งรวม Tools และ Libaries ต่างๆที่จำเป็นมาให้เราในตัว โดยที่เราไม่ต้องไปตามหา ไล่ดาวน์โหลดเอง ในหัวข้อถัดไปเราจะมาเรียนรู้วิธีการใช้งานกัน ในหัวข้อนี้จะบอกให้รู้ก่อนว่าแนวทางการพัฒนาเว็บด้วย Vue.js สามารถไปได้กี่ทาง

เริ่มต้นสร้าง Project ด้วย vue-cli

สิ่งที่ต้องมีในเครื่องของเราก่อนคือ node.js ถ้ามีแล้วก็ติดตั้ง vue-cli ด้วยคําสั่งนี้ได้เลย

npm install -g @vue/cli

เมื่อติดตั้งเรียบร้อย ก็มาสร้าง Project กัน ซึ่งการสร้าง Project ด้วย vue-cli นั้น จะมี Template มาให้เราเลือก 5 แบบ ได้แก่

browserify
browserify-simple
simple
webpack
webpack-simple

ในบทความนี้เราจะมาสร้าง Project โดยใช้ คําสั่งนี้ได้เลย

vue create app-test

app-test คือชื่อของ Project ที่ต้องการจะสร้าง

เมื่อเรียกคําสั่งนี้ vue-cli จะถามคําถามต่างๆในการเริ่มสร้าง Project ให้ตอบไปประมาณนี้

เมื่อโหลดเสร็จแล้วจะได้ Folder ชื่อตามชื่อของ Project ของเราเลย ให้เราเข้าไปใน Folder นั้น ก็จะพบกับไฟล์ต่างๆมากมาย

ไฟล์สําคัญๆที่เราควรรู้คือ

public/index.html เป็นไฟล์ html หลักของเว็บ ซึ่งไฟล์นี้จะถูกนําไป Generate เป็น index.html ใหม่ โดยจะเพิ่มเติมในส่วนของ javascript(Vue.js) เมื่อเราสั่ง Build project
src เป็น Folder ที่เก็บ Source code ซึ่งส่วนใหญ่ที่เราเขียนทั้งหมดจะอยู่ภายใน Folder นี้
public/ เป็น Folder ที่เก็บ Static file ตามที่เราต้องการ ซึ่งเมื่อ สั่ง Build project ไฟล์ทั้งหมดที่อยู่ใน Folder นี้จะถูก copy ไปไว้ใน folder static ของ output ด้วย

สําหรับไฟล์อื่นๆ ในบทความต่อๆไปจะได้มาเรียนรู้กันครับ