41、web前端开发之Vue3保姆教程(五 实战案例)

一、项目简介和需求概述

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中

三、界面实现

1、登录页面

1、创建Login.vue

1.1、添加表单：

<template>    <div class="login-container"><div class="login-card"><el-header></el-header><el-form class="login-form"><el-form-item label="用户名:" label-width="90px"><el-input  class="input-item" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" label-width="90px"><el-input class="input-item" placeholder="请输入密码" ></el-input></el-form-item><el-form-item ><el-button class="login-button" type="primary">登录</el-button></el-form-item></el-form></div></div>
</template><style scope>.login-card{width:400px}  .input-item{width:240px  !important;}.login-form{padding: 20px;}.login-button{width:100%;background-color: #607A9E !important;}</style>

1.2、添加头部

<template>    <div class="login-container"><div class="login-card"><el-header class="login-header">登录</el-header><el-form class="login-form"><el-form-item label="用户名:" label-width="90px"><el-input  class="input-item" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" label-width="90px"><el-input class="input-item" placeholder="请输入密码" ></el-input></el-form-item><el-form-item ><el-button class="login-button" type="primary">登录</el-button></el-form-item></el-form></div></div>
</template><style scope>.login-card{width:400px}  .login-header{width: 100%;background-color: #607A9E;height: 60px;text-align: center;font-size: 24px;font-weight: bold;line-height: 60px;color: #fff;}.input-item{width:240px  !important;}.login-form{padding: 20px;}.login-button{width:100%;background-color: #607A9E !important;}</style>

1.3、添加登录窗口的边框和阴影

<template>    <div class="login-container"><div class="login-card"><el-header class="login-header">登录</el-header><el-form class="login-form"><el-form-item label="用户名:" label-width="90px"><el-input  class="input-item" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" label-width="90px"><el-input class="input-item" placeholder="请输入密码" ></el-input></el-form-item><el-form-item ><el-button class="login-button" type="primary">登录</el-button></el-form-item></el-form></div></div>
</template><style scope>.login-card{width:400px;border-radius: 5px;overflow: hidden;box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}  .login-header{width: 100%;background-color: #607A9E;height: 60px;text-align: center;font-size: 24px;font-weight: bold;line-height: 60px;color: #fff;}.input-item{width:240px  !important;}.login-form{padding: 20px;}.login-button{width:100%;background-color: #607A9E !important;}</style>

1.4、设置登录窗口居于页面的中间

设置login-container中的内容居中：

<template>    <div class="login-container"><div class="login-card"><el-header class="login-header">登录</el-header><el-form class="login-form"><el-form-item label="用户名:" label-width="90px"><el-input  class="input-item" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" label-width="90px"><el-input class="input-item" placeholder="请输入密码" ></el-input></el-form-item><el-form-item ><el-button class="login-button" type="primary">登录</el-button></el-form-item></el-form></div></div>
</template><style scope>.login-container{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;       }.login-card{width:400px;border-radius: 5px;overflow: hidden;box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}  .login-header{width: 100%;background-color: #607A9E;height: 60px;text-align: center;font-size: 24px;font-weight: bold;line-height: 60px;color: #fff;}.input-item{width:240px  !important;}.login-form{padding: 20px;}.login-button{width:100%;background-color: #607A9E !important;}</style>

1.5、重新设置#app的布局

重新设置#app布局为左对齐 默认是网格布局

修改src/assets/main.css文件，在文件中添加

#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;}

1.6、添加表单功能

添加表单元素的响应式和表单的验证功能

<template>    <div class="login-container"><div class="login-card"><el-header class="login-header">登录</el-header><el-form class="login-form" :model="loginData" :rules="loginRules"><el-form-item label="用户名:" label-width="90px" prop="username" ><el-input  class="input-item" v-model="loginData.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" label-width="90px" prop="password"><el-input class="input-item" v-model="loginData.password" show-password placeholder="请输入密码" ></el-input></el-form-item><el-form-item ><el-button class="login-button" type="primary">登录</el-button></el-form-item></el-form></div></div>
</template><script setup>import {reactive} from "vue";const loginData=reactive({username:'',password:''
})const loginRules={username:[{required:true,message:"请输入用户名",trigger:"blur"}],password:[{required:true,message:"请输入密码",trigger:"blur"}],
}</script><style scope>.login-container{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;       }.login-card{width:400px;border-radius: 5px;overflow: hidden;box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}  .login-header{width: 100%;background-color: #607A9E;height: 60px;text-align: center;font-size: 24px;font-weight: bold;line-height: 60px;color: #fff;}.input-item{width:240px  !important;}.login-form{padding: 20px;}.login-button{width:100%;background-color: #607A9E !important;}</style>

1.7、模拟提交功能

<template>    <div class="login-container"><div class="login-card"><el-header class="login-header">登录</el-header><el-form class="login-form" :model="loginData" :rules="loginRules"><el-form-item label="用户名:" label-width="90px" prop="username" ><el-input  class="input-item" v-model="loginData.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" label-width="90px" prop="password"><el-input class="input-item" v-model="loginData.password" show-password placeholder="请输入密码" ></el-input></el-form-item><el-form-item ><el-button class="login-button" type="primary" @click="login">登录</el-button></el-form-item><div class="error-msg">{{loginData.errorMsg}}</div></el-form></div></div>
</template><script setup>import {reactive} from "vue";
import {useRouter} from "vue-router";const loginData=reactive({username:'',password:'',errorMsg:''
})const loginRules={username:[{required:true,message:"请输入用户名",trigger:"blur"}],password:[{required:true,message:"请输入密码",trigger:"blur"}],
}const router=useRouter();function login(){if(loginData.username=="admin" && loginData.password=="admin123")router.push("/index");elseloginData.errorMsg="用户名或密码出错"  }</script><style scope>.login-container{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;       }.login-card{width:400px;border-radius: 5px;overflow: hidden;box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}  .login-header{width: 100%;background-color: #607A9E;height: 60px;text-align: center;font-size: 24px;font-weight: bold;line-height: 60px;color: #fff;}.input-item{width:240px  !important;}.login-form{padding: 20px;}.login-button{width:100%;background-color: #607A9E !important;}.error-msg{text-align: center;color:red;}
</style>

1.8、完整代码

<template><div class="login-container">
<div class="login-card"><el-header class="login-header">登录</el-header><el-form class="login-form"   :model="loginData" :rules="loginRules" ><el-form-item label="用户名:" prop="username" label-width="90px"><el-input class="input-item" v-model="loginData.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码:" prop="password" label-width="90px"><el-input class="input-item" v-model="loginData.password" placeholder="请输入密码" show-password></el-input></el-form-item><el-form-item><el-button class="login-button"  type="primary" @click="login">登录</el-button></el-form-item><div class="error-msg">{{loginData.errorMsg}}</div></el-form>
</div>
</div></template><script setup>import {reactive} from "vue"import {useRouter} from "vue-router"const loginData = reactive({username:'',password:'',errorMsg:''})const loginRules = {username:[{required:true,message:"请输入用户名",trigger:"blur"}],password:[{required:true,message:"请输入密码",trigger:"blur"}]
}   const router=useRouter();function login(){if(loginData.username=="admin" && loginData.password=="admin123")//loginData.errorMsg="success";router.push("/index")elseloginData.errorMsg="用户名或密码错误";             }</script>
<style>.login-container{