我几乎陷入了困境，甚至不确定我所尝试的是否可行。如果需要，下面是我的项目：https://drive.google.com/open?id=1lty3rzUs1h7Rtw5tsN92WeaTBJw2fqVy
更新时间：我不知道如何更好地展示它，因为这是最好的。。基本上，我将NestedComponent传递到Component中，Component将被传递到app.js中，app.js将其渲染到index.html中。由于某些原因，仅此而已。
// "main.js" the Vue file that renders to the index.html
new Vue({
el: '#app',
components: { Component},
template: '<Component/>'
})
import Component from 'Component'
// "Component.vue" that is getting passed into the above "app.js"
<template lang="html">
<div>
<p>{{ title }}</p>
<h1>Hi!</h1>
<NestedComponent/>
</div>
</template>
<script>
import NestedComponent from 'NestedComponent'
export default {
name: 'Component',
components: {
NestedComponent
},
data: {
title: 'Hello'
}
}
</script>
// "NestedComponent.vue" a nested component that is getting passed onto it's parent Component "Component.vue"
<template lang="html">
<div>
<p>{{ im a nested component }}</p>
</div>
</template>
<script>
export default {
name: 'NestedComponent',
components: {
},
data: {
}
}
</script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">{{title}}</div>
<script type="text/javascript" src="/script.js"></script>
<script src="app.js"></script>
</body>
</html>
我认为有几件事导致了这个问题：
- 您正在使用
.vue文件。它们需要特殊的loadersWebpack或类似工具。然后将它们转换为法线.js文件。在您的情况下，您有Vue的CDN版本，因此这些功能将不可用 - 正如人们之前提到的，浏览器本身不支持使用
import和export。这再次需要通过Webpack或类似工具运行
在文档中查找类似信息https://v2.vuejs.org/v2/guide/single-file-components.html