Question

我几乎坚持不懈，甚至不确定自己尝试的方法是否可行。如果需要，这是我的项目： https://drive.google.com/open?id=1lty3rzUs1h7Rtw5tsN92WeaTBJw2fqVy

已更新：我不确定如何更好地显示它，因为这是最好的显示。基本上，我将NestedComponent传递给Component，后者传递给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>

Answer 1

我认为是引起问题的一些原因：

您正在使用.vue个文件。他们需要通过特殊的loaders Webpack或类似工具。然后将它们转换为普通 .js个文件。就您而言，您拥有CDN版本的Vue，因此这些功能将对您不可用。
正如人们之前提到的，浏览器本身不支持使用import和export。再次需要通过Webpack或类似工具来运行。

在文档中查找类似信息 https://vuejs.org/v2/guide/single-file-components.html

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

1 个答案: