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{width: 1