安装依赖
由于我们是Vue3项目,可以使用vite
来快速创建一个Vu3项目:
npm install -g yarn
yarn create vite my-vue-app --template vue // 这里我们使用vue模板,默认是Javascript语法,如果需要ts语法则需要指定模板为vue-ts
cd my-vue-app
yarn
yarn dev
创建好项目后,我们再来引入Element Plus
,安装并引入的过程如下:
安装
:
yarn add element-plus
完整引入
:
// main.js
...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
引入后,我们就可以在Vue3项目中使用了:
<template><el-button>按钮</el-button>
</template>
Element Plus使用Icon会比Element UI稍微麻烦点。首先我们需要安装Icon的依赖:
yarn add @element-plus/icons-vue
我们在main.js
中注册所有的图标,当然也可以按需引入图标:
// main.js
// 全局引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
...
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
el-icon
的使用:
<template><el-icon><Edit /></el-icon>
</template>
<script setup> // import {Edit} from '@element-plus/icons-vue' // 按需引入,如果已经全局引入了就不需要按需引入 </script>
Element Plus的el-icon
使用的是svg
,这与Element UI使用的类名有很大的不同,也就是说我们无法直接在el-icon
中使用iconfont
的图标。虽然Element Plus的图标已经能满足大部分场景的需求,但是一些特殊场景只能