Vue 组件在哪里导入？

Question

Vue 新手，从命令行处理一个脚手架项目。目前我有：

index.js

 import Vue from 'vue'
import Router from 'vue-router'
import Home

from '../components/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

main.js

 import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

 <template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  // default styles are here
}
</style>

和 home.vue

 <template>
    <chart-component></chart-component>
</template>
// rest of home

我正在尝试创建和导入 chart-component.vue 以在 home.vue 内部使用，但不确定在哪里导入它。我尝试将其添加到 main.js 和 App.vue --- 中，但未成功。

chart-component.vue

 <template>
    <div>
        <h1>Testing Chart Component</h1>
    </div>
</template>

<script>
    export default {
        name: 'chart',
        data() {
            return {

            }
        }
    }
</script>

这似乎是一个简单的问题，但不确定如何解决。我最好的猜测是将其导入 App.vue 并在 components { ChartComponent } name 。第二次尝试将其导入 main.js 并将 ChartComponent 放入 components: { App, ChartComponent } 内。

原文由 Vincent Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会将您的组件从 ChartComponent 重命名为 chart-component ，因为破折号不是受支持的字符。 Vue 会根据需要正确地将名称转换为破折号，但是当您在代码中搜索组件时，使用一致的名称会有所帮助。

反正。要使用组件，您需要先导入并定义它

家.vue：

 <template>
    <ChartComponent></ChartComponent>
</template>

<script>
import ChartComponent from './ChartComponent';

export default {
  components: {
    ChartComponent
  }
}
</script>

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

让它工作。因为我只需要在 home.vue 组件中本地使用它，所以我在添加的数据下将它导入到那里

components: {
    'chart-component': ChartComponent
}

原文由 Vincent Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议