一 在vue3项目里 如何使用element-plus组件库
1 下载element-plus插件
npm i element-plus
2 main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'
const app = createApp(App)
//使用element-plus插件
app.use(router).use(elementPlus).mount('#app')3 尝试使用element-plus组件
home.vue
<template>
<div class="c">
<p>尝试使用element-plus组件</p>
<div class="c">
<p>按钮</p>
<el-button type="success">成功按钮</el-button>
</div>
<div class="c">
<p>日期选择器</p>
<el-date-picker placeholder="请点击选择日期"></el-date-picker>
</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
.c {
width: 80%;
padding: 20px;
margin: 0 auto;
border: 1px solid red;
}
.c>p>span{
color: coral;
}
</style>
有个问题：
这样使用的组件里显示的文字都是英文的 （如图）
what?（用张表情包来表达当时我的心情）
那么如何汉化element-plus组件库 让文字变成中文呢
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'
//引入汉化语言包
import locale from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App)
//使用element-plus插件 汉化{locale}
app.use(router).use(elementPlus,{locale}).mount('#app')效果：
也有人习惯于这样引入使用中文语言包
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'
//引入汉化语言包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App)
//使用element-plus插件 汉化{locale:zhCn}
app.use(router).use(elementPlus,{locale:zhCn}).mount('#app')拓展一下 element-plus图标 的使用
与vue2使用element-ui时可直接使用图标不同
二 在vue3里，要想使用element-plus图标
1 须先下载插件@element-plus/icons-vue
npm i @element-plus/icons-vue2 引入并使用图标插件
main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'
//引入汉化语言包
import locale from 'element-plus/lib/locale/lang/zh-cn'
//引入图标插件
import * as elementPlusIcons from '@element-plus/icons-vue'
const app = createApp(App)
// 循环注册图标
Object.keys(elementPlusIcons).forEach(key=>{
//elementPlusIcons as any 这里ts学的不咋地 只能先any大法了
app.component(key,(elementPlusIcons as any)[key])
// 也可这样写
//app.component(key,elementPlusIcons[key as keyof typeof elementPlusIcons])
})
//使用element-plus插件 汉化{locale}
app.use(router).use(elementPlus,{locale}).mount('#app')
尝试使用图标
home.vue
<template>
<div class='c'>
<p>尝试使用element-plus组件</p>
<div class="c">
<p>按钮</p>
<el-button type="success">成功按钮</el-button>
</div>
<div class="c">
<p>日期选择器</p>
<el-date-picker placeholder="请点击选择日期"></el-date-picker>
</div>
<div class="c">
<p>尝试使用element-plus组件图标</p>
<!-- 搜索图标 -->
<el-icon>
<Search></Search>
</el-icon>
<!-- 编辑图标 -->
<el-icon>
<Edit></Edit>
</el-icon>
</div>
</div>
</template>
<script lang='ts' setup>
</script>
<style scoped>
.c{
width: 80%;
padding: 20px;
margin: 0 auto;
border:1px solid red;
}
</style>效果：
以上是全局注册使用的，但在实际项目里 大多数图标我们是用不到的
所以按需引入是很有必要的
按需使用（此时main.ts里的引入和循环注册就可以注释掉了）
home.vue
<template>
<div class="c">
<p>按需展示指定@element-plus/icons-vue图标</p>
<!-- 引入图标后直接在template模板里使用 -->
<div class="c">
Watch图标:
<p>
<el-icon>
<Watch></Watch>
</el-icon>
</p>
</div>
<div class="c">
VideoPlay图标:
<p>
<el-icon>
<VideoPlay></VideoPlay>
</el-icon>
</p>
</div>
<div class="c">
Van图标:
<p>
<el-icon>
<Van></Van>
</el-icon>
</p>
</div>
<div class="c">
UploadFilled图标:
<p>
<el-icon>
<UploadFilled></UploadFilled>
</el-icon>
</p>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
//引入 Watch VideoPlay Van UploadFilled 图标
import { Watch, VideoPlay, Van, UploadFilled } from "@element-plus/icons-vue";
</script>
<style scoped>
.c {
width: 80%;
padding: 20px;
margin: 0 auto;
border: 1px solid red;
}
</style>
效果：
最后写个好玩的
把所有element-plus组件图标全部展示出来
当然做到这一步前 下载插件和main.ts里的引入插件和全局循环注册步骤是必不可少的
展示所有图标
home.vue
<template>
<div class="c">
<p>展示@element-plus/icons-vue所有图标</p>
<template v-for="(item, index) in iconsList" :key="index">
<div class="c">
<p>图标名称：{{ item }}</p>
<p>
图标：
<el-icon>
<component :is="item"></component>
</el-icon>
</p>
</div>
</template>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import * as icons from "@element-plus/icons-vue";
const getIcons = () => {
let list = [];
for (const name in icons) {
list.push(name);
}
return list;
};
const iconsList = ref(getIcons());
</script>
<style scoped>
.c {
width: 80%;
padding: 20px;
margin: 0 auto;
border: 1px solid red;
}
</style>
效果:
动态展示所有图标：
