JS, שגיאת ייבוא מדף אחר (ייבוא קומפוננטים בVUE)

chagold

אני עושה את הקוד הזה על בסיס מה שראיתי כאן, אבל הייבוא לא תקני

הקודים:

דף index.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

<div id="app">


<!-- App.vue -->
<template>
    <div>
      <button @click="show = true">Load Tooltip</button>
      <div v-if="show">
        <tooltip></tooltip>
      </div>
    </div>
</template>
  
</div>
<script>


new Vue({
  el: "#app",
  data: () => ({ show: false }),
    components: {
        Tooltip: () => import("Tooltip.js")
    },

  
})

    
</script>

דף Tooltip.js

<!-- Tooltip.vue -->
<template>
    <h2>Hi from Tooltip!</h2>
</template>

השגיאה היא

נראה שכאן מדברים ע"ז אבל אני לא יודע מה לעשות תכלס

yossiz

@chagold נסה לשנות את שם הקובץ ל-Tooltip.vue.
https://codesandbox.io/s/throbbing-pond-go9id

chagold

@yossiz תודה רבה
2 שאלות:

למה כשאני משכפל את הדוגמא 1:1 לשרת אצלי (וניגש לקובץ public/index.html) זה לא עובד (הדף חלק)?
איך בדוגמא שהבאת הדף index.html יודע לקרוא את הנתונים שנמצאים בקובץ main.js

yossiz

@chagold התשובה לשתי השאלות אחד
אי אפשר להריץ פרוייקט VUE סתם ככה, זה צריך לעבור שלב "קימפול" (או יותר נכון "תרגום", transpilation) כדי לקבל קוד HTML ו-JS תקני.
זה המשימה של הכלי vue-cli-service,
כדי "לבנות" את הפרוייקט למשהו שתוכל לגשת אליו מכל מקום, צריך להריץ vue-cli-service build ואז נוצר בתקיית dist הקבצים הסופיים שהדפדפן יודע לרנדר.
כדי להריץ שרת לוקלי לצורך פיתוח (עם hot reloading -- עדכון אוטומטי של הדף כל פעם שאתה משנה את הקוד, ועם עוד כל מיני פיצ'רים יפים אחרים) תריץ vue-cli-service serve.

הפקודות vue-cli-service הנ"ל מוגדרות בקובץ package.json. במקום vue-cli-service אפשר פשוט להריץ npm run build ו-npm run serve. זה יחסוך את הצורך להתקין vue-cli-service בצורה גלובלית או לכתוב npx לפני הפקודה.

yossiz

@chagold עכשיו אני תופס מאיפה אתה מגיע...

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

כמובן שתוכל לכתוב בעצמך את ה-JS ששלב הבנייה יודע לבנות בשבילך, אבל...

chagold

למעשה מצאתי אופציה כאן

אני מממש את זה ככה וזה עובד.

<!-- index.html -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>


<div id="app">


<template>
    <div>
      <button @click="show = true">Load Tooltip</button>
      <div v-if="show">
        <tooltip></tooltip>
      </div>
    </div>
</template>
  
</div>
<script>


appp = new Vue({
  el: "#app",
  data: () => ({ show: false }),
    components: {
        Tooltip: httpVueLoader("Tooltip.vue")
    },

  
})

    
</script>

<!-- Tooltip.vue -->
<template>
        <h2>Hi from Tooltip!</h2>
</template>

שאלה מעשית:
אם אני מבין אז המימוש של מה ש@yossiz הראה זה ב-node.js.

באמת בהרבה מדוגמאות הקוד לVUE אני רואה את זה במימוש עם מהדר (ולא כמו שאני עשיתי בHTML+js נטו).
האם אני חייב (כדי להיות עדכני, ותואם לנורמות הקוד שקהילת הקוד שלך הולכת עם זה) לשנות את כל המערכת שלי לעבור לטכניקה של node.js?

יוסף בן שמעון

@chagold אמר בJS, שגיאת ייבוא מדף אחר (ייבוא קומפוננטים בVUE):

האם אני חייב

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

תחומים - פורום חרדי מקצועי

JS, שגיאת ייבוא מדף אחר (ייבוא קומפוננטים בVUE)