学习课程大纲

  1. 前端Vue3 框架的快速搭建以及项目工程的讲解
  2. 使用Vue3集成Element-Plus快速搭建一个管理系统的页面框架
  3. Springboot3框架的快速搭建以及项目工程的讲解
  4. Springboot3整合MyBatis实现数据库操作
  5. Springboot3+vue3实现增删改查、分页查询、批量删除（上）
  6. Springboot3+vue3实现增删改查、分页查询、批量删除（下）
  7. Springboot3+Vue3实现excel批量导入导出
  8. Springboot3+vue3实现登录注册功能
  9. Springboot3+vue3实现jwt登录鉴权
  10. Springboot3+vue3实现文件上传和下载
  11. Springboot3+vue3实现个人中心、修改密码
  12. Springboot3+Vue3实现系统公告功能
  13. Springboot3+Vue3实现角色权限控制
  14. Springboot3+Vue3实现富文本编辑器功能
  15. Springboot3+Vue3实现模块之间的关联
  16. Springboot3+Vue3实现echarts数据统计
  17. Springboot3+Vue3实现提交审核业务功能
  18. Springboot3+Vue3实现预约审核业务功能
  19. Springboot3+Vue3实现前台首页的设计
  20. Springboot3+Vue3实现前台详情页的设计

Vue3项目搭建

安装NodeJS

npm使用之前一定要配置淘宝镜像:

1
npm config set registry https://registry.npmmirror.com

如果过期了,就自行查询

Vue环境搭建

  • 前提条件
    • 熟悉命令行
    • 已安装18.3 或更高版本的Node.js

命令行启动vue

在想创建目录的地方输入:

1
npm create vue@latest

image-20250227100551365.png

1
2
3
cd vue
npm install
npm run dev

然后会出现一个网址,直接访问即可

如果你想关闭vue工程,你可以按两次ctrl+c

在idea中启动vue

点击这个按钮启动vue工程

image-20250227100754395.png

然后修改一下File encoding 全部改为utf-8

删除src/assets下的base.css main.css 还有components下的icons,HelloWorld.vue,TheWelcome.vue,WelcomeItem.vue,views文件夹下的AboutView.vue

注意: 删除之后会报错但是不要急,往下看

再继续修改views下面的HomeView.vue

1
2
3
4
5
6
7
8
9
10
<template>
<div>
主页
</div>
</template>

<script setup>

</script>

再改个文件名直接叫:Home.vue

src下的App.vue里面的内容改成:

1
2
3
<template>
  <RouterView />
</template>

精简router下的index.js

1
2
3
4
5
6
7
8
9
10
11
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path: '/', name: 'home', component: import('../views/Home.vue'),},
  ],
})

export default router

删除main.js中的

1
import './assets/main.css'

精简之后的工程:

image-20250227102331154.png

vue工程目录解读

node_modules: 不是我们的源码文件,这个是依赖包瞎子啊之后的存放目录

public: 存放全局静态文件,比如网页的icon

src

  • assets: 一般是存放代码引用的静态文件,比如:css,js,img

  • components:放一些vue的组件(可复用的代码块,就叫组件)

  • router: 定义路由文件的目录

    比方说我在views下创建一个About.vue文件

    内容:

    1
    2
    3
    4
    5
    <template>
      <div>
        这是关于的页面
      </div>
    </template>

    然后在router下的index.js:

    1
    2
    3
    4
    routes: [
      {path: '/', name: 'home', component: import('../views/Home.vue'),},
      {path: '/about', component: import('../views/About.vue'),},//新增
    ],

    然后在浏览器访问的时候加上:http://localhost:5173/about

  • views: 存放vue网页文件的目录

  • App.vue: vue 页面全局的入口,所有vue文件的父级

  • main.js: 代码的配置文件,引入第三方的组件或者我们自己定义的一些组件,css,js等

index.html: vue 编译成网页才能在浏览器渲染

jsconfig.json: 内部配置文件

package.json: 定义依赖库的文件

package-lock.json: 定义依赖库的文件

package-lock.json: 在你下载以来的时候锁定版本的一个文件

vite.config.js: 全局的配置文件 [可以去vite官网查看进行了解]

设置网页标题

在index.html中 修改

1
<title>demo-project</title>

全局css global.css

在src下的assets新建一个文件夹css然后再创建一个文件叫global.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}

a {
    text-decoration: none;
}

进而在main.js中引入

1
import './assets/css/global.css'

定义404页面

路由配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path: '/', name: 'home', component: import('../views/Home.vue'),},
    {path: '/about', component: import('../views/About.vue'),},
    {path: '/notFound', component: import('../views/404.vue'),},
    {path: '/:pathMatch(.*)',redirect: '/notFound'}
  ],
})

export default router

404页面代码: 在views下

1
2
3
4
5
6
7
8
9
<template>
  <div style="height: 100vh;display: flex;align-items: center;justify-content: center">
    <div style="width: 50%">
      <img style="width: 100%" src="@/assets/imgs/404.png" alt="">
      <div style="text-align: center;padding: 20px 0;font-size: 20px;"><a style="color: #5389d7" href="/">返回主页</a></div>
    </div>
  </div>
</template>

1. height: 100vh

  • 作用 ：让元素的高度等于浏览器窗口的100%高度 。
  • 解释 ：
    • vh 是 “viewport height”（视口高度）的缩写，1vh = 窗口高度的1%。
    • 100vh 表示元素高度撑满整个屏幕，不会出现纵向滚动条（除非内容超出屏幕）。

2. display: flex

  • 作用 ：启用Flex 布局 （一种灵活的布局方式）。
  • 解释 ：
    • Flex 布局可以让子元素自动调整大小，均匀分配空间，轻松实现对齐。
    • 它特别适合需要水平或垂直居中 的场景。

3. align-items: center

  • 作用 ：让子元素在垂直方向（交叉轴）上居中对齐 。
  • 解释 ：
    • 默认情况下，Flex 布局的主轴是水平方向（从左到右），垂直方向称为交叉轴。
    • center 表示子元素会沿着交叉轴（垂直方向）居中。

4. justify-content: center

  • 作用 ：让子元素在水平方向（主轴）上居中对齐 。
  • 解释 ：
    • justify-content 控制主轴（默认水平方向）上的对齐方式。
    • center 表示子元素会水平居中。

🌟 组合效果

当这些样式写在一起时，效果是：

1
2
3
4
5
6
7
8
9
10
11
.container {

  height: 100vh;          /* 高度撑满整个屏幕 */

  display: flex;          /* 启用 Flex 布局 */

  align-items: center;    /* 垂直居中 */

  justify-content: center;/* 水平居中 */

}
  • 会让 .container 的子元素在屏幕正中央完全居中 （无论屏幕尺寸如何）。
  • 常用于登录框、加载动画等需要全局居中的场景。

📱 示例场景

假设你有一个登录框：

1
2
3
<div class="container">
  <div class="login-box">登录表单</div>
</div>

加上上述样式后，.login-box 会始终在屏幕正中央显示，无论屏幕大小如何变化。