Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标】(十六)-全面详解（学习总结---从入门到深化）

童小纯

已于 2023-07-26 08:39:33 修改

阅读量906

点赞数 10

分类专栏：前端系列---从入门到深化文章标签： ui vue.js javascript Vue3

于 2023-04-12 10:50:58 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58719994/article/details/130100298

版权

前端系列---从入门到深化同时被 2 个专栏收录

101 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

Vue3知识体系

16 篇文章

订阅专栏

本文详细介绍了如何在Vue3项目中使用Element-plus组件库，包括完整和按需导入的方式，以及Element-plus的字体图标加载。此外，还讨论了Element-plus中的Table表格功能和Vant组件库的使用，包括按需加载策略。

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

👏作者简介：大家好，我是小童，Java开发工程师，优快云博客博主，Java领域新星创作者
📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶
📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人

常见UI组件库

Vue3加载Element-plus

Vue3加载Element-plus的字体图标

常见UI组件库

UI组件库为我们在开发中提供一整套的UI设计，不需要我们自己通过CSS一点点设计，这大大提升了开发体验。大部分的UI组件库针对的是后台管理系统类型的项目，当然也会存在移动端的UI组件库

Vue3加载Element-plus

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element Plus 基于 Vue 3 ，面向设计师和开发者的组件库

安装Element-Plus

npm install element-plus --save

完整引用

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

import { createApp } from 'vue'
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')

按需导入

按需导入才是我们的最爱，毕竟在真实的应用场景中并不是每个组件都会用到，这会造成不小的浪费

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

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

然后修改 vite.config.js 配置文件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
   }),
    Components({
      resolvers: [ElementPlusResolver()],
   }),
 ],
})

最后，可以直接在组件中使用

<template>
   <el-button>Default</el-button>
   <el-button type="primary">Primary</el-button>
</template>

实时效果反馈

1. 在Vue3项目中引入饿了么UI组件库，下来命令正确的是：

A npm install --save element-iu

B vue add element

C npm install element-plus --save

D vue add element-plus

Vue3加载Element-plus的字体图标

Element-plus 不仅仅是提供了各种组件，同时还提供了一整套的字体图标方便开发者使用

安装 icons 字体图标

npm install @element-plus/icons-vue

全局注册

在项目根目录下，创建 plugins 文件夹，在文件夹下创建文件 icons.js 文件

import * as components from "@element-plus/icons-vue";
export default {
    install: (app) => {
        for (const key in components) {
            const componentConfig = components[key];
            app.component(componentConfig.name,componentConfig);
       }
   },
};

引入文件

在 main.js 中引入 icons.js 文件

import elementIcon from "./plugins/icons";
app.use(elementIcon)

使用方式

接下来就可以直接在组件中引入使用了

<el-icon class="myicon" ><House /></el-icon>
<el-icon class="myicon" ><Star /></el-icon>
<el-icon class="myicon"><Ticket /></el-icon>

特别使用提示

在按钮或者菜单中使用字体图标，与上述不同，使用方式如下：

<el-button type="success" :icon="Check" circle />

<script setup>
   import { Check,Edit,Search,Message,Star,Delete } from '@element-plus/icons-vue'
</script>

Element-plus Table表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

基础表格

<template>
    <div class="container">
        <h3>表格</h3>
        <el-table :data="tableData.banner">
            <el-table-column prop="title" label="Name"/>
            <el-table-column prop="content" label="Address" />
        </el-table>
    </div>
</template>
<script setup>
   import { reactive } from "vue"
   const tableData = reactive({
   banner:[
          {
            title: 'Tom',
            content: 'No. 189, Grove St, LosAngeles',
          },
          {
            title: 'Tom',
            content: 'No. 189, Grove St, LosAngeles',
          },
          {
            title: 'Tom',
            content: 'No. 189, Grove St, LosAngeles',
          },
          {
            title: 'Tom',
            content: 'No. 189, Grove St, LosAngeles',
          },
   ]
})
</script>
<style scoped>
.container{
    width: 600px;
    margin: 0 auto;
    border: 1px solid #f1f1f1;
    text-align: center;
}
</style>

网络请求动态适配数据

安装

npm install --save axios

<template>
    <div class="container">
        <h3>表格</h3>
        <el-table :data="tableData.banner">
            <el-table-column prop="title" label="Name"/>
            <el-table-column prop="content" label="Address" />
        </el-table>
    </div>
</template>
<script setup>
import { reactive,onMounted } from "vue"
import axios from "axios"
const tableData = reactive({
    banner:[]
})
onMounted(() =>{
  axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
   .then(res =>{
        tableData.banner = res.data.banner
   })
})
</script>
<style scoped>
.container{
    width: 600px;
    margin: 0 auto;
    border: 1px solid #f1f1f1;
    text-align: center;
}
</style>

常用属性

自定义列的显示内容，可组合其他组件使用

<template>
    <div class="container">
        <h3>表格</h3>
        <el-table :data="tableData.banner">
            <el-table-column prop="title" label="Name" />
            <el-table-column prop="content" label="Address" />
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index,scope.row)">Edit</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { reactive, onMounted } from "vue"
import axios from "axios"
const tableData = reactive({
    banner: []
})
onMounted(() => {
  axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
       .then(res => {
            tableData.banner = res.data.banner
       })
})
function handleEdit(index,row){
    console.log(row);
}
function handleDelete(index,row){
    console.log(row);
}
</script>
<style scoped>
.container {
    width: 600px;
    margin: 0 auto;
    border: 1px solid #f1f1f1;
    text-align: center;
}
</style>

Vant组件库

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本

安装

在现有项目中使用 Vant 时，可以通过 npm 进行安装

npm i vant --save

项目中引入Vant

import { createApp } from 'vue'
import App from './App.vue'
import { Button } from 'vant';
import 'vant/lib/index.css';
const app = createApp(App)
app.use(Button);
app.mount('#app')

<template>
  <van-button type="primary">主要按钮</vanbutton>
  <van-button type="success">成功按钮</vanbutton>
  <van-button type="default">默认按钮</vanbutton>
  <van-button type="warning">警告按钮</vanbutton>
  <van-button type="danger">危险按钮</vanbutton>
</template>
<script setup></script>

Vant组件库-按需加载

按需加载才是项目中使用Vant组件库的常态，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。

安装插件

npm i unplugin-vue-components -D

vite.config.js 文件中配置插件

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
   })
 ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src',import.meta.url))
   }
 }
})

使用组件

<template>
  <van-button type="primary">主要按钮</vanbutton>
  <van-button type="success">成功按钮</vanbutton>
  <van-button type="default">默认按钮</vanbutton>
  <van-button type="warning">警告按钮</vanbutton>
  <van-button type="danger">危险按钮</vanbutton>
</template>
<script setup></script>

Vant组件库-IndexBar 索引栏

用于列表的索引分类显示和快速定位

引入

import { createApp } from 'vue';
import { IndexBar, IndexAnchor } from 'vant';
const app = createApp();
app.use(IndexBar);
app.use(IndexAnchor);

基础用法

点击索引栏时，会自动跳转到对应的 IndexAnchor 锚点位置。

<van-index-bar>
  <van-index-anchor index="A" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-index-anchor index="B" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />
 ...
</van-index-bar>

列表渲染

<template>
  <van-index-bar>
    <template v-for="(item,index) in IndexBar.allData" :key="index">
      <van-index-anchor :index="item.name"/>
      <van-cell v-for="(text,index) in item.titles" :key="index" :title="text" />
    </template>
  </van-index-bar>
</template>
<script setup>
import { reactive } from "vue"
const IndexBar = reactive({
  allData:[
        {
           name:"A",
           titles:["文本","文本","文本"]
        },
        {
           name:"B",
           titles:["文本","文本","文本"]
        },
        {
           name:"C",
           titles:["文本","文本","文本"]
        },
        {
           name:"D",
           titles:["文本","文本","文本"]
        },
        {
           name:"E",
           titles:["文本","文本","文本"]
        },
        {
          name:"F",
          titles:["文本","文本","文本"]
        },
        {
          name:"G",
          titles:["文本","文本","文本"]
        },
        {
         name:"H",
         titles:["文本","文本","文本"]
        }
     ]
   })
</script>