---
# System prepended metadata

title: Vue3 + Vite + Element Plus
tags: [Vite, Vue]

---

###### tags: `Vue` `Vite`
# Vue3 + Vite + Element Plus

```bash
$ yarn add element-plus
$ yarn add -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
```

修改 vite.config.js
```javascript=
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import ElementPlus from 'unplugin-element-plus/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        vue(),
        ElementPlus({
        // 引入的样式的类型，可以是css、sass、less等，
          importStyle: 'css',
          useSource: true
        }),Ï
        AutoImport({
              resolvers: [ElementPlusResolver()],
        }),
        Components({
              resolvers: [ElementPlusResolver()],
        }),
    ]
})