בשיעור זה ניצור פרויקט vue ראשון תחילה אונליין ולאחר מכן אצלנו על המחשב.

1. פרויקט Vue ראשון אונליין

הדרך הקלה ביותר לנסות את הדוגמאות פה בקורס או לבנות תוכניות Vue קטנות היא אונליין באתר:

https://play.vuejs.org/

בכניסה ראשונה לאתר תראו על המסך את הקוד הבא בצד שמאל:

 <script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

ואת התוצאה שלו בצד ימין, שזה בעצם הטקסט Hello World ואחריו תיבת טקסט. בשביל המשחק נסו לשנות בקוד בצד שמאל את ההודעה לאיזשהו טקסט אחר ותראו את הטקסט מתעדכן בצד ימין.

הקוד עצמו כתוב בפורמט שנקרא SFC שזה קיצור ל Single File Component. זה פורמט ספציפי לתוכניות Vue ויכול לכלול שלושה חלקים:

1. חלק script שם אפשר לכתוב קוד JavaScript רגיל.

2. חלק template שם אנחנו כותבים משהו שנראה קצת כמו HTML.

3. חלק style שמאפשר לכתוב הגדרות CSS.

בשביל המשחק בואו נוסיף בלוק style שנראה כך:

<style>
  body { background: orange; }
  h1 { color: blue }
</style>

קל לראות את השינוי בצד ימין גם לצבע הרקע הכללי של העמוד וגם לצבע של הטקסט. נמשיך את הניסוי ונעדכן את בלוק ה style באמצעות הוספת מאפיין scoped:

<style scoped>
  body { background: orange; }
  h1 { color: blue }
</style>

ועכשיו זה מתחיל להיות מעניין! בגירסה הזאת רק הצבע של ה h1 התעדכן אבל צבע הרקע של ה body לא נקלט. הגדרת scoped לבלוק style גורמת לו להשפיע רק על קוד HTML שנוצר בבלוק ה template. וזה כבר רומז לנו משהו על Vue שיהיה מעניין לשים לב אליו ככל שנתקדם בקורס.

בעבודה עם Vue אנחנו נכתוב קבצי Vue שכל אחד מהם אחראי על חלק אחר ב HTML. העמוד המלא יורכב משילוב קוד של מספר קבצי ה Vue בתוכנית. הדבר שאנחנו כותבים בתוך כל קובץ Vue נקרא קומפוננטה וכן הרבה פעמים אנחנו רוצים שקוד בכל קומפוננטה ישפיע רק על אותה קומפוננטה. טיפ אחרון לפני שניפרד מבלוק הסטייל הוא שאפשר לכתוב מספר בלוקים של style, חלקם עם scoped וחלקם בלי כדי לשלב קוד עיצוב של הקומפוננטה עם קוד עיצוב כללי יותר:

<style scoped>
  h1 { color: blue }
</style>

<style>
  body { background: orange; }
</style>

2. יצירה והפעלת פרויקט מקומי

למרות שנוח לשחק באתר Vue Playground את הפרויקטים האמיתיים שלנו נעדיף לכתוב בקבצים על המחשב, וגם בקורס אני ממליץ לכם ליצור פרויקטים מקומיים על הדיסק. בצורה כזאת אנחנו מבינים טוב יותר מה קורה, מקבלים גישה טובה יותר לכלי הפיתוח ואיתור השגיאות ויותר קל לחזור לדוגמאות בעתיד.

בשביל ליצור פרויקט Vue על המחשב אני צריך להתקין את node.js (או אחת האלטרנטיבות כמו Deno או Bun). אם אתם לא בטוחים איך להתקין את node.js מוזמנים להסתכל בוידאו שהקלטתי על ההתקנה מקורס node.js בקישור:

https://www.tocode.co.il/bundles/nodejs/lessons/02-setup?tab=video

אחרי שיש לכם את node.js מותקן הפעילו משורת הפקודה את הפקודה:

$ npm create vite@latest hello-world -- --template vue-ts

ותקבלו תיקיית פרויקט בשם hello-world תחת התיקייה הנוכחית. בשביל להתחיל לעבוד עם הפרויקט נמשיך ונפעיל:

$ cd hello-world
$ npm install

את פקודת npm install יש להפעיל רק פעם אחת בתיקיית הפרויקט. כדי להפעיל את שרת הפרויקט במצב פיתוח אני מריץ:

$ npm run dev

ובדפדפן אני נכנס לכתובת שהוצגה על המסך, בדרך כלל זה יהיה localhost:5173.

אחרי שראיתם את מסך הפתיחה של הפרויקט נפתח את הקוד בעזרת VS Code. שימו לב לא לסגור את ה npm run dev כדי שהשרת ימשיך לרוץ.

בתוך VS Code כדי לפשט את העבודה עם Vue מומלץ להתקין את התוסף:

https://marketplace.visualstudio.com/items?itemName=Vue.volar

3. סקירת קוד הסטארטר

אנחנו כבר יודעים שקוד Vue מורכב מקבצי SFC שמורכבים מ-3 חלקים, ולכן הקובץ הראשון שנרצה לפתוח יהיה הקובץ App.vue כדי לראות את שלושת החלקים. זה הקובץ המרכזי באפליקציה שאחראי על הצגת מסך הפתיחה. בשביל המשחק עדכנו את קוד ה Template שלו לקוד הבא:

<template>
  <h1>Hello World</h1>
</template>

ואם השארתם את npm run dev פתוח תוכלו לראות את מסך הפתיחה המעודכן שכעת מכיל רק את הכותרת שכתבנו. בשלב זה אני מתעלם מהקוד בתוך ה script וגם מה style.

הקובץ המעניין הבא בתוכנית הוא index.html. לא היה לנו את הקובץ הזה ב Playground, וזה פשוט קובץ ה HTML שמכיל את המסגרת של העמוד. אנחנו רואים שהוא מגדיר את ה title, אייקון, דיב אחד עם מזהה בשם app והכי חשוב סקריפט בשם main.ts.

בתוך הקובץ main.ts אני מוצא את הקוד הבא:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

זה הקוד שיוצר את תוכנית ה Vue שראיתי. הוא טוען את App מהקובץ App.vue ומחבר אותו ל div עם המזהה app. חוץ מזה הוא כולל גם את השורה import ./style.css. שורה זו אחראית על טעינת הקובץ style.css, שיהיה קובץ הגדרות CSS גלובאליות. בצורה כזאת בתוך קבצי ה Vue אפשר לכתוב רק הגדרות style עם המאפיין scoped, ואת כל ה CSS הכללי של העמוד נכתוב בקובץ CSS רגיל.

4. עכשיו אתם

1. צרו פרויקט Vue אצלכם על המכונה כמו שיצרתי בוידאו.

2. עדכנו את הקובץ App.vue כדי שיציג דף מידע פשוט, לדוגמה הציגו כותרת "סיבות ללמוד Vue" ואחריה רשימה של סיבות בגללן בחרתם ללמוד Vue.

3. עדכנו את ה title בקובץ ה index.html לכותרת שתתאים לעמוד שיצרתם.

4. ודאו שאתם רואים את העמוד בדפדפן, ושכל פעם שאתם שומרים שינוי באחד הקבצים הדפדפן מראה לכם את התוכן העדכני.