如何在新的 Vue3 项目中使用 Vue2 旧组件（.vue 文件）？

Question

如何在新的 Vue3 项目中使用 Vue2 旧组件（.vue 文件）？

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>

Run Code Online (Sandbox Code Playgroud)

这是我的 main.js：

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

Run Code Online (Sandbox Code Playgroud)

这是我旧的简单 Vue2 组件 (myOldVueComponent.vue)：

<template>

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

</template>

<script>

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

</script>

Run Code Online (Sandbox Code Playgroud)

我在导入“.vue”文件时遇到错误：uncaught SyntaxError: Unexpected token '<' （意思是<template>我的旧组件中的标签。

Answer 1

gba*_*zzi 5

Vue2 组件适用于 Vue3。这不是您代码中的问题。

问题在这里：

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

Run Code Online (Sandbox Code Playgroud)

您不能直接在浏览器中导入 .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 世界的初学者

归档时间：	5 年，1 月前
查看次数：	2528 次
最近记录：	5 年，1 月前