社区 › 业界 › Vue3简单项目流程分享——工作室主页

向梦桐 发表于 2025-6-6 15:10:02

Vue3简单项目流程分享——工作室主页

Vue3简单项目流程分享——工作室主页

零、写在最前

以下是项目相关的一些链接：

[*]源代码GitHub仓库（需要魔法上网）：仓库
[*]网页示例（需要魔法上网）：网页示例
[*]UI图（来源@设计师杨贺）：MasterGo主页
补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。
如果你想要运行源代码：

[*]首先需要保证你本地拥有Vue.js环境（具体方法和版本号下文有提到）
[*]将源代码克隆到本地（得保证本地有Git环境）
cd your_path
git clone https://github.com/YellowSeaa/studio_page.git
[*]安装依赖
npm install
[*]运行项目
npm run dev一、想法


[*]作业要求


[*]想做一个简单的工作室主页设计（在MasterGo上找到个模板）


[*]https://mastergo.com/goto/AvNhjBqG?page_id=:27558&file=128583730325968 邀请您进入《工作室主页设计》，点击链接开始协作
二、技术栈选用

课程作业要求要使用HTML+CSS+JSP技术，在网上了解到JSP内可以套用Vue（相当于用Vue写模板，然后外面套一层JSP模板即可）。
最终决定使用Vue来实现前端，并且使用element Plus脚手架，后端部分尝试使用JSP（没学过，不知道能不能弄的下来），如果实在不行就用Django做前后端分离开发。
数据库方面的话，就用Mysql或者sqlite3。
三、项目初始化

1. 安装Vue.js和JSP和Tomcat

由于之前已经安装过Vue，所以不记录了。
JSP和Tomcat参考的是下面几篇文章，直接使用homebrew安装的：

[*]homebrew安装Java
[*]homebrew安装Tomcat
值得注意的是以下启动 Tomcat方法
brew services start tomcat如果终端提示 Successfully started 'tomcat' (label: homebrew.mxcl.tomcat) 则说明启动成功，浏览器访问 http://localhost:8080 即可看到 Tomcat 的页面。
2. 环境版本记录


[*]Vue.js: @vue/cli 5.0.8
[*]npm: 10.5.0
[*]Java: openjdk 22.0.1 2024-04-16/ OpenJDK Runtime Environment Temurin-22.0.1+8 (build 22.0.1+8)/ OpenJDK 64-Bit Server VM Temurin-22.0.1+8 (build 22.0.1+8, mixed mode)
3. Vue项目创建

使用终端，进入想创建的文件夹位置，然后运行以下命令
npm create vue@latest然后会让我输入项目名称和进行一些选项，在此我只选择了引入 Vue Router 进行单页面应用开发，其他选项均选择了否。

最后根据提示进入项目文件夹内，安装依赖并运行即可。
cd <your-project-name>
npm install #安装依赖
npm run dev #运行项目在浏览器中打开对应网址即可

四、前端静态部分

1. 路由设置

本项目是简单的项目，只有一个主页面，页面内由上到下排布多个块。
我们只需要修改src/App.vue和src/router/index.js中的内容，将一开始的页面指向自定义的文件src/components/home.vue即可，以下是具体内容：
<template>
<RouterView />
</template>// index.jsimport { createRouter, createWebHistory } from 'vue-router'import home from '../components/home.vue'const router = createRouter({<template>
<RouterView />
</template>history: createWebHistory(import.meta.env.BASE_URL),<template>
<RouterView />
</template>routes: [<template>
<RouterView />
</template><template>
<RouterView />
</template>{<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>path: '/',<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>name: 'home',<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>component: home<template>
<RouterView />
</template><template>
<RouterView />
</template>},<template>
<RouterView />
</template>]})export default router<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>This is home

<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>2. 主页的排版

根据UI图可以看出，主页是由多个部分组成，由上到下排布。
本项目中将每个部分分别写成一个组件文件，然后在home.vue中集成。
home.vue只需要关注组件部分间的排版即可。
先分别创建好各个组件对应的文件：

然后修改home.vue
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>最终得到效果如下：

接下来只需要在对应的组件文件中，完成前端的绘制即可。
3. 顶部菜单栏

首先看一下UI图，布局如下：

使用flex布局，红色部分使用space-between：两端对齐，项目之间的间隔都相等；蓝色部分使用space-around：每个项目两侧的间隔相等。
代码如下：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>A Studio<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Home<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>What We Do<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Service<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Project<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Blog<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Contact<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>最终效果：

后续还需要做：
点击标签滚动到对应位置：参考文章
4. 头条部分

UI图：

其中红色部分使用flex分为左右两部分，左边使用flex分为上下三部分，右边则是一张图。
代码如下：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>A Digital Product Agency<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Leading digital agency with solid design and development expertise. We build readymade<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>websites, mobile applications, and elaborate online business services.<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Contact Now<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>最终效果：

5. 块1

接下来是下面的五个块中的第一个。UI图如下：

布局如图所示。
代码如下：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Our Client<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Several selected clients, who already believe in our service.<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>效果如下：


[*]遇到一个问题：布局的高度不是固定的（我在css里写了固定的数值），会随着浏览器的缩放而改变。暂未解决。
6. 块2

UI图如下：

布局有点复杂，其中两个蓝色部分通过调整不同的margin-top来实现错位的效果。
背景的几个矩形不太好直接通过代码绘制，直接导出一张图片放在容器背景中。
代码如下：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>How can we help your Business ?<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>We build readymade websites, mobile applications, and elaborate online business services.<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Business Idea Planning<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>We present you a proposal and discuss niffty-gritty like<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Financial Planning System<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Protocols apart from aengage models, pricing billing<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Development Website and App<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Communication protocols apart from engagement models<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Market Analysis Project<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Protocols apart from aengage models, pricing billing<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>效果如下：

实践中发现，使用背景图片来实现那些矩形，有点难以控制，效果不佳。最终我简化了一些元素，勉强能看。
如果要达到最好的效果，还是得通过代码实现矩形的绘制。
7. 块3

UI图：

这里的布局比较简单，就不过多赘述了。
7.1 视频播放器

比较特别的是此处使用了一个视频播放器，但是目前暂时没有实现，出现了一些bug：第三方的播放器插件安装后import显示找不到，传统的video播放不了……
先使用img代替，后续再修这个bug。
选用vue3VideoPlay这个插件，值得注意的是，这个插件有一个问题，其默认package.json中有一个路径是错的，要改写成下面这个：

另外，该插件官方的文档也有点问题，mp4文件不知道为什么播放不了，本地文件也播放不了……
经过测试，网络m3u8文件可以播放，所以下面使用此格式进行播放。（如何获得m3u8链接，写在了补充部分）
代码：

[*]template部分：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>此处值得注意的部分是，播放器的长和宽得像代码的写法才有效，写成css无效，另外，圆角也只能通过设置父容器overflow: hidden;实现。
poster部分是封面。

[*]script部分：
7.2 布局代码

代码：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Great Digital Product Agency since 2016<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template> Our Business Plan is a written document describing a company's core business activites,<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Objectives, and how it plans to achieve its goals. Our goal is to provide our client high quality<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Product with modern idea accordingly their budgets and according thir reuirements.<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>效果：

8. 块4

UI图：
这张图是有动效的，中间的蓝色圆圈可以选择不同的人物介绍。
在此先做好静态的外观，动效后面再补全。
8.1 静态布局

代码如下：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>What our happy client say<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Several selected clients, who already believe in our service.<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Matthew Paul<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Perfect, very good job! Thank you for the amazing design and work. Really<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>impressed with the high quality and quick turnaround time. Highly recommend.<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>事实上，这里的图片和选项都写法，复用性很差，而且不好做动效。后面会使用v-for等方法进行修改。
效果如下（因为没有找到合适的图片，就随便拿了一张图片）：

9. 块5

UI如下图：

这一部分的布局和上面的有许多不同，有一部分的布局不能使用flex实现，得用相对和绝对位置relative、absolute来实现重叠，如图中的红色、右边的绿色部分。
具体代码如下：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Subscribe Newsletter<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>I will update good news and promotion service not spam<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Contact Now<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>效果如下：

10. 底部

UI如下：

布局比较简单，就不过多赘述。
代码如下：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>A+ Studio<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Leading digital agency with solid design and development expertise. We build<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>readymade websites, mobile applications, and elaborate online business services.<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>What We Do<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Web Design<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
App Design<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
Social Media Manage<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
Market Analysis Project<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Company<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>About Us<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
Career<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
Become Investor<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Support<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>FAQ<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
Policy<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
Business<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>Contact<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>WhatsApp<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
Support 24<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>效果：

11. 补充

11.1 矩形绘制

前面写静态页的时候，有一部分背景图形是直接使用图片，但是拉伸效果不好，所以补充使用div来画矩形，以适应不同宽度的浏览器。
首先是headline的这两个矩形：

在right_part中加上两个div，并用相对位置和绝对位置固定。
// template<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>//style.right_part {<template>
<RouterView />
</template><template>
<RouterView />
</template>min-width: 817px;<template>
<RouterView />
</template><template>
<RouterView />
</template>height: 100%;<template>
<RouterView />
</template><template>
<RouterView />
</template>overflow: auto;<template>
<RouterView />
</template><template>
<RouterView />
</template>position: relative;<template>
<RouterView />
</template><template>
<RouterView />
</template>/* background-color: red; */}.right_part img {<template>
<RouterView />
</template><template>
<RouterView />
</template>height: 512px;<template>
<RouterView />
</template><template>
<RouterView />
</template>width: 754px;<template>
<RouterView />
</template><template>
<RouterView />
</template>/* min-width: 754px; */<template>
<RouterView />
</template><template>
<RouterView />
</template>border-radius: 0px 0px 0px 200px;<template>
<RouterView />
</template><template>
<RouterView />
</template>position: absolute;<template>
<RouterView />
</template><template>
<RouterView />
</template>top: 0px;<template>
<RouterView />
</template><template>
<RouterView />
</template>right: 0px;<template>
<RouterView />
</template><template>
<RouterView />
</template>/* margin-left: 64.5px;<template>
<RouterView />
</template><template>
<RouterView />
</template>margin-bottom: 89px; */}.rectangle1{<template>
<RouterView />
</template><template>
<RouterView />
</template>position: absolute;<template>
<RouterView />
</template><template>
<RouterView />
</template>top: 0px;<template>
<RouterView />
</template><template>
<RouterView />
</template>left: 0px;<template>
<RouterView />
</template><template>
<RouterView />
</template>width: 129px;<template>
<RouterView />
</template><template>
<RouterView />
</template>height: 129px;<template>
<RouterView />
</template><template>
<RouterView />
</template>background: #DAE9FF;<template>
<RouterView />
</template><template>
<RouterView />
</template>border-radius: 500px 500px 500px 500px;}.rectangle2{<template>
<RouterView />
</template><template>
<RouterView />
</template>position: absolute;<template>
<RouterView />
</template><template>
<RouterView />
</template>bottom: 0px;<template>
<RouterView />
</template><template>
<RouterView />
</template>right: 120px;<template>
<RouterView />
</template><template>
<RouterView />
</template>width: 178px;<template>
<RouterView />
</template><template>
<RouterView />
</template>height: 178px;<template>
<RouterView />
</template><template>
<RouterView />
</template>background: #FFF5DB;<template>
<RouterView />
</template><template>
<RouterView />
</template>border-radius: 0px 0px 100px 0px;}11.2 获得m3u8链接

上面提到过，那个视频播放插件无法播放本地视频，所以需要将视频上传到网络上，通过网络链接获取。
在此使用阿里云的媒体处理MPS和对象存储OSS实现。

[*]媒体处理MPS
[*]对象存储

[*]新建媒体Bucket


[*]新建工作流



[*]上传视频并发布



[*]获取链接


[*]OSS授权（不操作的话，链接会提示没权限）

11.3 限制最大宽度

之前在布局时，多使用flex布局，可以根据浏览器宽度自适应布局，在一定的宽度限制内效果还不错，但是如果宽度太大，会导致左右两边的组件之间有一个巨大的空白，很难看，所以需要限制一个最大的宽度，当超出这个宽度时，在两边使用空白填充。
只需要在home.vue的style部分添加下面代码。
max-width: 1440px;
/* 设置最大宽度 */
margin-left: auto;
/* 左侧自动填充 */
margin-right: auto;
/* 右侧自动填充 */效果如下：

11.4 打开页面默认在顶部

视频播放器有一个bug：在一开始打开页面的时候，会开始缓冲，缓冲时默认把页面滚动到播放器所在的位置。
但是我们想要打开时默认在顶部。
试过使用mounted钩子函数强制滚动到顶部，但是缓冲在后，结果是不生效。
认真查看了视频播放器的文档后，发现通过绑定事件，在缓冲开始时滚动到顶部，可以曲线救国。
const onloadstart = (ev) => {<template>
<RouterView />
</template>console.log("开始缓冲");<template>
<RouterView />
</template>window.scroll(0, 0);};
五、修改内容

1. 网页内的内容

以上，前端静态部分的所有布局都画好了，接下来要根据实际情况将内容修改成我们自己的。
在这里，我想要做的是我们开发的一款app的介绍，所以将页面改成了以下。（由于只需要修改内容，所以代码就不展示了）




2. 网页标题与图标


[*]将我们想用的图标替换掉public/favicon.ico
[*]修改根目录下的index.html文件：
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template> 试卷簿——专注高效的学习帮手<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>
[*]刷新即可看到修改成功。

六、动态部分

1. 顶部栏

1.1 固定在顶部

这个严格上不算是动态部分，可以直接通过css布局设置实现，只不过我前面忘记做了，就在此补充上。

[*]home.vue文件中设置布局

[*]TopBar.vue更改css
.bar {<template>
<RouterView />
</template><template>
<RouterView />
</template>display: flex;<template>
<RouterView />
</template><template>
<RouterView />
</template>justify-content: space-between;<template>
<RouterView />
</template>        /* margin要改成padding */<template>
<RouterView />
</template><template>
<RouterView />
</template>padding-top: 42px;<template>
<RouterView />
</template><template>
<RouterView />
</template>padding-left: 120px;<template>
<RouterView />
</template><template>
<RouterView />
</template> padding-right: 120px;<template>
<RouterView />
</template><template>
<RouterView />
</template>padding-bottom: 10px;<template>
<RouterView />
</template><template>
<RouterView />
</template>box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 加上底部阴影好看一些*/<template>
<RouterView />
</template><template>
<RouterView />
</template>/* margin-top: 42px;<template>
<RouterView />
</template><template>
<RouterView />
</template>margin-left: 120px;<template>
<RouterView />
</template><template>
<RouterView />
</template>margin-right: 120px; */}1.2 点击跳转指定位置

由于各个组件的高度是固定不变的，所以直接使用document.documentElement.scrollTop即可实现。

[*]定义函数

[*]给标签绑定函数
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>试卷簿<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>首页<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>支持平台<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>特色与优势<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>APP演示<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>团队介绍<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>订阅我们<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>2. 两个按钮



这两个按钮，“立即下降”按钮只需要绑定一个下载链接即可，下载链接可以使用阿里云oss来获取，具体方法和之前视频m3u8链接获取差不多，就不过多赘述。
“提交”按钮需要绑定一个数据库操作的接口，将输入框中的内容加入到数据库中。
由于目前没有可以下载的东西和数据库操作的接口，所以就简单绑定了一个函数给个消息框。代码就不展示了。


3. 成员介绍

成员介绍部分，需要做到可以点击下面的选择按钮，切换到对应的成员信息去。
template部分：
<template>
<RouterView />
</template>https://www.33rz.com/selectedMember.avatar<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>{{ selectedMember.name }}
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>{{ selectedMember.description }}
<template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template><template>
<RouterView />
</template>script部分：
七、部署到github上

以上，web页面基本完成，接下来就是将其部署到GitHub上。
参考教程：参考

[*]先新建一个github仓库，具体怎么操作就不详细讲。
[*]将代码上传到仓库中。
[*]修改配置文件
打开项目中的vite.config.js，找到下面代码块，更改为对应的 github 仓库名称
export default defineConfig({<template>
<RouterView />
</template><template>
<RouterView />
</template>base: '/your_repositories_name/', // github仓库名称<template>
<RouterView />
</template><template>
<RouterView />
</template>plugins: [],})
[*]编译vue代码
npm run build
[*]将编译后的代码上传到仓库中
先要在.gitignore文件中将dist文件夹的忽略给注释掉。

然后用git将该文件夹上传到指定分支。
git add dist
git commit -m "Your commit message"
git subtree split --prefix dist -b dist-branch
git push your_repositories_name dist-branch:gh-pages # 这里要改成具体的仓库名
git branch -d dist-branch最后在仓库的设置中打开github page即可。


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

查看完整版本: Vue3简单项目流程分享——工作室主页