Vue.js เริ่มต้น ตอน1 (สร้าง Project)

4 Jul 2018,
Share: 

ในยุคนี้การทําเว็บส่วนใหญ่จะเน้นไปทางการทำ 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 แบบ ได้แก่

  1. browserify
  2. browserify-simple
  3. simple
  4. webpack
  5. webpack-simple

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

vue create app-test

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

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

Image

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

Image

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

  • 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 ด้วย

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

Run develop mode

เอาละ เราได้ Project มาแล้ว ต่อไป เราจะรัน Project ของเราใน mode dev กัน โดยใช้คําสั่ง

npm run serve

จะได้หน้าตาประมาณนี้

Image

vue-cli จะ start web server ให้เราที่ port 8080 ใช้ browser เปิดเข้าไปที่ “http://localhost:8080/” ได้เลย จะได้หน้าตาประมาณนี้

Image

Bulid project

ถ้าเราเขียนเว็บของเราเสร็จแล้ว แล้วต้องการจะเอาขึ้น Production เราจะต้อง Build โดยใช้คําสั่งนี้

npm run build

จะได้ประมาณนี้

Image

File output จะอยู่ใน Folder “dist

Image

Suggestion blogs

คําสั่งดู pin layout raspberry pi

คําสั่งที่ใช้ในการดู pin layout raspberry pi คือsudo gpio readallก็จะได้ layout มาแบบนี้

Flutter EP.5 จัดการ State ใน flutter ด้วย Provider

สวัสดีครับ ใน EP.4 เราได้เรียนรู้ Project structure file flutter กันไปแล้วนะครับ ในบทความนี้เราจะมาเรียนรู้การจัดการ State ใน Flutter ด้วย Provider กันครับ

vb.net excel database ด้วย OleDb

ในบทความนี้จะมาพูดถึงเรื่องการทํางานกับ file Excel ด้วย VB.NET โดยจะสามารถเข้าถึงข้อมูล แก้ไขข้อมูล และเพิ่มข้อมูล ด้วยคําสั่ง SQL เหมือนกับเป็น Database ตัวนึง ซึ่งการใช้งานจะต้องใช้ libraries ที่ชื่อว่า OleDb ใน Virtual Studio จะมีให้อยู่แล้ววิธีการใช้งานจะแบ่งเป็นสองแบบดังนี้การใช้งานโดยไม่ต้องการผลลัพธ์ของข้อมูลเช่น insert, update, deleteการใช้งานโดยต้องการผลลัพธ์ของข้อมูลเช่น Query ข้อมูลจาก Excel(คําสั่ง Select)


Copyright © 2019 - 2025 thiti.dev |  v1.58.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Nostr   Youtube channel   Telegram   Email contact   วงแหวนเว็บ