Vue.js 如何在VueJS2 CDN项目中使用组件？

我几乎被它卡住了，我甚至不确定我所尝试的是否可能。 如果需要，这里是我的项目：

更新： 我不知道如何更好地展示它，因为这是最好的。。基本上，我将NestedComponent传递到组件中，该组件将被传递到app.js中，app.js将其呈现到index.html中。就是这样，因为某些原因，它不起作用

/“main.js”呈现到index.html的Vue文件
新Vue({
el:“#应用程序”，
组件：{Component}，
模板：“”
})
从“组件”导入组件

/“Component.vue”正在传递到上述“app.js”中
{{title}}

你好
从“NestedComponent”导入NestedComponent
导出默认值{
名称：'组件'，
组成部分：{
嵌套组件
},
数据：{
标题：“你好”
}
}

/“NestedComponent.vue”传递到其父组件“component.vue”上的嵌套组件
{{im一个嵌套组件}

导出默认值{
名称：“NestedComponent”，
组成部分：{
},
数据：{
}
}

Vue
{{title}}

我认为有几件事导致了这个问题：

您正在使用

.vue

文件。它们需要特殊的

装载机

via 网页包或类似工具。然后，它们将被转换为一个正常值

.js

文件。在您的情况下，您拥有Vue的CDN版本，因此这些功能对您不可用

正如人们之前提到的，浏览器本机不支持使用

导入

和

导出

。这同样需要通过网页包或类似工具运行

在文档中查找类似信息

---

确保在问题主体中详细说明您想要实现的目标以及您遇到的问题，而不是在项目代码中添加外部链接。看见另外，如果您提供了一些代码，您可以将其作为问题正文中的一部分。@ghybs Updated，希望您现在能看得更清楚。

import

语句必须在任何过程代码之前。如果问题中的代码表示单独的文件，请使用HTML注释（

）或水平规则（

--

）

将代码块拆分为组件：{HelloWorld}

@Holiday如果您是新手，请说明。说有经验的人的反馈不会把你带到任何地方，肯定不会给你带来更好的支持。听起来你把太多事情搞混了，以至于你甚至无法正确地解释你做了什么和什么不起作用。您可能会更好地从第一步开始学习教程和指南。

// "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>