vue3使用element-plus

安装

# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

全局引入

main.js

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'//引入ElementPlus所有组件
import 'element-plus/dist/index.css'//引入ElementPlus样式
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)//注册使用
app.mount('#app')

按需引入(推荐) 

按需引入（因为vue3按需引入不需要一个个手动引入了，只要页面使用到的组件会自动帮你引入，何乐而不为呢）

安装插件：

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

在vite.config.js中使用插件

// 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()],,//插件二}),],
})

用webpack打包的项目中在vue.config.js或者webpack.config.js中配置

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

到这里就可以正常使用了，详细安装使用参考官网非常详细element-plus官网