Как я могу использовать старый компонент Vue2 (файл .vue) с новым проектом Vue3?

Версия Vue3 отсутствует, но я не вижу примеров использования кода старых компонентов с новой версией. Как придешь?

Вот мой index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue 3 Example using Vue 2 component</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ product }}</h1>    
      <my-old-vue-component :my-prop="'my string in here'"></my-old-vue-component>
    </div>

      <script src="./main.js"></script>
      <script src="./myOldVueComponent.vue"></script>

    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

Вот мой main.js:

const app = Vue.createApp({
  data() {
      return {
          product: 'my product',
      }
  }
})

Вот мой старый простой компонент Vue2 (myOldVueComponent.vue):

<template>

    <div>
        {{myProp}}
    </div>

</template>

<script>

  
    export default {
        name: "myOldVueComponent",
        props: {
            myProp: { type: String }
        },
        data() {
            return {
               
        },
       
    }

</script>

Я получаю сообщение об ошибке при импорте файла .vue: uncaught SyntaxError: Неожиданный токен '‹' (имеется в виду тег <template> внутри моего старого компонента.


vue.js vuejs3 vuejs2
person AngularOne    schedule 29.09.2020    source источник
comment
да, насчет первой строчки с тегом ‹template›   -  person AngularOne    schedule 29.09.2020
comment
.vue файлы отлично работают с vue3, ваша проблема должна быть где-то еще   -  person arieljuod    schedule 29.09.2020
comment
попробуйте добавить свой компонент с помощью импорта JS вместо добавления тега скрипта   -  person arieljuod    schedule 29.09.2020

Ответы (1)


arrow_upward
5
arrow_downward

Компоненты Vue2 работают в Vue3. Проблема не в этом в вашем коде.

Проблема здесь:

<script src="./myOldVueComponent.vue"></script>

Вы не можете импортировать файлы .vue прямо в браузере. Вы не могли сделать это в vue 1,2 и пока не можете в vue 3. Браузер не может понять этот синтаксис, должен быть пакет, который преобразует ваш код - это то, что может использоваться браузером. Самые популярные бандлеры - это webpack, rollup ecc ecc.

См .: https://v3.vuejs.org/guide/single-file-component.html#for-users-new-to-module-build-systems-in-javascript

Я настоятельно рекомендую использовать Vue cli для настройки вашего проекта, особенно если вы новичок в мире npm / bundlers.

person gbalduzzi    schedule 29.09.2020
comment
нет изменений в монтировании, например, в старом коде? ничего такого? - person AngularOne; 29.09.2020
comment
Изменения есть, но они по-прежнему совместимы, и возникающая ошибка не вызвана проблемами совместимости vue 2 / vue 3. - person gbalduzzi; 29.09.2020
comment
Внесены критические изменения, поэтому не все компоненты vue 2 совместимы с vue 3. v3 .vuejs.org / guide / migration / array-refs.html Одно из критических изменений, v-для ссылок в vue 2 назначают массив, v-для ссылок в vue 3 используют обратный вызов функции. - person LHJ; 18.12.2020
comment
@gbalduzzi Здравствуйте, где вы читали, что компоненты Vue2 работают в Vue3. ? Мне любопытно, потому что я не могу найти источник, и он мне нужен, потому что я думаю, что слышал то же самое. - person djcaesar9114; 13.01.2021