无广告自助建站百度网盘网站入口
一、项目简介和需求概述
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{