代码

#自动导入

#安装 unplugin-vue-components 和 unplugin-auto-import 插件

npm install -D unplugin-vue-components unplugin-auto-import

#自动导入 图标

#安装 unplugin-icons 插件

npm install -D unplugin-icons

代码

demo\vite.config.js
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'

  //unplugin
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  import Icons from 'unplugin-icons/vite' //图标
  import IconsResolver from 'unplugin-icons/resolver'

  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [
      vue(),

      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue'], 

        resolvers: [
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver(),
        ],
      }),
      Components({
        resolvers: [
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          }),
        ],
      }),

      Icons({
        autoInstall: true,
      }),

    ],
  })

demo\src\main.js
    import { createApp } from 'vue'

    /*
    //整体导入 ElementPlus 组件库
    import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
    import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
    import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包
    */

    import App from './App.vue'

    const app = createApp(App)

    /*
    //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    //app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中s
    app.use(ElementPlus, {
        locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
    })
    */

    app.mount('#app')
    
demo\src\App.vue
    <script setup>
        // 消息
        const openMsg = () => {
            ElMessage({
                type: 'success', // success | warning | info | error
                message: 'dengruicode.com',
                showClose: true
            })
        }

        // 确认框
        const openConfirm = () => {
            ElMessageBox.confirm('确认删除?', '标题', {
                type: 'warning',
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            }).then(() => {
                console.log('确认')
            }).catch(() => {
                console.log('取消')
            })
        }

        // 通知
        const openNotifiy = () => {
            ElNotification({
                title: '标题',
                message: '邓瑞编程',
                duration: 1500 // 展示时间 [单位:毫秒]
            })
        }

        // 通知2
        const openNotifiy2 = () => {
            ElNotification({
                type: 'success', // success | warning | info | error
                title: '标题',
                message: 'dengruicode.com',
                duration: 1500,
                position: 'bottom-right'
            })
        }

        const url = ref('dengruicode.com')
    </script>

    <template>
        <h3>按钮</h3>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>

        <h3>图标</h3>
        <!-- <el-icon><Plus /></el-icon> -->
        <el-icon><i-ep-Plus /></el-icon> <!-- i-ep- -->
        <el-icon><IEpEdit /></el-icon> <!-- IEp- -->
        <el-icon><IEpDelete /></el-icon>
        <el-icon class="is-loading"><IEpLoading /></el-icon>

        <h3>提示框</h3>
        <el-button @click="openMsg">消息</el-button>
        <el-button @click="openConfirm">确认框</el-button>
        <el-button @click="openNotifiy">通知</el-button>
        <el-button @click="openNotifiy2">通知2</el-button>

        <h3>输入框</h3>
        <el-input v-model="url" placeholder="请输入网址" />
    </template>

    <style scoped>
    
    </style>