一、安装

在项目中使用下述命令即可

npm install element-plus --save

二、引用

1、完整引用

项目打包的时候会将所有UI组件都打包进去，不管项目中是否有使用到

修改main.js：

import {createApp, ref} from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'  // 导入elementUI
import 'element-plus/dist/index.css'    // 导入elementUI样式

const app = createApp(App)
app.use(ElementPlus)    // 使用elementUI
app.mount('#app')

2、按需引用

项目打包的时候只会打包引用到的组件

按需引用需要三方插件支持，在项目目录下执行下述命令进行安装

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

修改项目配置文件vite.config.js:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 按需导入需要import的库
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 按需导入
    AutoImport({
    resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

注意：

我这边使用的是Vite所以修改的是这个文件，如果使用的是别的请参考官网进行修改
上述的导入方式是自动导入，还可以按需手动导入，这里不进行叙述，如有需要可参考官网进行使用
在main.js中导入一下对应的css样式，否则elmesaage这种可能会出现样式缺失的情况

/* 导入elementUi 样式, 不导入的话message会不显示样式 */
import "element-plus/theme-chalk/el-loading.css";
import "element-plus/theme-chalk/el-message.css";
import "element-plus/theme-chalk/el-notification.css";
import "element-plus/theme-chalk/el-message-box.css";

三、使用

直接在官网组件库中选择选中需要的组件即可，例如：

14、Vue-组合式-使用elementUI

一、安装

二、引用

1、完整引用

2、按需引用

三、使用