導入一個 vue.js 組件

Question

您好，我在 vue.js 上的練習中導入組件時遇到問題。

這是我的文件的架構

我在 CarPage.vue 中，我想導入 CarList.vue 和 CarDetails.vue。

這是我導入的代碼部分：

<script>
import CarList from '../components/CarList.vue'
import CarDetails from '../components/CarDetails.vue'
export default {
    components: {CarList, CarDetails}
}
</script>

我有這個錯誤：

Failed to compile.

./src/components/pages/CarPage.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/pages/CarPage.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../components/CarDetails.vue' in 'C:\Users\rollivier\Desktop\Franck\dicolor\vue\medium\src\components\pages'

Answer 1

您的CarPage.vue位於同一個組件文件中。 所以你需要這樣導入：

<script>
import CarList from '../CarList.vue'
import CarDetails from '../CarDetails.vue'
export default {
    components: {CarList, CarDetails}
}
</script>