前端实战：Vue3+ElementPlus+ECharts实现后台管理系统

一、项目简介和需求概述

1、课程目标

1.能够基于Vue3创建项目

2.能够基本Vue3相关的技术栈进行项目开发

3.能够使用Vue的第三方组件进行项目开发

4.能够理解前后端分离的开发模式

2、项目概述

本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。

3、使用的主要技术栈和工具

Vue3TypeScriptElementPlusEChartsApifox

二、项目初始化

1、项目创建

使用vite或vue_cli创建项目

npm create vue@latest或者//npm install -g cnpm --registry=http://registry.npm.taobao.org npm install -g cnpm --registry=https://registry.npmmirror.com cnpm create vue@latest

2、配置Vue路由

import router from './routeconst app = createApp(App);app.use(router)

3、配置 axios 库

安装：

npm install --save vue-axios或npm install -g pnpmpnpm install --save vue-axios

引入：

import axios from 'axios';

4、配置Element Plus

npm install -g pnpm

安装 Element Plus：

pnpminstallelement-plus --save

安装Element Plus图标

pnpm install @element-plus/icons-vue

在 main.js 中引入 Element Plus

import{    createApp }from'vue';importApp from'./App.vue';importElementPlus from'element-plus';import'element-plus/dist/index.css';constapp =createApp(App);app.use(ElementPlus);app.mount('#app');

在 main.js 中引入 Element Plus Icon

import*asElementPlusIconsVue from'@element-plus/icons-vue'//const app = createApp(App);for(const[key,component]ofObject.entries(ElementPlusIconsVue)){    app.component(key,component)}

也可以在使用时再导入

import {  Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

在上述代码中，我们首先导入 Element Plus，并使用 createApp 方法创建 Vue 应用程序实例。然后使用 app.use 方法注册 Element Plus 插件，并使用 app.mount方法将应用程序挂载到 DOM 元素上。

在组件中使用 Element Plus 的组件，如下：

<template><el-buttontype="primary">按钮</el-button></template><el-icon><delete/></el-icon>

5、初始化 git 远程仓库

多人合作时需要上传项目到仓库

6、将本地项目托管到GitHub或Gitee中

三、Element Plus常用组件

1、组件库的常用组件（如 Button, Dropdown 等）介绍与实例

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

我们在官网组件里可以看到各种已经定义好的组件

1、Button

使用 type、plain、round和 circle来定义按钮的样式。

<el-button type="primary">Primary</el-button><el-button type="primary" plain>Primary</el-button><el-button type="primary" round>Primary</el-button><el-button type="primary" :icon="Edit" circle />

使用 disabled属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean类型的值。

<el-button type="primary" disabled >Primary</el-button>

可以设置为链接按钮

<el-button type="primary" link>Primary</el-button>

可以设置为文字按钮

<el-button type="primary" text>Primary</el-button>

可以设置为图标按钮

<el-button type="primary" :icon="Search">Search</el-button>

可以使用size调整尺寸

<el-button type="primary" size=“small” >Primary</el-button>

可以自定义元素标签。例如，按钮，div，路由链接，nuxt链接

<el-button type="primary" tag="div" >Primary</el-button>

2、DropDown

下来菜单

<el-dropdown> 组件是父组件，它包含了一个具名插槽 <template v-slot:dropdown>，用于自定义下拉菜单的内容。<el-dropdown-menu> 组件是子组件，它是父组件 <el-dropdown> 中的一个子组件，并被放置在具名插槽 <template v-slot:dropdown> 的位置。它用于渲染下拉菜单选项列表。代码中的 #dropdown 也可以写成 v-slot:dropdown

<template>  <div class="flex flex-wrap items-center">    <el-dropdown split-button type="primary" @click="handleClick">      Dropdown List      <template #dropdown>        <el-dropdown-menu>          <el-dropdown-item>Action 1</el-dropdown-item>          <el-dropdown-item>Action 2</el-dropdown-item>          <el-dropdown-item>Action 3</el-dropdown-item>          <el-dropdown-item>Action 4</el-dropdown-item>          <el-dropdown-item>Action 5</el-dropdown-item>        </el-dropdown-menu>      </template>    </el-dropdown>  </div></template><script lang="ts" setup>import {  ArrowDown } from '@element-plus/icons-vue'const handleClick = () => {   // eslint-disable-next-line no-alert  alert('button click')}</script>

3、Container布局容器

用于布局的容器组件，方便快速搭建页面的基本结构<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。

<template>  <div class="common-layout">    <el-container>      <el-aside width="200px">Aside</el-aside>      <el-container>        <el-header>Header</el-header>        <el-main>Main</el-main>      </el-container>    </el-container>  </div></template><style>/* 重新设置#app布局为左对齐  默认是网格布局 */#app{   height: 100%;  width: 100%;  display: flex !important;   align-items: flex-start !important; /* 将项目在交叉轴上靠上对齐 */   justify-content: flex-start !important; /* 将项目在主轴上靠左对齐 */   margin: 0px !important;  padding: 0px!important;  max-width: none !important;  }.common-layout {   height: 100%;  width: 100%;  min-height: 1000px;}</style>

2、导航菜单

Menu 菜单

导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外，在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

1、顶部导航

注意这里要设置： mode="horizontal" 表示水平排列默认是垂直，也就是mode="vertical"#title 插入子菜单

<template>   <el-menu    :default-active="activeIndex2"    class="el-menu-demo"    mode="horizontal"    background-color="#545c64"    text-color="#fff"    active-text-color="#ffd04b"    @select="handleSelect"  >    <el-menu-item index="1">Processing Center</el-menu-item>    <el-sub-menu index="2">      <template #title>Workspace</template>      <el-menu-item index="2-1">item one</el-menu-item>      <el-menu-item index="2-2">item two</el-menu-item>      <el-menu-item index="2-3">item three</el-menu-item>      <el-sub-menu index="2-4">        <template #title>item four</template>        <el-menu-item index="2-4-1">item one</el-menu-item>        <el-menu-item index="2-4-2">item two</el-menu-item>        <el-menu-item index="2-4-3">item three</el-menu-item>      </el-sub-menu>    </el-sub-menu>    <el-menu-item index="3" disabled>Info</el-menu-item>    <el-menu-item index="4">Orders</el-menu-item>  </el-menu></template><script lang="ts" setup>import {  ref } from 'vue'const activeIndex = ref('1')const activeIndex2 = ref('1')const handleSelect = (key: string, keyPath: string[]) => {   console.log(key, keyPath)}</script>

2、左侧导航

<template>    <el-menu          active-text-color="#ffd04b"          background-color="#545c64"          class="el-menu-vertical-demo"          default-active="2"          text-color="#fff"                >          <el-sub-menu index="1">            <template #title>              <el-icon><location /></el-icon>              <span>Navigator One</span>            </template>            <el-menu-item index="1-1">item one</el-menu-item>            <el-menu-item index="1-2">item two</el-menu-item>                       <el-menu-item index="1-3">item three</el-menu-item>          </el-sub-menu>          <el-sub-menu index="2">            <template #title>              <el-icon><location /></el-icon>              <span>Navigator two</span>            </template>            <el-menu-item index="2-1">item one</el-menu-item>            <el-menu-item index="2-2">item two</el-menu-item>                       <el-menu-item index="2-3">item three</el-menu-item>          </el-sub-menu>                  </el-menu></template>  

3、Element Plus 的布局组件 (Layout, Row, Col)

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

样例中用到了sass样式，需要安装一下

npm install -D sass

1、基础布局

通过 row和 col组件，并通过 col 组件的 span属性我们就可以自由地组合布局。

<template>  <el-row>    <el-col :span="24"><div style="background-color: red; height: 50px;" ></div></el-col>  </el-row>  <el-row>    <el-col :span="12"><div style="background-color: pink; height: 50px;" ></div></el-col>    <el-col :span="12"><div style="background-color: greenyellow; height: 50px;" ></div></el-col>  </el-row>  </template><style>#app{   height: 100%;  width: 100%;  display: block;   margin: 0px !important;  padding: 0px!important;  max-width: none !important;  }</style>

2、分栏间隔

支持列间距。

行提供 gutter属性来指定列之间的间距，其默认值为0。

<template>  <el-row :gutter="20">    <el-col :span="6"><div style="background-color: red; height: 50px;"></div></el-col>    <el-col :span="6"><div style="background-color: pink; height: 50px;"></div></el-col>    <el-col :span="6"><div style="background-color: yellow; height: 50px;"></div></el-col>    <el-col :span="6"><div style="background-color: green; height: 50px;"></div></el-col>  </el-row></template><style>#app{   height: 100%;  width: 100%;  display: block;   margin: 0px !important;  padding: 0px!important;  max-width: none !important;  }</style>

3、混合布局

<template>  <el-row :gutter="20">    <el-col :span="6"><div style="background-color: red; height: 50px;"></div></el-col>    <el-col :span="6"><div style="background-color: pink; height: 50px;"></div></el-col>    <el-col :span="6"><div style="background-color: yellow; height: 50px;"></div></el-col>    <el-col :span="6"><div style="background-color: green; height: 50px;"></div></el-col>  </el-row>  <el-row :gutter="30">    <el-col :span="8"><div style="background-color:burlywood; height: 50px;"></div></el-col>    <el-col :span="8"><div style="background-color: pink; height: 50px;"></div></el-col>    <el-col :span="8"><div style="background-color: red; height: 50px;"></div></el-col>  </el-row></template><style>#app{   height: 100%;  width: 100%;  display: block;   margin: 0px !important;  padding: 0px!important;  max-width: none !important;  }.el-row {   margin-top: 50px;}</style>

这里的类别 el-row 可以通过开发者工具在代码中查看到

4、列偏移

<template>  <el-row :gutter="30">    <el-col :span="8"><div style="background-color:burlywood; height: 50px;"></div></el-col>    <el-col :span="8"><div style="background-color: pink; height: 50px;"></div></el-col>    <el-col :span="8"><div style="background-color: red; height: 50px;"></div></el-col>  </el-row>  <el-row :gutter="20">    <el-col :span="6" :offset="6"><div style="background-color:burlywood; height: 50px;"></div></el-col>    <el-col :span="6" :offset="6"><div style="background-color: pink; height: 50px;"></div></el-col>  </el-row>  <el-row :gutter="20">    <el-col :span="12" :offset="6"><div style="background-color: red; height: 50px;"></div></el-col>  </el-row></template><style>#app{   height: 100%;  width: 100%;  display: block;   margin: 0px !important;  padding: 0px!important;  max-width: none !important;  }.el-row {   margin-top: 50px;}</style>

5、对齐方式

start：子元素左对齐。center：子元素在水平方向上居中对齐。end：子元素右对齐。space-between：子元素沿水平方向均匀分布，在第一个子元素之前和最后一个子元素之后没有空间。space-around：子元素沿水平方向均匀分布，每个子元素周围有相等的空间。space-evenly：子元素沿水平方向均匀分布，包括第一个子元素之前和最后一个子元素之后的空间。

<template>  <el-row :gutter="30" justify="center">    <el-col :span="8"><div style="background-color:burlywood; height: 50px;"></div></el-col>    <el-col :span="8"><div style="background-color: pink; height: 50px;"></div></el-col>    <el-col :span="8"><div style="background-color: red; height: 50px;"></div></el-col>  </el-row>  <el-row :gutter="20" justify="end">    <el-col :span="6" ><div style="background-color:burlywood; height: 50px;"></div></el-col>    <el-col :span="6" ><div style="background-color: pink; height: 50px;"></div></el-col>  </el-row>  <el-row :gutter="20" justify="start">    <el-col :span="6" ><div style="background-color:burlywood; height: 50px;"></div></el-col>    <el-col :span="6"><div style="background-color: pink; height: 50px;"></div></el-col>  </el-row></template><style>#app{   height: 100%;  width: 100%;  display: block;   margin: 0px !important;  padding: 0px!important;  max-width: none !important;  }.el-row {   margin-top: 50px;}</style>