vue3中使用element ui

在vue3中使用element ui，所使用的版本是elementui-plus。即最新版本的element ui

elementui-plus文档地址： https://element-plus.org/zh-CN/#/zh-CN

使用例子

1. 安装

npm i element-plus -S

2. 在main.js中注册

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' // 导入库
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 导入语言脚本
import 'element-plus/dist/index.css' // 导入样式
import './index.css'

const app = createApp(App)
app.use(ElementPlus, {
    locale: zhCn, // 使用的语言脚本
})
app.mount('#app')

3. 使用

<template>
  <div>
    <el-button type="primary" @click="say">Primary</el-button>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
const say = () => {
  ElMessage.closeAll();
  ElMessage({
    message: "hello",
    type: "success",
  });
};
</script>

运行效果

注意！如果elementui的组件还是英文，则在vite.config.js中加入以下这句 ：

export default {
    optimizeDeps: {
        include: ['element-plus/es/locale/lang/zh-cn'],
      },
}