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

news2025/4/18 16:30:13

一、项目简介和需求概述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2332087.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

zsh: command not found: hdc - 鸿蒙 HarmonyOS Next

zsh: command not found: hdc - 鸿蒙 HarmonyOS Next

终端中执行 hdc 命令抛出如下错误; zsh: command not found: hdc 解决办法 首先,查找到 DevEco-Studio 的 toolchains 目录路径; 其次,按照类似如下的文件夹层级结果推理到 toolchains 子级路径下,其中 sdk 后一级的路径可能会存在差异,以实际本地路径结构为主,直至找到 ope…
阅读更多...
蓝桥杯--寻找整数

蓝桥杯--寻找整数

题解 public static void main(String[] args) {int[] mod {0, 0, 1, 2, 1, 4, 5, 4, 1, 2, 9, 0, 5, 10, 11, 14, 9, 0, 11, 18, 9, 11, 11, 15, 17, 9, 23, 20, 25, 16, 29, 27, 25, 11, 17, 4, 29, 22, 37, 23, 9, 1, 11, 11, 33, 29, 15, 5, 41, 46};long t lcm(2, 3);lo…
阅读更多...
自然语言处理入门6——RNN生成文本

自然语言处理入门6——RNN生成文本

一、文本生成 我们在前面的文章中介绍了LSTM&#xff0c;根据输入时序数据可以输出下一个可能性最高的数据&#xff0c;如果应用在文字上&#xff0c;就是根据输入的文字&#xff0c;可以预测下一个可能性最高的文字。利用这个特点&#xff0c;我们可以用LSTM来生成文本。输入…
阅读更多...
FPGA_DDR错误总结

FPGA_DDR错误总结

1otp 31-67 解决 端口没连接 必须赋值&#xff1b; 2.PLACE 30-58 TERM PLINITCALIBZ这里有问题 在顶层输出但是没有管脚约束报错 3.ERROR: [Place 30-675] 这是时钟不匹配IBUF不在同一个时钟域&#xff0c;时钟不在同一个时钟域里&#xff0c;推荐的不建议修改 问题 原本…
阅读更多...
NOIP2011提高组.玛雅游戏

NOIP2011提高组.玛雅游戏

目录 题目算法标签: 模拟, 搜索, d f s dfs dfs, 剪枝优化思路*详细注释版代码精简注释版代码 题目 185. 玛雅游戏 算法标签: 模拟, 搜索, d f s dfs dfs, 剪枝优化 思路 可行性剪枝 如果某个颜色的格子数量少于 3 3 3一定无解因为要求字典序最小, 因此当一个格子左边有…
阅读更多...
基于ssm框架的校园代购服务订单管理系统【附源码】

基于ssm框架的校园代购服务订单管理系统【附源码】

1、系统框架 1.1、项目所用到技术&#xff1a; javaee项目 Spring&#xff0c;springMVC&#xff0c;mybatis&#xff0c;mvc&#xff0c;vue&#xff0c;maven项目。 1.2、项目用到的环境&#xff1a; 数据库 &#xff1a;mysql5.X、mysql8.X都可以jdk1.8tomcat8 及以上开发…
阅读更多...
【10】数据结构的矩阵与广义表篇章

【10】数据结构的矩阵与广义表篇章

目录标题 二维以上矩阵矩阵存储方式行序优先存储列序优先存储 特殊矩阵对称矩阵稀疏矩阵三元组方式存储稀疏矩阵的实现三元组初始化稀疏矩阵的初始化稀疏矩阵的创建展示当前稀疏矩阵稀疏矩阵的转置 三元组稀疏矩阵的调试与总代码十字链表方式存储稀疏矩阵的实现十字链表数据标签…
阅读更多...
猜猜乐游戏（python)

猜猜乐游戏（python)

import randomprint(**30) print(欢迎进入娱乐城) print(**30)username input(输入用户名&#xff1a;) cs 0answer input( 是否加入"猜猜乐"游戏(yes/no)? )if answer yes:while True:num int(input(%s! 当前你的金币数为%d! 请充值(100&#xffe5;30币&…
阅读更多...
spring boot 2.7 集成 Swagger 3.0 API文档工具

spring boot 2.7 集成 Swagger 3.0 API文档工具

背景 Swagger 3.0 是 OpenAPI 规范体系下的重要版本&#xff0c;其前身是 Swagger 2.0。在 Swagger 2.0 之后&#xff0c;该规范正式更名为 OpenAPI 规范&#xff0c;并基于新的版本体系进行迭代&#xff0c;因此 Swagger 3.0 实际对应 OpenAPI 3.0 版本。这一版本着重强化了对…
阅读更多...
Dinky 和 Flink CDC 在实时整库同步的探索之路

Dinky 和 Flink CDC 在实时整库同步的探索之路

摘要&#xff1a;本文整理自 Dinky 社区负责人&#xff0c;Apache Flink CDC contributor 亓文凯老师在 Flink Forward Asia 2024 数据集成&#xff08;二&#xff09;专场中的分享。主要讲述 Dinky 的整库同步技术方案演变至 Flink CDC Yaml 作业的探索历程&#xff0c;并深入…
阅读更多...
视频融合平台EasyCVR搭建智慧粮仓系统：为粮仓管理赋能新优势

视频融合平台EasyCVR搭建智慧粮仓系统：为粮仓管理赋能新优势

一、项目背景 当前粮仓管理大多仍处于原始人力监管或初步信息化监管阶段。部分地区虽采用了简单的传感监测设备&#xff0c;仍需大量人力的配合&#xff0c;这不仅难以全面监控粮仓复杂的环境&#xff0c;还容易出现管理 “盲区”&#xff0c;无法实现精细化的管理。而一套先进…
阅读更多...
3D Gaussian Splatting as MCMC 与gsplat中的应用实现

3D Gaussian Splatting as MCMC 与gsplat中的应用实现

3D高斯泼溅（3D Gaussian splatting）自2023年提出以后，相关研究paper井喷式增长，尽管出现了许多改进版本，但依旧面临着诸多挑战，例如实现照片级真实感、应对高存储需求，而 “悬浮的高斯核” 问题就是其中之一。浮动高斯核通常由输入图像中的曝光或颜色不一致引发，也可能…
阅读更多...
C++初阶-C++的讲解1

C++初阶-C++的讲解1

目录 1.缺省(sheng)参数 2.函数重载 3.引用 3.1引用的概念和定义 3.2引用的特性 3.3引用的使用 3.4const引用 3.5.指针和引用的关系 4.nullptr 5.总结 1.缺省(sheng)参数 &#xff08;1&#xff09;缺省参数是声明或定义是为函数的参数指定一个缺省值。在调用该函数是…
阅读更多...
STM32_USB

STM32_USB

概述 本文是使用HAL库的USB驱动 因为官方cubeMX生成的hal库做组合设备时过于繁琐 所以这里使用某大神的插件,可以集成在cubeMX里自动生成组合设备 有小bug会覆盖生成文件里自己写的内容,所以生成一次后注意保存 插件安装 下载地址 https://github.com/alambe94/I-CUBE-USBD-Com…
阅读更多...
STM32 的编程方式总结

STM32 的编程方式总结

&#x1f9f1; 按照“是否可独立工作”来分&#xff1a; 库/方式是否可独立使用是否依赖其他库说明寄存器裸写✅ 是❌ 无完全自主控制&#xff0c;无库依赖标准库&#xff08;StdPeriph&#xff09;✅ 是❌ 只依赖 CMSIS自成体系&#xff08;F1专属&#xff09;&#xff0c;只…
阅读更多...
MFC工具栏CToolBar从专家到小白

MFC工具栏CToolBar从专家到小白

CToolBar m_wndTool; //创建控件 m_wndTool.CreateEx(this, TBSTYLE_FLAT|TBSTYLE_NOPREFIX, WS_CHILD | WS_VISIBLE | CBRS_FLYBY | CBRS_TOP | CBRS_SIZE_DYNAMIC); //加载工具栏资源 m_wndTool.LoadToolBar(IDR_TOOL_LOAD) //在.rc中定义&#xff1a;IDR_TOOL_LOAD BITMAP …
阅读更多...
大厂机考——各算法与数据结构详解

大厂机考——各算法与数据结构详解

目录及其索引 哈希双指针滑动窗口子串普通数组矩阵链表二叉树图论回溯二分查找栈堆贪心算法动态规划多维动态规划学科领域与联系总结​​ 哈希 ​​学科领域​​&#xff1a;计算机科学、密码学、数据结构 ​​定义​​&#xff1a;通过哈希函数将任意长度的输入映射为固定长度…
阅读更多...
10：00开始面试，10：08就出来了，问的问题有点变态。。。

10：00开始面试，10：08就出来了，问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…
阅读更多...
基于ueditor编辑器的功能开发之给编辑器图片增加水印功能

基于ueditor编辑器的功能开发之给编辑器图片增加水印功能

用户需求&#xff0c;双击编辑器中的图片的时候&#xff0c;出现弹框&#xff0c;用户可以选择水印缩放倍数、距离以及水印所放置的方位&#xff08;当然有很多水印插件&#xff0c;位置大小透明度用户都能够自定义&#xff0c;但是用户需求如此&#xff0c;就自己写了&#xf…
阅读更多...
【CSS基础】- 02（emmet语法、复合选择器、显示模式、背景标签）

【CSS基础】- 02（emmet语法、复合选择器、显示模式、背景标签）

css第二天 一、emmet语法 1、简介 ​ Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。 ​ 快速生成HTML结构语法 ​ 快速生成CSS样式语法 2、快速生成HTML结构语法 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023