Vue.js คือ ตอนที่ 1 : การตั้งค่า (Setting Up) สภาพแวดล้อม (Environment) Vue.js

17พ.ค. 2023 by รับทำแอพ สบายไอที

Vue.js คืออะไร
การตั้งค่า Vue.js
ขั้นตอนที่ 1: การติดตั้ง Node.js และ npm
ขั้นตอนที่ 2: การติดตั้ง Vue CLI
ขั้นตอนที่ 3: สร้างโครงการ Vue.js
โครงสร้างไดเรกทอรี Vue.js
Vue.js devtools
การใช้ Vue.js
การสร้างและใช้งานแอพ

เมื่อคุณเริ่มต้นเส้นทางการทำเว็บ Vue.js และทำแอพขั้นตอนแรกของคุณคือการตั้งค่าสภาพแวดล้อมการพัฒนาที่เหมาะสม ขั้นตอนนี้มีความสำคัญอย่างยิ่งในการรับรองว่าคุณสามารถทำเว็บ Vue.js และทำแอพ และเครื่องมือที่เกี่ยวข้องเพื่อทำเว็บ Vue.js และทำแอพแบบไดนามิกและเต็มไปด้วยฟีเจอร์ได้อย่างมีประสิทธิภาพ

1. Vue.js คืออะไร

ก่อนที่เราจะเจาะลึกขั้นตอนการตั้งค่า เรามานิยาม Vue.js กันสั้นๆ ก่อน Vue.js เป็นเฟรมเวิร์ก JavaScript แบบก้าวหน้าที่ใช้สร้างส่วนต่อประสานกับผู้ใช้ Vue ได้รับการออกแบบมาตั้งแต่ต้นเพื่อให้ปรับใช้ได้มากขึ้น ซึ่งแตกต่างจากเฟรมเวิร์กแบบ monolithic ไลบรารีหลักมุ่งเน้นไปที่เลเยอร์มุมมองเท่านั้น ทำให้ง่ายต่อการรวมเข้ากับไลบรารีอื่นหรือโปรเจ็กต์ที่มีอยู่

2. การตั้งค่า Vue.js

การติดตั้ง Vue.js เป็นกระบวนการที่ค่อนข้างตรงไปตรงมา วิธีที่ดีที่สุดในการตั้งค่า Vue.js สำหรับโครงการขนาดใหญ่คือผ่าน Vue CLI (Command Line Interface) Vue CLI เป็นระบบเต็มรูปแบบสำหรับการทำเว็บ Vue.js และทำแอพ อย่างรวดเร็ว โดยจัดเตรียมโครงร่างโครงการแบบโต้ตอบผ่าน @vue/cli, การสร้างต้นแบบอย่างรวดเร็วแบบ zero-config ผ่าน @vue/cli + @vue/cli-service-global, การพึ่งพารันไทม์ (@vue/ cli-service) และอินเทอร์เฟซผู้ใช้แบบกราฟิกเต็มรูปแบบเพื่อสร้างและจัดการโครงการ Vue.js

ขั้นตอนที่ 1: การติดตั้ง Node.js และ npm

ก่อนติดตั้ง Vue CLI ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js และ npm แล้ว Node.js เป็น JavaScript รันไทม์ที่อนุญาตให้คุณเรียกใช้ JavaScript บนเซิร์ฟเวอร์หรือคอมพิวเตอร์ของคุณ npm (Node Package Manager) เป็นตัวจัดการแพ็คเกจสำหรับ Node.js ช่วยให้คุณสามารถติดตั้งและจัดการแพ็คเกจที่คุณต้องการสำหรับโครงการของคุณ

ไปที่เว็บไซต์อย่างเป็นทางการของ Node.js ดาวน์โหลดเวอร์ชันเสถียรล่าสุด และทำตามคำแนะนำในการติดตั้ง หลังการติดตั้ง ให้เปิดเทอร์มินัลหรือพรอมต์คำสั่งและตรวจสอบการติดตั้งโดยพิมพ์คำสั่งต่อไปนี้:

node -v
npm -v

คำสั่งเหล่านี้ควรแสดงเวอร์ชันของ Node.js และ npm ที่ติดตั้งในเครื่องของคุณ

ขั้นตอนที่ 2: การติดตั้ง Vue CLI

เมื่อคุณติดตั้ง Node.js และ npm แล้ว คุณจะสามารถติดตั้ง Vue CLI ได้ เปิดเทอร์มินัลหรือพรอมต์คำสั่งแล้วพิมพ์คำสั่งต่อไปนี้:

npm install -g @vue/cli

คำสั่งนี้จะติดตั้ง Vue CLI ทั่วโลกในเครื่องของคุณ หลังการติดตั้ง ให้ตรวจสอบโดยพิมพ์:

vue --version

คำสั่งนี้ควรแสดงเวอร์ชันของ Vue CLI ที่ติดตั้ง

ขั้นตอนที่ 3: สร้างโครงการ Vue.js

เมื่อติดตั้ง Vue CLI แล้ว ตอนนี้คุณก็พร้อมที่จะสร้างโปรเจกต์ Vue.js แรกของคุณแล้ว ในเทอร์มินัลหรือพรอมต์คำสั่ง ให้นำทางไปยังไดเร็กทอรีที่คุณต้องการให้โปรเจ็กต์ของคุณอยู่ จากนั้น สร้างโครงการ Vue.js ใหม่โดยใช้คำสั่งต่อไปนี้:

vue create my-project

แทนที่ “my-project” ด้วยชื่อโครงการของคุณ คำสั่งนี้เริ่มต้นกระบวนการนั่งร้านโครงการแบบโต้ตอบ Vue CLI จะแจ้งให้คุณเลือกค่าที่ตั้งไว้ล่วงหน้า คุณสามารถเลือกค่าที่ตั้งไว้ล่วงหน้าซึ่งมาพร้อมกับการกำหนดค่าที่เหมาะสมสำหรับโครงการส่วนใหญ่ หรือเลือกคุณสมบัติด้วยตนเองสำหรับการตั้งค่าที่ปรับแต่งเป็นพิเศษ

3. โครงสร้างไดเรกทอรี Vue.js

เมื่อสร้างโปรเจ็กต์แล้ว ให้ไปที่โฟลเดอร์โปรเจ็กต์ ( cd my-project) นี่คือภาพรวมโดยย่อของโครงสร้างไดเร็กทอรี Vue.js เริ่มต้น:

node_modules: ไดเรกทอรีนี้มีแพ็คเกจ npm ทั้งหมดที่จำเป็นสำหรับโครงการของคุณ
public: ไดเร็กทอรีนี้มีindex.htmlไฟล์และเนื้อหาที่คัดลอกโดยตรงไปยังโฟลเดอร์ dist เมื่อสร้างโปรเจ็กต์ของคุณ
src: ไดเร็กทอรีนี้เป็นที่ที่คุณจะใช้งานเป็นส่วนใหญ่ ประกอบด้วยส่วนประกอบ Vue สินทรัพย์ และไฟล์ main.js ซึ่งเป็นจุดเริ่มต้นไปยังแอปพลิเคชัน Vue ของคุณ
package.json: ไฟล์นี้แสดงรายการแพ็กเกจที่โปรเจ็กต์ของคุณใช้ ให้คุณระบุเวอร์ชันของแพ็กเกจที่โปรเจ็กต์ของคุณใช้ได้ และทำให้บิลด์ของคุณทำซ้ำได้ ซึ่งจะช่วยในการดีบักปัญหาในเครื่องต่างๆ
babel.config.js: ไฟล์นี้กำหนดค่า Babel ซึ่งเป็นคอมไพเลอร์ JavaScript ที่ Vue ใช้เพื่อให้การสนับสนุนเบราว์เซอร์รุ่นเก่า
README.md: ไฟล์นี้โดยทั่วไปมีคำแนะนำเกี่ยวกับวิธีการใช้หรือมีส่วนร่วมในโครงการ

4. Vue.js devtools

Vue.js devtools เป็นส่วนเสริมสำหรับ Chrome และ Firefox ที่ให้คุณตรวจสอบแอป Vue.js สังเกตการเปลี่ยนแปลงข้อมูลและสถานะ และทำการดีบักการเดินทางข้ามเวลา เป็นเครื่องมือล้ำค่าเมื่อทำเว็บ Vue.js และทำแอพ

หากต้องการติดตั้ง ให้ไปที่ร้านค้าส่วนขยายของเบราว์เซอร์ (Chrome Web Store หรือส่วนเสริมของ Firefox) ค้นหา Vue.js devtools และติดตั้งส่วนขยาย เมื่อติดตั้งแล้ว คุณจะเห็นแท็บ Vue ใหม่ในเครื่องมือสำหรับนักพัฒนาของคุณ คุณสามารถเข้าถึงแท็บนี้ได้โดยคลิกขวาที่ใดก็ได้บนหน้าเว็บของคุณ เลือก “ตรวจสอบ” จากนั้นคลิกแท็บ “Vue”

5. การใช้ Vue.js

เมื่อคุณได้ตั้งค่าสภาพแวดล้อม Vue.js แล้ว คุณก็พร้อมที่จะเริ่มทำเว็บ Vue.js และทำแอพ ใน src ไดเร็กทอรี คุณจะพบไฟล์สำคัญสองไฟล์:

main.js: นี่คือจุดเริ่มต้นของแอปพลิเคชัน Vue.js ของคุณ ที่นี่ Vue จะถูกนำเข้า สร้างอินสแตนซ์ Vue ใหม่ และอินสแตนซ์นี้จะแนบกับองค์ประกอบใน HTML ของคุณ
App.vue: นี่คือองค์ประกอบ Vue หลักของคุณ ประกอบด้วยเทมเพลต สคริปต์ที่ส่งออกวัตถุที่เป็นตัวแทนของส่วนประกอบ และสไตล์ที่เลือกได้

ส่วนเทมเพลตใช้ HTML เพื่อกำหนดโครงสร้างของส่วนประกอบของคุณ ส่วนสคริปต์ประกอบด้วยฟังก์ชันการทำงานของคอมโพเนนต์ และส่วนสไตล์มีไว้สำหรับ CSS

แอป Vue แรกของคุณอาจเรียบง่ายดังต่อไปนี้:

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
}
</style>

แอพนี้แสดงหัวเรื่องบนหน้าพร้อมข้อความ “Hello Vue!”

6. การสร้างและใช้งานแอพ

หากต้องการทำเว็บ Vue.js และทำแอพ ให้ใช้คำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

npm run serve

คำสั่งนี้รวบรวมโค้ดของคุณ เริ่มเซิร์ฟเวอร์การพัฒนา และให้บริการแอปของคุณที่ URL ในเครื่อง โดยทั่วไปคือhttp://localhost: 8080 เปิด URL นี้ในเบราว์เซอร์เพื่อดูแอปพลิเคชัน Vue.js

Vue CLI ยังมีฟังก์ชันโหลดด่วน ซึ่งหมายความว่าการเปลี่ยนแปลงของคุณจะแสดงในเบราว์เซอร์โดยอัตโนมัติโดยไม่ต้องรีเฟรชด้วยตนเอง ทำให้กระบวนการทำเว็บ Vue.js และทำแอพราบรื่นยิ่งขึ้น

การตั้งค่าสภาพแวดล้อม Vue.js ที่เหมาะสมเป็นขั้นตอนแรกที่สำคัญในการทำเว็บ Vue.js และทำแอพ ด้วย Vue CLI กระบวนการนี้ค่อนข้างง่าย ทำให้คุณมีชุดเครื่องมือที่ครอบคลุมเพื่อเริ่มต้นเส้นทางการทำเว็บ Vue.js และทำแอพ ของคุณ จำไว้ว่ากุญแจสำคัญในการเชี่ยวชาญ Vue.js เช่นเดียวกับเครื่องมืออื่นๆ คือการปฏิบัติอย่างสม่ำเสมอและการประยุกต์ใช้ในโลกแห่งความเป็นจริง