Element-plus 组件配置

安装 Element-plus

配置详情请查看官方文档：官方文档

npm install element-plus --save

引入 Element-plus

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
// 引入 Element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

安装Element-plus 图标库

使用 npm 包管理器进行安装：

npm install @element-plus/icons-vue

全局注册图标库

注册后，如何使用，请参考官方文档：官方文档

// main.ts

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

Element-plus 国际化配置

Element-plus 组件默认是英文，下面演示使用国际化配置，将 Element-plus 组件库配置为中文。

// main.ts

// 引入中文配置
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 国际化配置，设置为中文
app.use(ElementPlus, {
    locale: zhCn,
})

直接在 main.ts 中放入上面的代码。详情请查看：官方文档