vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 Element-plus搭建页面框架

Vue3集成Element-plus快速搭建页面框架的过程

作者：墨染夜雨笺

ElementPlus是一款基于Vue3的UI组件库,提供了丰富的组件和响应式设计,易于使用和主题定制,在Vue3项目中集成ElementPlus,需要通过npm安装并引入组件,主题色可以通过修改样式文件进行全局设置,本文介绍Vue3集成Element-plus快速搭建页面框架,感兴趣的朋友一起看看吧

Element Plus简介

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

主要特性：

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

Vue3集成Element Plus

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

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

前端Vue3框架的搭建及工程目录详解

在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>

到此这篇关于Vue3集成Element-plus快速搭建页面框架的文章就介绍到这了,更多相关Vue3 Element-plus搭建页面框架内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文