element-plus的基本使用和图标一起使用

原创

已于 2022-03-28 13:11:04 修改 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#vue #vue.js #element-plus #element图标不显示

于 2022-03-28 11:00:11 首次发布

本文档详细介绍了如何在Vue3项目中安装、引入及使用Element Plus，特别是解决图标不显示的问题。分为安装、引入、基本使用、图标使用四个步骤，重点讲解了两种与图标组件结合的方法，包括图标组件单独使用和与控件合写，并提醒在使用setup语法时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

//安装element-plus
npm install element-plus --save

//安装图标库
npm install @element-plus/icons-vue

2、引入

此处是完整引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

如果是按需导入需安装unplugin-vue-components 和 unplugin-auto-import插件

npm install -D unplugin-vue-components unplugin-auto-import

3、基本使用

<template>
  <!-- 以button为例的基本使用 -->
  <el-row class="mb-4">
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
</template>

<script&