【全网最新最全】Vue3集成Element-plus快速搭建页面框架

墨染夜雨笺

于 2025-03-01 21:08:21 发布

阅读量2.9k

点赞数 37

分类专栏： SpringBoot+Vue 文章标签： Vue.js 前端前端框架 elementui

本文链接：https://blog.csdn.net/2301_79728896/article/details/145953629

版权

SpringBoot+Vue 专栏收录该内容

6 篇文章

订阅专栏

Element Plus简介

Element Plus 是一款基于 Vue 3 的桌面端 UI 组件库，旨在为开发者、设计师和产品经理提供丰富、易用的组件，帮助快速构建现代化的用户界面。

主要特性：

丰富的组件体系：Element Plus 提供了大量的 UI 组件，包括按钮、表格、表单、对话框、菜单等，满足各种开发需求。
响应式设计：组件采用响应式布局，确保在不同设备和屏幕尺寸下均能良好展示。
易于使用：提供清晰的 API 和详细的文档，降低开发者的学习成本。
主题定制：支持主题定制，开发者可以根据项目需求调整样式。

网站：https://element-plus.org/zh-CN/

Vue3集成Element Plus

IDEA打开已经搭建好的Vue3项目

Vue3框架的搭建在这篇文章：

【2025全网最新最全】前端Vue3框架的搭建及工程目录详解-CSDN博客

在IDEA打开控制台（Terminal)，一定要先在控制台下cd切换到Vue目录下面

然后执行下面的命令安装element-plus

安装依赖

npm i element-plus -S

如果想卸载element-plus，就执行下面这段命令

npm uninstall element-plus

当element-plus安装完成后，可以在package.json可以看到依赖的相关信息

依赖放在node_modules包下的element-plus包里面。

当卸载后，依赖会消失。

main.js引入

在element-plus的快速开始页面：快速开始 | Element Plus有写如何在main.js引入依赖。

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

app.use(ElementPlus)

安装好了之后，可以使用element-plus集成的组件

按钮组件

选择提供的Button组件，复制到Home.vue中,启动项目，就可以看到相应的组件样式。

<template>
<div>
  主页
</div>
  <div class="mb-4">
    <el-button>Default</el-button>
    <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>
  </div>
</template>

<script setup>

</script>

icon图标

想要使用icon图标的组件，需要安装依赖，注册所有图标。

npm install @element-plus/icons-vue

然后在main.js中添加这段代码

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App) //如果这行在main.js中就有，就不需要重复写了
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

element-plus官网提供了很多常见的icon图标，直接点击想要的icon图标，就可以复制它的组件代码，然后粘贴到项目中

这里我复制的是icon code

<div style="padding: 50px">
  <el-icon size="20px" color="red"><View /></el-icon> //这个就是从官网复制的icon code
</div>

根据官网提供的API,开发者可以对组件的大小size和颜色color进行修改

当在按钮或输入框组件里面使用图标,需要单独导入图标

像这个带日历图标的搜索框，复制代码后还要单独导入图标，否则就只有输入框，而没有日历图标（没有明显的报错提示）

如何将图标导入，并且在输入框中显示：鼠标放到"Calendar"（suffix-icon的属性上），快捷键alt+enter就会出现导入的选择，选择其中一个即可。

suffix-icon（后缀icon)是图标在框的末尾显示，而prefix-icon(前缀icon)是图标在框的开头显示。

导入成功后，script中出现import的代码

打开浏览器，"Calendar"的icon成功显示。

Element Plus主题色设置

改变主题色可以在这里面的background-color进行修改，但是每次都这样比较麻烦，可以使用一种全局修改的方法。

安装sass,unplugin-vue-components,unplugin-auto-import

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

配置index.scss文件放在src/assets/css下

@forward "element-plus/theme-chalk/src/common/var.scss" with(
  $colors:(
        "primary":("base":#2c82ff),
        "success":("base":#31bf00),
        "warning":("base":#ffad00),
        "danger":("base":#e52f2f),
        "info":("base":#8055ff),
  )
);

配置vite.config.js

import Components from 'unplugin-vue-components/vite'//自动导入vue中的组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'//对应组件库的导入
import AutoImport from 'unplugin-auto-import/vite'//自动导入ui-组件，比如element-plus

  plugins: [
    vue(),
      //element-plus按需导入
    AutoImport({resolvers: [ElementPlusResolver()]}),
    //配置element-plus采用sass样式配置系统
    Components({resolvers: [ElementPlusResolver({importStyle: 'sass'})]}),
      
  ],
  css:{
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/index.scss" as *;`,
      },
    }
  },

AutoImport: 这个插件用于自动导入 Vue 组件和其他常用的 API。通过使用 ElementPlusResolver()，它会自动导入 Element Plus 组件库中的组件，而不需要手动在每个文件中导入。这可以减少代码的冗余，提高开发效率。

**Components**: 这个插件用于按需加载 Vue 组件。通过配置ElementPlusResolver({importStyle: 'sass'})，它会在使用 Element Plus 组件时，自动引入相应的 Sass 样式。这意味着你可以在项目中使用 Element Plus 组件，而不需要手动引入每个组件的样式文件。

css: 这个部分配置了 CSS 预处理器的选项。

preprocessorOptions: 这里指定了 SCSS 的配置。

additionalData: 这个选项允许你在每个 SCSS 文件的开头自动添加一些代码。在这里，它会自动引入 element-plus.scss 文件，这样你在项目中的所有 SCSS 文件中都可以使用这个文件中定义的样式，而不需要在每个文件中手动引入。

父子组件

在src/views下新建一个文件Manager.vue,在里面写入代码

<template>
<div>
  这是父组件
  <RouterView />
</div>
</template>

<script setup>

</script>

修改src/router中index.js的代码

//原先是：
// {path: '/', name: 'home', component: import('../views/Home.vue'),},
{ path: '/', component: import('../views/Manager.vue'),
      children:[
      {path: 'home', component: import('../views/Home.vue'),}
    ],
},

这样的话通过http://localhost:5173/可以访问到Manager.vue中的内容

然后斜杠后面可以输入子组件的路由，比如输入http://localhost:5173/home，可以访问到Manager.vue和Home.vue的内容

父子组件中父组件是不变的，但子组件根据不同的路由而改变

这里举个例子：

Vue3制作管理系统页面

配置头部区域

将图片放到src/assets/imgs的文件夹下，保存为logo.png

<template>
<div>
  <!--头部区域开始-->
  <div style="height: 60px;border-bottom: 1px solid #eee; display: flex;align-items: center;">
    <div style="display: flex;align-items: center;padding-left: 1px;">
      <img src="../assets/imgs/logo.png" alt="" style="width: 40px;height: 40px;">
      <span style="font-size: 20px;font-weight: bold;color: #2c82ff;margin-left: 10px;">标题区域</span>
    </div>
    <div style="flex:1 "></div>
  </div>
  <!--头部区域结束-->
</div>
</template>

<script setup>

</script>

配置导航栏菜单

在element-plus官网搜索Menu

滑到侧栏这个位置，根据它提供的样例和代码为参考进行编写

<template>
<div>
  <!--头部区域开始-->
<!--  border-bottom: 1px solid #eee;是给头部加一个底部边框线,如果区域有背景色，可以看出来，在有背景色的情况下，去掉后就感觉上下是连起来的-->
  <div style="height: 60px; display: flex;">
<!--    width区域设置200px的宽度，和菜单宽度保持一致-->
    <div style="width: 240px; display: flex;align-items: center;padding-left: 20px;background-color:#3a456b;border-color: #3a456b;;">
      <img src="../assets/imgs/logo.png" alt="" style="width: 40px;height: 40px;border-radius: 100%;">
      <span style="font-size: 20px;font-weight: bold;color:  #ecf0f2;margin-left: 10px;">后台管理端</span>
    </div>

    <div style="flex:1;border-bottom: 1px solid #ddd; display:flex;align-items:center;">
      <span style="padding-left: 20px">首页/数据分析</span>
    </div>
    <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;">
      <el-dropdown >
      <div style="display: flex;align-items: center; border-bottom: 1px solid #ddd;height: 60px;">
        <img src="@/assets/imgs/admin.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;">
        <span style="margin-left: 5px;">管理员</span>
      </div>
        <template #dropdown>
          <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item >退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

    </div>
  </div>
  <!--头部区域结束-->

  <!--下方区域开始-->
  <div style="display: flex;">
    <!--左侧菜单区域开始-->
    <div style="width: 240px;box-shadow: 0 0 10px rgba(0,0,0,0.1);">
      <!--default-active="1"是默认激活的菜单选项为1，如果是1-1-->
<!--      我想让右侧的边框线触底，因此用calc()计算高度，让那条线触底-->
<!--      default-openeds="['1']"是默认展开的菜单-->
      <el-menu default-active="/manager/home" style="min-height: calc(100vh - 60px);" :default-openeds="['1']">
        <el-menu-item index="/manager/home">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title >
            <el-icon><location /></el-icon>
            <span>数据管理</span>
          </template>
<!--          二级菜单-->
          <el-menu-item index="1-1">二级菜单</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!--左侧菜单区域结束-->


    <!--右侧内容区域开始-->
    <div style="margin-left:10px;background-color: #f2f2f4;flex: 1;width: 0;margin-top: 10px;padding: 10px;">
      <RouterView />
    </div>
    <!--右侧内容区域结束-->
  </div>
</div>
<!--下方区域结束-->
</template>

<script setup>

</script>

<!-- <style scoped>和<style>两种样式，scoped是局部样式，只对当前组件有效，而不加scoped是全局样式，对所有组件都有效。-->
<style>
.el-menu{
  background-color:#3a456b;
  border:none;
}
.el-sub-menu__title{
  background-color:#3a456b;
 color: #ddd;
}
.el-menu-item{
  height: 50px;
  color: #ddd;
}
.el-menu-item.is-active{
  background-color: #537bee;
  color: #ddd;
}
.el-sub-menu__title:hover{
  background-color: #7f98f8;
}
.el-menu-item:not(.is-active):hover{
  background-color:#5dade2;
  color: #333;
}


.el-dropdown{
  /*鼠标移入时，会有一个小手的样式*/
 cursor: pointer;
}

.el-tooltip__trigger{
  outline: none;
}
</style>

添加查询框及添加数据

在src/assets/css中的global.css添加:

.card{
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,.12);
}

然后修改Home.vue

<template>
  <div>
    <div class="card" style="margin-bottom:5px;">
      <el-input v-model="data.name" placeholder="请输入内容" style="width: 300px;margin-right: 5px;" prefix-icon="Search"></el-input>
      <el-button type="primary">查询</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="primary">新 增</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="success">批量导入</el-button>
      <el-button type="info">批量导出</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="address" label="地址" width="180" />
      </el-table>
    </div>
    <div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          :page-size="data.pageSize"
          layout="total, prev, pager, next"
          :total="data.total"
      />
    </div>
  </div>
</template>
<script setup>
import {reactive} from 'vue'
const data = reactive({
  name: null,
  pageNum: 1,
  pageSize: 5,
  total: 6,
  tableData: [
    { name: 'cpu', phone: '13877886677', address: '北京市朝阳区' },
    { name: 'cpunull', phone: '13988997788', address: '上海市徐汇区' },
    { name: '小张', phone: '138776554466', address: '安徽省合肥市' },
    { name: '小李', phone: '138799882566', address: '安徽省合肥市' },
    { name: '小王', phone: '13987622566', address: '安徽省合肥市' },
    { name: '小周', phone: '13487772266', address: '安徽省合肥市' },
  ]
})
</script>