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

一、项目简介和需求概述

1、课程目标

1.能够基于Vue3创建项目

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

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

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

2、项目概述


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


在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

Vue3
TypeScript
ElementPlus
ECharts
Apifox

二、项目初始化

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 './route
const app = createApp(App);
app.use(router)

3、配置 axios 库

安装:

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

引入:

import axios from 'axios';

4、配置Element Plus

npm install -g pnpm

安装 Element Plus:

pnpm install element-plus --save

安装Element Plus图标

pnpm install @element-plus/icons-vue

在 main.js 中引入 Element Plus

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

在 main.js 中引入 Element Plus Icon

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//const app = createApp(App);
 for (const [key, component] of Object.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-button type="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

使用 typeplainroundcircle 来定义按钮的样式。

<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、基础布局

通过 rowcol 组件,并通过 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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

跟着汪老师学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值