Vue에서 구성 요소를 가져올 위치

Vue에서 구성 요소를 가져올 위치

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

작성 및 Import를 시도하고 있습니다.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. 두 번째 시도는 로 Import하는 것입니다.main.js퍼팅ChartComponent안에서.components: { App, ChartComponent }.

당신의 컴포넌트의 이름을ChartComponent부터chart-component(대시는 지원되지 않기 때문에)Vue는 필요에 따라 이름을 대시로 올바르게 변환하지만 코드를 검색하여 구성 요소를 검색할 때는 일관된 이름을 사용하는 것이 좋습니다.

어쨌든 컴포넌트를 사용하려면 컴포넌트를 Import하여 정의해야 합니다.

home.vue:

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

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

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

일을 시작했어.제가 필요한 건 지역적으로만home.vue컴포넌트는 추가한 데이터로 Import했습니다.

components: {
    'chart-component': ChartComponent
}

Vue 3 스크립트 셋업 SFC에서 컴포넌트 Import가 훨씬 쉬워짐

<script setup>
  import ChartComponent from './components/ChartComponent.vue'
</script>

<template>
    <ChartComponent />
</template>

언급URL : https://stackoverflow.com/questions/50607228/where-to-import-component-in-vue