一、前言
欢迎来到本期的博客！在这篇文章中，我们将带您深入了解前端开发领域中的一个热门话题：
如何使用 Vue 3 和 Vite 构建前端项目。随着现代 Web 应用程序的需求不断演进，
选择适当的工具和技术变得至关重要。Vue 3 作为一种流行的前端框架，以其出色的性能和灵活的特性赢得了众多开发者的青睐。
而 Vite，则以其极速的开发体验和创新的构建方式在开发者中引起了极大的兴趣。`
本次为前端知识点如果不懂前段可以去仓库直接copy出来使用,如果有什么问题可以在评论区留言,我会第一时间回复大家的.
在此之前已经更新了微信支付开篇、微信支付安全、微信实战基础框架搭建、本次更新为微信支付实战PC端接口搭建,实战篇分为几个章节因为代码量确实有点多哈.
注意: 如果不懂Vue语言没关系我会讲或直接Copy主要是学习如何实现的嘛
- 第一章从零玩转系列之微信支付开篇
- 第二章从零玩转系列之微信支付安全
- 第三章从零玩转系列之微信支付实战基础框架搭建
- 第四章从零玩转系列之微信支付实战PC端支付下单接口搭建
- 第五章从零玩转系列之微信支付实战PC端支付微信回调接口搭建
- 第六章从零玩转系列之微信支付实战PC端支付微信取消订单接口搭建
- 第七章从零玩转系列之微信支付实战PC端支付微信退款订单接口搭建
- 第八章从零玩转系列之微信支付实战PC端项目构建Vue3+Vite+页面基础搭建
- 第九章从零玩转系列之微信支付实战PC端装修下单页面
- 第十章从零玩转系列之微信支付实战PC端装修我的订单下单页面
- 第十一章从零玩转系列之微信支付实战PC端我的订单接入退款取消接口
- 第十二章从零玩转系列之微信支付实战Uni—App基础项目搭建
本次项目使用技术栈
后端: SpringBoot3.1.x、Mysql8.0、MybatisPlus
前端: Vue3、Vite、ElementPlus
小程序: Uniapp、Uview
演示地址查看 WEB端 小程序
二、介绍
1. 继续上一篇我们集成好了头部和内容区和底部
可以看到当前内容区域的样式
他其实是居中状态并且设置了固定的大小 1200px + margin(边缘) 0 auto;的参数进行左右居中上下0不设置任何属性的操作
⚠️注意: <router-view /> 是一个在前端Web开发中常用的Vue.js框架中的标签。Vue.js是一个流行的JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。
在Vue.js中，SPA的路由是通过Vue Router来管理的。路由是指根据不同的URL路径显示不同的内容，而不需要刷新整个页面。<router-view /> 是Vue Router提供的一个组件，它的作用是在页面中渲染与当前路由匹配的组件。
具体来说，当你在Vue Router中定义了一组路由规则，每个规则对应一个URL路径和一个组件，当用户访问某个URL时，匹配的组件会被渲染到<router-view /> 中，从而实现了页面内容的动态切换，而无需刷新整个页面。
例如，以下是一个简单的Vue Router的示例：
import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './components/Home.vue'; // 引入home页面 import About from './components/About.vue'; // 引入about页面 Vue.use(VueRouter); // 使用路由配置 // 编辑路由信息 const routes = [ { path: '/', component: Home },// 如果访问 / 那么跳转到 home页面 { path: '/about', component: About } // 如果访问 / about 即可跳转about页面 ]; // 创建路由对象将我们自定义的路由引入即可 const router = new VueRouter({ routes }); new Vue({ router, el: '#app' });
在这个例子中，当访问根路径 / 时，Home 组件会被渲染到 <router-view /> 中；当访问 /about 路径时，About 组件会被渲染到 <router-view /> 中。
总之，<router-view /> 是Vue Router中的一个占位符，用于动态渲染与当前路由匹配的组件内容，从而实现单页面应用程序中页面内容的切换。
2.使用开发工具调试 F12
使用快捷键
windows 快捷键 F12 或者 MacOS FN+F12
出来后点击控制台的鼠标即可唤出调试工具 直接指哪里打哪里
可以看到我们自定义样式都生效的宽度也是我们自定义固定死的高度则后面使用内容支撑开来,那么我们已经知道咋玩了直接开始装修
