Element Plus - 技术栈

安装

npm install element-plus --save

使用

正常使用

javascript 复制代码

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

引入全局配置国际化的设置

全局注册

引入

javascript 复制代码

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

const app = createApp(App)
app.use(ElementPlus)
app.component('ElConfigProvider', ElConfigProvider) //*全局注册
app.mount('#app')

使用 ElConfigProvider

html 复制代码

<template>
  <el-config-provider :size="globalSize" :z-index="globalzIndex">
    <el-button>Default</el-button>
  </el-config-provider>
</template>
<script setup>
import { ref } from 'vue'
const globalSize = ref('big') // 组件默认尺寸：'large'/'medium'/'small'/'mini'
const globalzIndex = ref(3000) // 默认中文，可切换为 en（英文）
</script>

局部注册

html 复制代码

<template>
  <el-config-provider :size="globalSize" :z-index="globalzIndex">
    这是内容
  </el-config-provider>
</template>
<script setup>
import { ref } from 'vue'
import { ElConfigProvider } from 'element-plus'
const globalSize = ref('large') // 组件默认尺寸：'large'/'medium'/'small'/'mini'
const globalzIndex = ref(3000)
</script>

引入中文

全局引入

javascript 复制代码

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

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'//*重点

const app = createApp(App)
app.use(ElementPlus, {
    locale: zhCn
})//*重点
app.component('ElConfigProvider', ElConfigProvider)
app.mount('#app')

局部引入

html 复制代码

<template>
  <el-config-provider :locale="zhCn">
  	这是内容
  </el-config-provider>
</template>
<script setup>
import { ref } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'// 引入中文语言包（关键）
</script>

使用图标

安装

npm install @element-plus/icons-vue --save

引入

html 复制代码

<template>
  <el-icon :size="20" color="#409EFC">
    <Edit /> <!-- 注意：组件名首字母必须大写！ -->
  </el-icon>
</template>

<script lang="ts" setup>
// 关键：导入 Edit 图标（首字母大写，与模板中组件名一致）
import { ElIcon } from 'element-plus'
import { Edit } from '@element-plus/icons-vue' // 从图标包导入
</script>