导入一个 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>