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 }
。
答案 0 :(得分:4)
我会将您的组件从ChartComponent
重命名为chart-component
,因为短划线不是受支持的字符。 Vue会根据需要将名称正确转换为破折号,但是当您在代码中搜索组件时,有助于获得一致的名称。
反正。要使用组件,您需要导入它并首先定义它
home.vue:
<template>
<ChartComponent></ChartComponent>
</template>
<script>
import ChartComponent from './ChartComponent';
export default {
components: {
ChartComponent
}
}
</script>
答案 1 :(得分:1)
让它发挥作用。因为我只在home.vue
组件内部本地需要它,所以在我添加的数据
components: {
'chart-component': ChartComponent
}