התקנה ושימוש עם bootstrap-vue

[Shaya]

@חוקר אמר בהתקנה ושימוש עם bootstrap-vue:

עם התחביר template וסקריפט export default
איפה אוכל למצוא מידע מדוייק לחלק הזה?

הם 2 דרכים שונים לכתיבת קומפוננטס (רכיבים) ב-Vue.

חלק חשוב שפריימוורק כמו Vue וכדו' נותן הוא היכולת לחלק את הקוד לקומפוננטס, כאמור ל-Vue יש באופן כללי 2 דרכים לכתוב קומפוננטס:

1. אפשר להמשיך בסגנון הנ"ל ולהצהיר על קומפוננט בצורה הזאת:

Vue.component('my-btn', {
  template: `
    <button class="btn-primary" @click.prevent="handleClick">
      <slot></slot>(clicked - {{count}})
    </button>
  `,
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      this.count++;
      console.log('clicked', this.count);
    },
  },
});

וב-HTML קוריאים לקומפוננט:

<my-button></my-button>

בצורה הזאת מקבלים את כל הכוח של הספריה, והיתרון הגדול הוא שלא צריך build step, אפשר פשוט להכניס את Vue מ-CDN ולהתחיל לכתוב.

2. אבל Vue גם מציע יותר מזה: Single File Components (SFC), שנכתבת בצורה שונה קצת:

<template>
  <p class="demo">
    <button class="btn-primary" @click.prevent="handleClick">
      <slot></slot>(clicked - {{count}})
    </button>
  </p>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      this.count++;
      console.log('clicked', this.count);
    },
  },
};
</script>

<style scoped>
.btn-primary {
  display: inline-block;
  font-size: 1.2rem;
  color: #fff;
  background-color: #3eaf7c;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  transition: background-color 0.1s ease;
  box-sizing: border-box;
  border-bottom: 1px solid #389d70;
}
</style>

כפי שאפשר להבין מהשם "single file componets", בגישה הזאת כותבים את כל רכיבי הקומפוננט (HTML, CSS, Javascript) בקובץ אחד.
יש בזה הרבה יתרונות:

• כל קומפוננט חי ב-scope נפרד
• אפשר להשתמש עם מודולים
• הדגשת תחביר
• אפשרות ל-Scoped CSS
  ועוד

בגישה הזאת צריכים כמובן build step, אבל אין צורך להיבהל
Vue CLI הופך את כל התהליך לפשוט ביותר.

על SFC ראה יותר בתיעוד.
דוגמאות הקוד הנ"ל לקחתי מכאן.

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

בהצלחה!!

[yossiz]

נשמע לי בינתיים מורכב מידי להשתמש בזה עם npm

אני ממליץ כן לעבוד בצורה של NPM. זה לא כל כך מורכב כמו שזה נראה.
אני אסביר מה קורה מאחורי הקלעים כדי שתבין:
אפליקציית VUE בנוייה מקומפוננטים. הדרך לבנות קומפוננט הוא על ידי קריאה לבנאי new Vue עם כל הפרטים על הקומפוננט בתוך אובייקט שאתה מעביר לבנאי, (דאטה, מתודות, הטמפלט של וה-HTML וכו').
אפליקצייה גדולה בנוייה מקומפוננטים רבים שכל אחד מורכב מעוד קומפוננטים וכל אחד מאלו מעוד וכו'.
כמו בכל אפליקציה גדולה, בשלב כלשהו חייבים לפצל את הקוד לקבצים שונים, והכי טוב שכל קומפוננט יהיה בקובץ נפרד.
והרי בצד לקוח אין לנו דרך לעשות require לקבצים אחרים?
לשם כך מאז ומתמיד נהוג להשתמש ב-webpack וכלים דומים, כלים אלו מה הם עושים? הם קוראים את כל הקבצים שכתבת ומערבלים את הכל לקובץ אחת ענקית, וכל פעם שכתבת require מחליפים את זה במשתנה שמכיל את האובייקט עצמו.
כך פחות או יותר.
מה ש-VUE עשו, שהם לקחו את זה צעד אחת קדימה.
אמרו, הרי בכל מקרה הקבצים עוברים שלב של תרגום וקמפול, אז במקום שתכתוב את כל ה-HTML של הטמפלייטים בתוך ה-JS, ובמקום שכל פעם תקרא לבנאי של הקומפוננט עם כל הפרמטרים מסודרים בתוך אובייקט כדי לבנות קומפוננט, נעשה סוג קובץ חדש עם סיומת Vue שיכלול 3 חלקים, א. סקריפט, ב. HTML, ג. CSS, וזה יהיה הקומפוננט, וכדי להשתמש בו פשוט תכתוב import somename from file.vue ובשלב הקמפול אנחנו נשנה את זה לקריאה לבנאי עם כל הפרמטרים מסודרים כמו שצריך.
ואיך נכנס נוד ו-NPM לתמונה?
אז על ראשון ראשון, למה צריך נוד? פשוט כי כלי webpack הוא אפליקציית CLI שנכתב ב-JS ומריצים את זה על ידי נוד.
ומה עם NPM?
זו דרך נוחה להוסיף ספרייות של אחרים במקום להוסיף תגי סקריפט לקובץ פשוט עושים require לספרייה ו-webpack מוסיפה אותה לבנדל הסופי.
ומה זה התחביר המשונה של export ו-import?
כלום, זה התחביר החדש שהוא חלק מ-ES6 עבור ייבוא וייצוא מודולים. זה מקביל פחות או יותר ל-require של נוד.

[dovid]

@yossiz האם @חוקר צודק שאין על זה כמעט תיעוד?
האם נראה לך שמה שכתבת די בו בשביל לקפוץ מאפס בצד לקוח לכל זה?

[dovid]

בשולי הדברים, למרות שנעלבתי ש@חוקר לא שעה לעצתי והלך אחריך @yossiz התיישבתי בדעתי והחלטתי שהצדק איתך ונכון להיום vue טובה יותר.
אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי, לעיתים אני אפילו לא מפצל את הסקריפט מהhtml. ייתכן ש@חוקר נמצא באותו מקום.

[yossiz]

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

@yossiz האם @חוקר צודק שאין על זה כמעט תיעוד?

לא הבנתי ממנו שהוא טוען שאין תיעוד. בכל מקרה ב-VUE יש תיעוד יפה מאוד.

האם נראה לך שמה שכתבת די בו בשביל לקפוץ מאפס בצד לקוח לכל זה?

¯/_(ツ)_\¯
על זה @חוקר אמור לענות...

[yossiz]

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

בשולי הדברים, למרות שנעלבתי ש@חוקר לא שעה לעצתי והלך אחריך @yossiz התיישבתי בדעתי והחלטתי שהצדק איתך ונכון להיום vue טובה יותר.
אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי, לעיתים אני אפילו לא מפצל את הסקריפט מהhtml. ייתכן ש@חוקר נמצא באותו מקום.

אתה צודק לגמרי ש-webpack הוא קצת יותר מדי עבור אתר פשוט. ואפשר בהחלט להשתמש ב-VUE כספרייה פשוטה כמו jquery (וכן עושה @chagold). הבעיה היא שזה כאב ראש להוסיף ספרייות חיצונים לאתר שבנוי ב-VUE בלי שימוש ב-webpack. עיין בנושאים קודמים של @chagold...
אבל @חוקר דיבר גם על SPA אם כן אני ממליץ בחום להשתמש ב-webpack ולא לנסות לעבוד בדרך אחרת.

[dovid]

@yossiz אמר בהתקנה ושימוש עם bootstrap-vue:

אבל @חוקר דיבר גם על SPA אם כן אני ממליץ בחום להשתמש ב-webpack ולא לנסות לעבוד בדרך אחרת.

יש סקאלה מאוד רחבה בSPA. כל אתר שמסתיר פקד ומראה אותו נחשב אצלך SPA? קריאת AJAX בודדת? אני מצטט את התיעוד ל vue:

NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components.

אתה אומר לבן אדם שעד אתמול לא כתב JS כמעט בצד לקוח, ללכת על מתודה שמומלצת עבור Large Application. @חוקר, שנס מתנך, זה שווה.

[chagold]

@yossiz אמר בהתקנה ושימוש עם bootstrap-vue:

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

בשולי הדברים, למרות שנעלבתי ש@חוקר לא שעה לעצתי והלך אחריך @yossiz התיישבתי בדעתי והחלטתי שהצדק איתך ונכון להיום vue טובה יותר.
אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי, לעיתים אני אפילו לא מפצל את הסקריפט מהhtml. ייתכן ש@חוקר נמצא באותו מקום.

אתה צודק לגמרי ש-webpack הוא קצת יותר מדי עבור אתר פשוט. ואפשר בהחלט להשתמש ב-VUE כספרייה פשוטה כמו jquery (וכן עושה @chagold). הבעיה היא שזה כאב ראש להוסיף ספרייות חיצונים לאתר שבנוי ב-VUE בלי שימוש ב-webpack. עיין בנושאים קודמים של @chagold...
אבל @חוקר דיבר גם על SPA אם כן אני ממליץ בחום להשתמש ב-webpack ולא לנסות לעבוד בדרך אחרת.

גם היום אני (בפרויקט העיקרי שאני עובד עליו) כותב בקבצי vue נפרדים, ורק שזה לא בnpm אלא באמצעות ספריה אחרת שמדמה את webpack. אבל כבר עכשיו אני ג"כ מחפש את הזמן להמיר את כל הקוד לפלטפורמה שעל npm. אחת הסיבות זה כי רוב ככל הקומפוננטים של ההרחבות והפיצרים שכתובים על VUE זה על npm. אז אפשר אולי להמיר וכפי ש@yossiz הדריך אותי כאן בעבר, אבל זה ממש לא שווה את הזמן מול האפשרות להתחיל בדרך שהעולם כותב.

[חוקר]

תודה לכל העונים.
רק משהו אחד אשמח לחידודא או מראה מקום, אם אני כן עובד אם הNPM, מהי צורת העבודה כלפי המוצר המוגמר בשרת.
אם הבנתי נכון, אני מתקין ספריות ,מייבא וכו', ובסוף אני אמור לעשות איזה שהוא run.
מה קורה אחרי הrun?
נוצרים לי קבצי HTML וJS עדכניים?
אני מעלה לשרת (אני עובד על המחשב ומעלה לשרת) רק את המוצר הסופי? איפה זה יהיה?
וכן בהרבה דוגמאות של סוגי ספריות לצד לקוח ראיתי שלאחר הrun זה נגיש מ localhost:7070 וכדומה.
מה זה אומר? זה סטטי או שזה כן עם צד שרת?

[חוקר]

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

[davidnead]

Vue Mastery זה האתר האולטימטיבי ללימודי VUE. הסרטונים קלים לצפיה גם לדוברי עברית, וניתן גם לעשות תרגום אוטומטי של כיתוביות.
https://www.vuemastery.com/courses

כדאי להתחיל מintro-to-vue.
והיכרות עם החלק שעובד עם NPM וCLI שזה באמת לא מפחיד כדאי לראות בחלק real-world-vue

[dovid]

@חוקר אל תביא לנו פליירים ענקיים עם רמזים על אפשרות לקחת מישהו אחר, אתה בפורום תכנות ולא בתיק עבודות או קו"ח...
אכן @yossiz זרק אותך לטעמי (ואני דן אותו לכף חובה שהוא היה יותר לעומתי מאשר דורש טובתך) למים עמוקים מידי, אבל אם בחרת ללכת על זה אח תהסס, לך בכל הכח זה ישדרג אותך בכמה רמות (אתה מפרגן לעצמך את הפלייר הענק ששמת פה, אבל תסתכל על עצמך ככלום אם אתה תלוי באחרים בצד לקוח).

אני לא גמרתי להתעסק עם האגו שלי, שמקבל חיזוק מסברתי.
אני עדיין חושב שangularjs הרבה יותר מתאים לך, הוא שייך לדור הקודם שלא ידעו עוד מה זה webpack ולא עשו עסק כ"כ רציני מספריות צד לקוח כמו שvue או אנגולר 2 עושות. שמה תרגיש יותר בנח כי כל המושגים ה"עכשוויים" של תכנות צד לקוח שהרבה מהם הם צו אופנה או מתאימים רק למקרים כבדים, הם אופציונליים לגמרי.

ההדרכה של vue מבקש לא להשתמש בbuild tools למי שזו הפעם הראשונה שלו, כנראה בגלל שאם כן אז לא מבינים כלום מה שקורה. וכפי ש@yossiz אומר, להתחיל ככה, זה להיתקע שהרי התוספים והספריות שבונים על המשתמש בהם שהוא בreal world אימתני ולא סה"כ ממיר דף ססטי לדף קצת יותר חי. מאותה סיבה, וכפי ש@davidnead אומר, היה גם צריך לדחוך אותך ישר לCLI - שמה החיים האמיתיים של vue.

@חוקר תיידע אותי אם אתה רוצה עזרה בהתחלה בangularjs (שיש עליה בערך פי אלף קוד ודוגמאות כתובים באינטרנט, ולו בגלל שהיא בית נעים לטפשים ולא רק לאקדמאים בוגרי מדעי המחשב).

[yossiz]

@dovid חבל, אין שום הבדל בין VUE לאנגולרJS. שניהם אפשר להשתמש כספרייה בלי שלב build ובשניהם אפשר להשתמש עם webpack. ההבדל היחיד הוא שאנגולר JS הוא - לא בדרך החוצה - אלא כבר החוצה ולא מעכשיו אלא ממזמן, ו-VUE הוא ספרייה פופולארית נתמכת ועכשווית וגם הרבה הרבה פחות מסובך ועם ביצועים טובים יותר. (לגבי הביצועים ורמת הסיבוך אני מדבר מנסיון וידיעה ולא סתם השערות.)

אני ממליץ גם לך ללכת על VUE. לאדם כמוך זה ייקח בדיוק יומיים ללמוד אותה. ועוד שבועיים עד שתהיה בקי בה. ואז נדבר ותוכל להשוות. אין שום צורך להשתמש ב-NPM + Webpack. רק שלפעמים האינטגרציה עם ספרייות אחרות קצת מסובכת.

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

שיש עליה בערך פי אלף קוד ודוגמאות כתובים באינטרנט,

על זה כבר כתבתי בעבר, שזה נתון שהולך ומשתנה כל הזמן לרעת angularjs ולטובת vue

ולו בגלל שהיא בית נעים לטפשים ולא רק לאקדמאים בוגרי מדעי המחשב

לא הבנתי כלל וכלל על מה אתה מדבר. אין לי שום רקע במדעי מחשב, אני פחות מלומד ממך כי לא למדתי תכנות או מחשבים אף פעם בשום מוסד. ספריית VUE יותר פשוטה מאנגולר, היא מכניסה פחות מושגים חדשים מאגולר. שימוש ב-NPM לא נחשב מדעי מחשב. לשם דוגמה: באנגולר מקובל להשתמש ב-dependency injection, תסבוכת מיותרת לגמרי למתחילים.

נ.ב. אל תדאג, זו המילה האחרונה שלי בנושא. אני לא הולך להתווכח על זה יותר...

[yossiz]

@חוקר אמר בהתקנה ושימוש עם bootstrap-vue:

רק משהו אחד אשמח לחידודא או מראה מקום, אם אני כן עובד אם הNPM, מהי צורת העבודה כלפי המוצר המוגמר בשרת.
אם הבנתי נכון, אני מתקין ספריות ,מייבא וכו', ובסוף אני אמור לעשות איזה שהוא run.

(אם אתה משתמש בכלי ה-CLI של VUE לבנות פרוייקט חדש אז) בקובץ ה-package.json אתה מקבל שתי פקודות: start ו-build.
הפקודה start עושה בנייה שמיועדת לצורך פיתוח מקומי ומריצה שרת מקומי שניתן לגשת אליה בד"כ בכתובת localhost:8080.
בבנייה זו מופעלות אופציות עבור מפתחים שהעיקריים מביניהם הם אפשרות להשתמש בתוסף המפתחים של VUE לדפדפן כדי להסתכל במצב הפנימי של כל קומפוננט ובכל הדאטה שמצורף לו (כלי שימושי ונפלא).
ועוד דבר נפלא שנקרא hmr (hot module replacment)‎ שזה אומר שכל שינוי שתעשה בקוד תישלח לדפדפן בלי צורך לרענן את הדף.

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

[dovid]

@yossiz ראשית כל כבר כתבתי בvue לפני כמה שנים טובות (זה היה נראה לי 1)
שנית כבר ביום שכתבת שאתה ממליץ יותר על vue החלטתי להיכנס חזרה לספריה הזו, והחלטתי שהיא אכן טובה יותר, בפרט עבורי. וכך כתבתי פה, שהסכמתי איתך.
שלישית, מצטער שלא הבנת אותי, לא חשבתי שא"א להשתמש בvue ללא webpack. אני לא הכי מבריק בצד לקוח, אבל אני בהחלט בעל ניסיון בהכוונת אנשים חדשים וגם ישנים לטכנולוגיות, ומה לעשות: vue (וכל הפיימוורקים המודרניים) פחות מדברת ומתועדת למשתמש מהסוג שאמרתי.

כתבתי אקדמאים בוגרי מדעי המחשב, והחלטת שמדובר בך...
vue מכוונת לאפליקציית צד לקוח עכשוית, וזה כולל הרבה הרבה הקדמות לדעתי, שקשה לעבור על כולם ביומיים. אני קראתי לזה בהלצה "אקדמאים", הכונה היה כאלה שהצד לקוח זה הmain business שלהם, ולא השלמה של "פעם ב".

אדרבא, אני אשמח דוקא אם תדחוף פה לvue עוד יותר חזק - עד שתצליח.
@yossiz תודה על הvue ותודה על עוד הרבה!

[Shaya]

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי

נראה לי שבמקרים כאלה (שהדף מרונדר בצד שרת ויש רק צורך לזרוק קצת פונקציונליות ואינטראקטיביות בצד לקוח) יש פתרונות יותר אופטימליים, ראה למשל את Alpine.js, או Stimulus (האחרון הוא מהחבר'ה של Rails, אבל מלמעלה זה נראה יותר מסובך).

במקרה שכן יש צורך אמיתי לספריה מקיפה (כמו Vue, ריאקט וכו'), דהיינו באופן שבונים SPA אמיתי, סביר להניח שאז כבר במילא חשוב להכניס גם את Webpack.

בקיצור, לא צריך להיות פה וויכוח מה "יותר נכון" (כן Webpack לא Webpack) השאלה היא מה הצורך.
(ואגב, עצם הדיון אם יש צורך ב-SPA, זה כבר כן נושא לוויכוח בהרבה מקרים...).

[davidnead]

אני מצטרף לתומכים כאן הVUE, ובעיקר רוצה להצטרף לטענה שאם כבר VUE - תעשה את זה עד הסוף. כלומר העולם האמיתי. ללכת על הסקריפט בלי כל הפלוסים שמגיעים עם הבילד - זה לא רק להפסיד יתרונות חשובים, זה להפוך את VUE למקשה לך על החיים בלא מעט מובנים.
להשתמש כסקריפט טוב בשביל התרגילים הראשונים בשיעורי בית, לחוש את זה קצת, לא מעבר.
הכניסה לעולם האמיתי היא מפחידה, אבל כשקופצים למים רואים שזה ממש אבל ממש לא נורא.
אחד היתרונות המובהקים והמפורסמים של VUE זו עקימת למידה מהירה.
אני לא מדבר גבוה, אלא כאחד שלפני חצי שנה היה במקום הזה של פחד מVUE (ואף לא היה לי נסיון קודם בספריות דומות), ותוך כמה שבועות כבר הייתי עמוק בפנים. היום אבנה שם כל פרוייקט, ולא יודע איך אסתדר בלי זה.

והאמת? אם אתה רוצה להקטין את הפחד, תבקש ממישהו שבשביל הפעם הראושנה יכין לך את הבילד כדי שתוכל להנות מהעבודה החופשית. בפעם הבאה- כבר תמצא את הדרך להתקין לך לבד. שטויות.
עצם העבודה עם הCLI אחרי שזה כבר מותקן - זה אפילו לא שטויות.

[ב.ל]

@davidnead
באתר של vue יש תיעוד מפורט וברור גם למתחילים
עד שזה מגיע לעולם האמיתי של cli וכל הבנייה בפועל שזה משום מה סומכים עליך שתסתדר לבד..

[davidnead]

@ב-ל אמר בהתקנה ושימוש עם bootstrap-vue:

@davidnead
באתר של vue יש תיעוד מפורט וברור גם למתחילים
עד שזה מגיע לעולם האמיתי של cli וכל הבנייה בפועל שזה משום מה סומכים עליך שתסתדר לבד..

לכן נתתי את vuemastery, שהוא אתר משלים לאתר הרשמי של VUE, (יש אפילו קישורים לשם וסרטונים משם בתוך האתר הרשמי של VUE). ושם מראים לך הכל, צעד אחר צעד. מאוד מושקע, מאוד ברור, מאוד מעשי.

[ב.ל]

@davidnead אמר בהתקנה ושימוש עם bootstrap-vue:

@ב-ל אמר בהתקנה ושימוש עם bootstrap-vue:

@davidnead
באתר של vue יש תיעוד מפורט וברור גם למתחילים
עד שזה מגיע לעולם האמיתי של cli וכל הבנייה בפועל שזה משום מה סומכים עליך שתסתדר לבד..

לכן נתתי את vuemastery, שהוא אתר משלים לאתר הרשמי של VUE, (יש אפילו קישורים לשם וסרטונים משם בתוך האתר הרשמי של VUE). ושם מראים לך הכל, צעד אחר צעד. מאוד מושקע, מאוד ברור, מאוד מעשי.

לא חינמי.. [vue3]