Vue3项目中引入Element Plus组件(使用Vite构建)

安装Element Plus组件

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

引入组件

自动导入方式

1. 安装unplugin-vue-components 和 unplugin-auto-import插件

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

2.修改Vite配置文件

// vite.config.ts
import { defineConfig } from '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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

在App.vue文件中写入一下代码验证是否能自动引入组件：

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
 
</script>

运行成功即可