vue使用components报错

vue3+element plus组件实现一个商城

跟着黑马程序员敲的，但是我自己使用的是npm，基本上没什么区别

问题：使用Components实现页面样式复用出现问题

vite-config.js文件

import { fileURLToPath, URL } from 'node:url'

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' 
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// import { ElementPlus } from '@element-plus/icons-vue/dist/types'
// import { defineConfig } from 'vite'  


// https://vitejs.dev/config/
export default defineConfig({
 // ...
 plugins: [
  vue(),
  // ...
  // AutoImport({
  //   resolvers: [ElementPlusResolver()],
  // }),
  // Components({
  //   resolvers: [ElementPlusResolver()],
  // }),
],
  base: '/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

page.vue页面，这里使用page-container实现页面代码的复用，但是由于没有加上Components，因此page-container不起作用，只有“主体部分”显示

<script>
</script>



<template>
    <page-container title="活动管理">
        <!-- 具名插槽extra：与page-container里面具名插槽名字对应 -->
        <template #extra>
            <el-button>添加分类</el-button>
        </template>

        <el-button>hello</el-button>
        主体部分
    </page-container>
</template>

<style lang="scss" scoped>

</style>

问题

当我不加上这些

import AutoImport from 'unplugin-auto-import/vite'

// import Components from 'unplugin-vue-components/vite'

// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

我的程序能正常运行，只是不能呈现page-container这里面的内容，但是我的程序一旦加上这些，就报错

不加上前面代码如图

加上前面那些代码如图

报错如下：

[vite] Internal server error: Failed to resolve import "element-plus/es/components/side/style/css" from "src\views\layout\LayoutContainer.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/APP/IDEA/vue01/src/views/layout/LayoutContainer.vue:9:128
  7  |  import { ElDropdownItem as __unplugin_components_6 } from 'element-plus/es';import 'element-plus/es/components/base/style/css';import 'element-plus/es/components/dropdown-item/style/css';
  8  |  import { ElAvatar as __unplugin_components_5 } from 'element-plus/es';import 'element-plus/es/components/base/style/css';import 'element-plus/es/components/avatar/style/css';
  9  |  import { ElSide as __unplugin_components_4 } from 'element-plus/es';import 'element-plus/es/components/base/style/css';import 'element-plus/es/components/side/style/css';
     |                                                                                                                                 ^
  10 |  import { ElMenu as __unplugin_components_3 } from 'element-plus/es';import 'element-plus/es/components/base/style/css';import 'element-plus/es/components/menu/style/css';
  11 |  import { ElSubMenu as _

他告诉我没有element plus 但是我已经安装了呀，为什么会这样？求各位大佬赐教。

——————————————————————————————————————————

解决方法：

我没使用后面的components，因为这个插槽是不需要另外配置的

但是为什么黑马程序员视频不用引用直接就可以使用页面名称来对应我也不知道，但是我自己使用的方法是：

把页面使用import引入进来，再按照插槽的方法进行页面渲染

代码如下

<script setup >
import page from '@/components/pageConatiner.vue';
</script>

<template> 
    


    <page title="活动管理">
        <template #extra>
            <el-button>添加分类</el-button>
        </template>
    </page>
    <!-- <page01></page01> -->
    
</template>

也能实现插槽的使用