一、完整引入法
    如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

    1. // main.js
    2. import { createApp } from 'vue'
    3. import ElementPlus from 'element-plus'
    4. import 'element-plus/dist/index.css'
    5. import App from './App.vue'
    7. const app = createApp(App)
    9. app.use(ElementPlus)
    10. app.mount('#app')

    二、按需引入
    需要使用额外的插件来导入要使用的组件。
    自动导入
    首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

    然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

    1. // vite.config.ts
    2. import AutoImport from 'unplugin-auto-import/vite'
    3. import Components from 'unplugin-vue-components/vite'
    4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    6. export default {
    7.   plugins: [
    8.     // ...
    9.     AutoImport({
    10.       resolvers: [ElementPlusResolver()],
    11.     }),
    12.     Components({
    13.       resolvers: [ElementPlusResolver()],
    14.     }),
    15.   ],
    16. }
    18. // webpack.config.js
    19. const AutoImport = require('unplugin-auto-import/webpack')
    20. const Components = require('unplugin-vue-components/webpack')
    21. const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
    23. module.exports = {
    24.   // ...
    25.   plugins: [
    26.     AutoImport({
    27.       resolvers: [ElementPlusResolver()],
    28.     }),
    29.     Components({
    30.       resolvers: [ElementPlusResolver()],
    31.     }),
    32.   ],
    33. }

    三、手动导入

    1. // App.vue
    2. <template>
    3.   <el-button>I am ElButton</el-button>
    4. </template>
    5. <script>
    6.   import { ElButton } from 'element-plus'
    7.   export default {
    8.     components: { ElButton },
    9.   }
    10. </script>
    11. // vite.config.ts
    12. import ElementPlus from 'unplugin-element-plus/vite'
    13. export default {
    14.   plugins: [ElementPlus()],
    15. }

    https://element-plus.gitee.io/zh-CN/guide/quickstart.html