Element-Plus简介

Element-Plus是一套前端UI框架，可以通过它快速实现精美的页面样式
官网：https://element-plus.org
国内镜像：https://cn.element-plus.org/

Vue3集成Element-Plus

安装依赖

npm  i element-plus -S

安装完后在package.json里会自动出现element-plus版本

安装的文件在node_modules的element-plus里

在main.js里引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, { locale: zhCn })

测试Element-Plus组件

在Home.vue里使用官方的按钮组件

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

Home.vue测试内容

<template>
  <div>
    <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>
      <el-icon size="25" color="green"><Connection /></el-icon>

      <el-input placeholder="Placeholder" :suffix-icon="Calendar" :prefix-icon="Search"></el-input>

      <el-button type="primary" :icon="Search">按钮</el-button>
    </div>
  </div>
</template>

<script setup>
import { Calendar, Search, Connection } from "@element-plus/icons-vue";
</script>

全局使用icon

安装依赖，注册所有图标

npm install @element-plus/icons-vue

在main.js里引入

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

el-input：当你在输入框组件里使用图标，需要单独导入图标
el-icon、el-button：按钮或图表组件里，不需要单独导入图标

<el-input placeholder="Placeholder" :suffix-icon="Calendar" :prefix-icon="Search"></el-input>

import {Calendar, Search} from "@element-plus/icons-vue";

Element-Plus主题色设置

安装依赖sass、unplugin-vue、components、unplugin-auto-import

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

配置index.scss

@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 AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


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

安装element插件

搭建后台基本框架

框架布局分析

配置头部区域

views/Manager.vue

    <!--头部区域开始-->
    <div style="height: 60px; display: flex;">
      <div style="width: 240px; display: flex; align-items: center; padding-left: 20px; background-color: #3a456b">
        <img style="width: 40px; height: 40px; border-radius: 50%;" src="@/assets/imgs/logo.png" alt="">
        <span style="font-size: 20px; font-weight: bold; color: #f1f1f1; margin-left: 5px;">后台管理系统</span>
      </div>
      <div style="flex: 1; display: flex; align-items: center;padding-left: 20px; border-bottom: 1px solid #ddd">
        首页 / 数据分析
      </div>
      <div style="width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style=" display: flex; align-items: center;">
            <img style="width: 40px; height: 40px ;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <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-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!--头部区域结束-->

配置导航栏菜单

views/Manager.vue

    <!--内容区域开始-->
    <div style="display: flex ;">
      <!--菜单区域开始-->
      <div style="width: 240px;">
        <el-menu router :default-openeds="['1']" :default-active="router.currentRoute.value.path" style=" min-height: calc(100vh - 60px)">
          <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="/manager/about">关于数据</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--菜单区域结束-->

      <!--数据渲染区域开始-->

      <!--数据渲染区域结束-->
    </div>
    <!--内容区域结束-->

主体区域

      <!--数据渲染区域开始-->
      <div style="flex: 1; width: 0; padding: 10px; background-color: #f2f4ff">
        <router-view />
      </div>
      <!--数据渲染区域结束-->

全部代码

views/Manager.vue

<template>
  <div>
    <!--头部区域开始-->
    <div style="height: 60px; display: flex;">
      <div style="width: 240px; display: flex; align-items: center; padding-left: 20px; background-color: #3a456b">
        <img style="width: 40px; height: 40px; border-radius: 50%;" src="@/assets/imgs/logo.png" alt="">
        <span style="font-size: 20px; font-weight: bold; color: #f1f1f1; margin-left: 5px;">后台管理系统</span>
      </div>
      <div style="flex: 1; display: flex; align-items: center;padding-left: 20px; border-bottom: 1px solid #ddd">
        首页 / 数据分析
      </div>
      <div style="width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style=" display: flex; align-items: center;">
            <img style="width: 40px; height: 40px ;border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <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-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!--头部区域结束-->

    <!--内容区域开始-->
    <div style="display: flex ;">
      <!--菜单区域开始-->
      <div style="width: 240px;">
        <el-menu router :default-openeds="['1']" :default-active="router.currentRoute.value.path" style=" min-height: calc(100vh - 60px)">
          <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="/manager/about">关于数据</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--菜单区域结束-->

      <!--数据渲染区域开始-->
      <div style="flex: 1; width: 0; padding: 10px; background-color: #f2f4ff">
        <router-view />
      </div>
      <!--数据渲染区域结束-->
    </div>
    <!--内容区域结束-->
  </div>
</template>

<script setup>

import router from "@/router/index.js";
</script>


<style>
.el-menu {
  background-color: #3a456b;
  border: none;
}
.el-sub-menu__title{
  color: #ddd;
  background-color: #3a456b;
}
.el-menu-item{
  height: 50px;
  color: #ddd;
}
.el-menu .is-active{
  background-color: #537bee;
  color: #fff;
}
.el-sub-menu__title:hover{
  background-color: #3a456b;
}
.el-menu-item:not(.is-active):hover{
  background-color: #7a9fff;
  color: #333;
}
.el-dropdown{
  cursor:  pointer;
}
.el-tooltip__trigger{
  outline: none;
}
.el-menu--inline .el-menu-item{
  padding-left: 50px !important
}
</style>

views/Home.vue

<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input style="width: 260px; margin-right: 5px;" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
      <el-button type="primary">查询</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="danger">批量删除</el-button>
      <el-button type="primary">新 增</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" style="margin-bottom: 5px">
      <el-pagination
          v-model:current-page="data.pageNumber"
          :page-size="data.pageSize"
          layout="total, prev, pager, next"
          :total="data.total"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import {Search} from "@element-plus/icons-vue";

const data = reactive({
  name: null,
  pageNumber: 1,
  pageSize: 5,
  total: 6,
  tableData: [
      {name: "温迪", phone: "154826", address: "蒙德西风大教堂"},
      {name: "钟离", phone: "846136", address: "璃月"},
      {name: "雷电影", phone: "516238", address: "稻妻幕府"},
      {name: "纳西达", phone: "217863", address: "须弥净善宫"},
      {name: "芙宁娜", phone: "136874", address: "枫丹大歌剧院"},
      {name: "今汐", phone: "346335", address: "瑝陇今州边庭"}
  ]
});
</script>

router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/manager', component: import('../views/Manager.vue'),
      children: [
        { path: 'home', component: import('../views/Home.vue')},
        { path: 'about', component: import('../views/About.vue'),},
      ]
    },
    { path: '/notFound', component: import('../views/404.vue'),},
    { path: '/:pathMatch(.*)', redirect: '/notFound'}
  ],
})

export default router

assets/css/global.css

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}

a{
    text-decoration: none;
}

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

最终效果