第一步，如何按需引入element-plus

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

第二步，修改vite配置

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 path from 'path'
const resolve=dir=>path.resolve(__dirname,dir)
// https://vitejs.dev/config/
export default defineConfig({
  // plugins: [vue()],
  plugins: [
    vue(),
    // ...element-plus按需引入配置
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve:{
    alias:{
      '@':resolve('src'),
      '@/components':resolve('src/components')
    }
  },
  css:{
     preprocessorOptions:{
      //全局样式引入
      scss:{
        // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "@/style/global.scss";'
      }
     }
  },
  base:'/',//设置打包路径
  // server:{
  //   port:4000,//设置服务启动端口号
  //   open:true,//设置服务启动时是否自动打开浏览器
  //   cors:true,//允许跨域

  //   //设置代理，根据我们项目实际情况配置
  //   // proxy:{
  //   //   '/api':{
  //   //     target:'http://xxx.xxx.xxx.xxx:8000',
  //   //     changeOrigin:true,
  //   //     secure:false,
  //   //     rewrite:(path)=>path.replace('/api/','/')
  //   //   }
  //   // }
  // }
})

第三步：使用ElLoading

const loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)',
})

这时问题出现了：
loading框并没有居中显示，样式也是错乱的，f12查看dom时也没有找到相关的loading class

第四步：百度

在main.js中引入这两个文件，ElLoading，ElMessage组件样式就能正常显示
import 'element-plus/theme-chalk/el-loading.css'
import 'element-plus/theme-chalk/el-message.css'