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");
    else
       loginData.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")
         else
            loginData.errorMsg="用户名或密码错误";             
             
   }

</script>
<style>


    .login-container{
       width: 1