如何在新的Vue2项目中使用.vue旧组件(.vue文件)？
如何在新的Vue2项目中使用.vue旧组件(.vue文件)？
提问于 2020-09-29 14:48:05
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：意外令牌'<' (意思是旧组件中的<template>标记)时出错。
回答 1
Stack Overflow用户
发布于 2020-09-29 14:59:56
Vue2组件在Vue3中工作。这不是代码中的问题。
问题在于：
<script src="./myOldVueComponent.vue"></script>不能在浏览器中直接导入.vue文件。在vue 1,2和vue 3中不能这样做。浏览器无法理解这种语法，需要有一个绑定器来转换您的代码，浏览器可以使用它。最受欢迎的打包机是webpack。
我强烈建议使用Vue cli来设置您的项目，特别是如果您是npm/bundler世界的初学者。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64122089
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号