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

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

零、写在最前

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

• 源代码GitHub仓库（需要魔法上网）：仓库
  
• 网页示例（需要魔法上网）：网页示例
  
• UI图（来源@设计师杨贺）：MasterGo主页
  

补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。
如果你想要运行源代码：

• 首先需要保证你本地拥有Vue.js环境（具体方法和版本号下文有提到）
  
• 将源代码克隆到本地（得保证本地有Git环境）
  

1. cd your_path
2. git clone https://github.com/YellowSeaa/studio_page.git

复制代码

• 安装依赖
  

1. npm install

复制代码

• 运行项目
  

1. 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方法

1. 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项目创建

使用终端，进入想创建的文件夹位置，然后运行以下命令

1. npm create vue@latest

复制代码

然后会让我输入项目名称和进行一些选项，在此我只选择了引入 Vue Router 进行单页面应用开发，其他选项均选择了否。

最后根据提示进入项目文件夹内，安装依赖并运行即可。

1. cd <your-project-name>
2. npm install #安装依赖
3. npm run dev #运行项目

复制代码

在浏览器中打开对应网址即可

四、前端静态部分

1. 路由设置

本项目是简单的项目，只有一个主页面，页面内由上到下排布多个块。
我们只需要修改src/App.vue和src/router/index.js中的内容，将一开始的页面指向自定义的文件src/components/home.vue即可，以下是具体内容：

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

复制代码

1. // index.jsimport { createRouter, createWebHistory } from 'vue-router'import home from '../components/home.vue'const router = createRouter({<template>
2.   <RouterView />
3. </template>history: createWebHistory(import.meta.env.BASE_URL),<template>
4.   <RouterView />
5. </template>routes: [<template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template>{<template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template>path: '/',<template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template>name: 'home',<template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template><template>
26.   <RouterView />
27. </template>component: home<template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template>},<template>
32.   <RouterView />
33. </template>]})export default router

复制代码

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template>[size=6]This is home[/size]
15. <template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template>

复制代码

2. 主页的排版

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

然后修改home.vue

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template><template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template><template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template><template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template><template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template>

复制代码

最终得到效果如下：

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

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

使用flex布局，红色部分使用space-between：两端对齐，项目之间的间隔都相等；蓝色部分使用space-around：每个项目两侧的间隔相等。
代码如下：

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template>A Studio<template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template><template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template>Home<template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template><template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template>What We Do<template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template><template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template>Service<template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template><template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template>Project<template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template><template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template><template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template>Blog<template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template><template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template>Contact<template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template><template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template><template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template>

复制代码

最终效果：

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

UI图：

其中红色部分使用flex分为左右两部分，左边使用flex分为上下三部分，右边则是一张图。
代码如下：

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template>A Digital Product Agency<template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template>Leading digital agency with solid design and development expertise. We build readymade<template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template>websites, mobile applications, and elaborate online business services.<template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template>Contact Now<template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template><template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template><template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template><template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template><template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template>[align=center] [/align]<template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template><template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template><template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template>

复制代码

最终效果：

5. 块1

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

布局如图所示。
代码如下：

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template>Our Client<template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template>Several selected clients, who already believe in our service.<template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template><template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template>[align=center] [/align]<template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template><template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template>[align=center] [/align]<template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template><template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template>[align=center] [/align]<template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template><template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template><template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template>[align=center] [/align]<template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template><template>
106.   <RouterView />
107. </template><template>
108.   <RouterView />
109. </template><template>
110.   <RouterView />
111. </template><template>
112.   <RouterView />
113. </template>

复制代码

效果如下：

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

6. 块2

UI图如下：

布局有点复杂，其中两个蓝色部分通过调整不同的margin-top来实现错位的效果。
背景的几个矩形不太好直接通过代码绘制，直接导出一张图片放在容器背景中。
代码如下：

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template>How can we help your Business ?<template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template>We build readymade websites, mobile applications, and elaborate online business services.<template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template><template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template><template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template><template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template><template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template><template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template><template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template><template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template><template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template><template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template><template>
106.   <RouterView />
107. </template><template>
108.   <RouterView />
109. </template><template>
110.   <RouterView />
111. </template><template>
112.   <RouterView />
113. </template>[align=center] [/align]<template>
114.   <RouterView />
115. </template><template>
116.   <RouterView />
117. </template><template>
118.   <RouterView />
119. </template><template>
120.   <RouterView />
121. </template><template>
122.   <RouterView />
123. </template><template>
124.   <RouterView />
125. </template><template>
126.   <RouterView />
127. </template><template>
128.   <RouterView />
129. </template><template>
130.   <RouterView />
131. </template><template>
132.   <RouterView />
133. </template>Business Idea Planning<template>
134.   <RouterView />
135. </template><template>
136.   <RouterView />
137. </template><template>
138.   <RouterView />
139. </template><template>
140.   <RouterView />
141. </template><template>
142.   <RouterView />
143. </template><template>
144.   <RouterView />
145. </template><template>
146.   <RouterView />
147. </template><template>
148.   <RouterView />
149. </template><template>
150.   <RouterView />
151. </template><template>
152.   <RouterView />
153. </template>We present you a proposal and discuss niffty-gritty like<template>
154.   <RouterView />
155. </template><template>
156.   <RouterView />
157. </template><template>
158.   <RouterView />
159. </template><template>
160.   <RouterView />
161. </template><template>
162.   <RouterView />
163. </template><template>
164.   <RouterView />
165. </template><template>
166.   <RouterView />
167. </template><template>
168.   <RouterView />
169. </template><template>
170.   <RouterView />
171. </template><template>
172.   <RouterView />
173. </template><template>
174.   <RouterView />
175. </template><template>
176.   <RouterView />
177. </template><template>
178.   <RouterView />
179. </template><template>
180.   <RouterView />
181. </template><template>
182.   <RouterView />
183. </template><template>
184.   <RouterView />
185. </template><template>
186.   <RouterView />
187. </template><template>
188.   <RouterView />
189. </template><template>
190.   <RouterView />
191. </template><template>
192.   <RouterView />
193. </template><template>
194.   <RouterView />
195. </template><template>
196.   <RouterView />
197. </template><template>
198.   <RouterView />
199. </template><template>
200.   <RouterView />
201. </template><template>
202.   <RouterView />
203. </template><template>
204.   <RouterView />
205. </template>[align=center] [/align]<template>
206.   <RouterView />
207. </template><template>
208.   <RouterView />
209. </template><template>
210.   <RouterView />
211. </template><template>
212.   <RouterView />
213. </template><template>
214.   <RouterView />
215. </template><template>
216.   <RouterView />
217. </template><template>
218.   <RouterView />
219. </template><template>
220.   <RouterView />
221. </template><template>
222.   <RouterView />
223. </template><template>
224.   <RouterView />
225. </template>Financial Planning System<template>
226.   <RouterView />
227. </template><template>
228.   <RouterView />
229. </template><template>
230.   <RouterView />
231. </template><template>
232.   <RouterView />
233. </template><template>
234.   <RouterView />
235. </template><template>
236.   <RouterView />
237. </template><template>
238.   <RouterView />
239. </template><template>
240.   <RouterView />
241. </template><template>
242.   <RouterView />
243. </template><template>
244.   <RouterView />
245. </template>Protocols apart from aengage models, pricing billing<template>
246.   <RouterView />
247. </template><template>
248.   <RouterView />
249. </template><template>
250.   <RouterView />
251. </template><template>
252.   <RouterView />
253. </template><template>
254.   <RouterView />
255. </template><template>
256.   <RouterView />
257. </template><template>
258.   <RouterView />
259. </template><template>
260.   <RouterView />
261. </template><template>
262.   <RouterView />
263. </template><template>
264.   <RouterView />
265. </template><template>
266.   <RouterView />
267. </template><template>
268.   <RouterView />
269. </template><template>
270.   <RouterView />
271. </template><template>
272.   <RouterView />
273. </template><template>
274.   <RouterView />
275. </template><template>
276.   <RouterView />
277. </template><template>
278.   <RouterView />
279. </template><template>
280.   <RouterView />
281. </template><template>
282.   <RouterView />
283. </template><template>
284.   <RouterView />
285. </template><template>
286.   <RouterView />
287. </template><template>
288.   <RouterView />
289. </template><template>
290.   <RouterView />
291. </template><template>
292.   <RouterView />
293. </template><template>
294.   <RouterView />
295. </template><template>
296.   <RouterView />
297. </template><template>
298.   <RouterView />
299. </template><template>
300.   <RouterView />
301. </template><template>
302.   <RouterView />
303. </template><template>
304.   <RouterView />
305. </template><template>
306.   <RouterView />
307. </template><template>
308.   <RouterView />
309. </template><template>
310.   <RouterView />
311. </template><template>
312.   <RouterView />
313. </template><template>
314.   <RouterView />
315. </template><template>
316.   <RouterView />
317. </template><template>
318.   <RouterView />
319. </template><template>
320.   <RouterView />
321. </template>[align=center] [/align]<template>
322.   <RouterView />
323. </template><template>
324.   <RouterView />
325. </template><template>
326.   <RouterView />
327. </template><template>
328.   <RouterView />
329. </template><template>
330.   <RouterView />
331. </template><template>
332.   <RouterView />
333. </template><template>
334.   <RouterView />
335. </template><template>
336.   <RouterView />
337. </template><template>
338.   <RouterView />
339. </template><template>
340.   <RouterView />
341. </template>Development Website and App<template>
342.   <RouterView />
343. </template><template>
344.   <RouterView />
345. </template><template>
346.   <RouterView />
347. </template><template>
348.   <RouterView />
349. </template><template>
350.   <RouterView />
351. </template><template>
352.   <RouterView />
353. </template><template>
354.   <RouterView />
355. </template><template>
356.   <RouterView />
357. </template><template>
358.   <RouterView />
359. </template><template>
360.   <RouterView />
361. </template>Communication protocols apart from engagement models<template>
362.   <RouterView />
363. </template><template>
364.   <RouterView />
365. </template><template>
366.   <RouterView />
367. </template><template>
368.   <RouterView />
369. </template><template>
370.   <RouterView />
371. </template><template>
372.   <RouterView />
373. </template><template>
374.   <RouterView />
375. </template><template>
376.   <RouterView />
377. </template><template>
378.   <RouterView />
379. </template><template>
380.   <RouterView />
381. </template><template>
382.   <RouterView />
383. </template><template>
384.   <RouterView />
385. </template><template>
386.   <RouterView />
387. </template><template>
388.   <RouterView />
389. </template><template>
390.   <RouterView />
391. </template><template>
392.   <RouterView />
393. </template><template>
394.   <RouterView />
395. </template><template>
396.   <RouterView />
397. </template><template>
398.   <RouterView />
399. </template><template>
400.   <RouterView />
401. </template><template>
402.   <RouterView />
403. </template><template>
404.   <RouterView />
405. </template><template>
406.   <RouterView />
407. </template><template>
408.   <RouterView />
409. </template><template>
410.   <RouterView />
411. </template><template>
412.   <RouterView />
413. </template>[align=center] [/align]<template>
414.   <RouterView />
415. </template><template>
416.   <RouterView />
417. </template><template>
418.   <RouterView />
419. </template><template>
420.   <RouterView />
421. </template><template>
422.   <RouterView />
423. </template><template>
424.   <RouterView />
425. </template><template>
426.   <RouterView />
427. </template><template>
428.   <RouterView />
429. </template><template>
430.   <RouterView />
431. </template><template>
432.   <RouterView />
433. </template>Market Analysis Project<template>
434.   <RouterView />
435. </template><template>
436.   <RouterView />
437. </template><template>
438.   <RouterView />
439. </template><template>
440.   <RouterView />
441. </template><template>
442.   <RouterView />
443. </template><template>
444.   <RouterView />
445. </template><template>
446.   <RouterView />
447. </template><template>
448.   <RouterView />
449. </template><template>
450.   <RouterView />
451. </template><template>
452.   <RouterView />
453. </template>Protocols apart from aengage models, pricing billing<template>
454.   <RouterView />
455. </template><template>
456.   <RouterView />
457. </template><template>
458.   <RouterView />
459. </template><template>
460.   <RouterView />
461. </template><template>
462.   <RouterView />
463. </template><template>
464.   <RouterView />
465. </template><template>
466.   <RouterView />
467. </template><template>
468.   <RouterView />
469. </template><template>
470.   <RouterView />
471. </template><template>
472.   <RouterView />
473. </template><template>
474.   <RouterView />
475. </template><template>
476.   <RouterView />
477. </template><template>
478.   <RouterView />
479. </template><template>
480.   <RouterView />
481. </template><template>
482.   <RouterView />
483. </template><template>
484.   <RouterView />
485. </template><template>
486.   <RouterView />
487. </template><template>
488.   <RouterView />
489. </template><template>
490.   <RouterView />
491. </template><template>
492.   <RouterView />
493. </template>

复制代码

效果如下：

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

UI图：

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

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

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

• template部分：
  

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template>

复制代码

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

• script部分：
  

1. [/code][size=3]7.2 布局代码[/size]
3. 代码：
4. [code]<template>
5.   <RouterView />
6. </template><template>
7.   <RouterView />
8. </template><template>
9.   <RouterView />
10. </template><template>
11.   <RouterView />
12. </template><template>
13.   <RouterView />
14. </template><template>
15.   <RouterView />
16. </template><template>
17.   <RouterView />
18. </template><template>
19.   <RouterView />
20. </template><template>
21.   <RouterView />
22. </template><template>
23.   <RouterView />
24. </template><template>
25.   <RouterView />
26. </template><template>
27.   <RouterView />
28. </template><template>
29.   <RouterView />
30. </template><template>
31.   <RouterView />
32. </template>[align=center] [/align]<template>
33.   <RouterView />
34. </template><template>
35.   <RouterView />
36. </template><template>
37.   <RouterView />
38. </template><template>
39.   <RouterView />
40. </template><template>
41.   <RouterView />
42. </template><template>
43.   <RouterView />
44. </template><template>
45.   <RouterView />
46. </template><template>
47.   <RouterView />
48. </template><template>
49.   <RouterView />
50. </template><template>
51.   <RouterView />
52. </template><template>
53.   <RouterView />
54. </template><template>
55.   <RouterView />
56. </template><template>
57.   <RouterView />
58. </template><template>
59.   <RouterView />
60. </template><template>
61.   <RouterView />
62. </template><template>
63.   <RouterView />
64. </template><template>
65.   <RouterView />
66. </template><template>
67.   <RouterView />
68. </template><template>
69.   <RouterView />
70. </template><template>
71.   <RouterView />
72. </template><template>
73.   <RouterView />
74. </template><template>
75.   <RouterView />
76. </template>Great Digital Product Agency since 2016<template>
77.   <RouterView />
78. </template><template>
79.   <RouterView />
80. </template><template>
81.   <RouterView />
82. </template><template>
83.   <RouterView />
84. </template><template>
85.   <RouterView />
86. </template><template>
87.   <RouterView />
88. </template> Our Business Plan is a written document describing a company's core business activites,<template>
89.   <RouterView />
90. </template><template>
91.   <RouterView />
92. </template><template>
93.   <RouterView />
94. </template><template>
95.   <RouterView />
96. </template><template>
97.   <RouterView />
98. </template><template>
99.   <RouterView />
100. </template><template>
101.   <RouterView />
102. </template><template>
103.   <RouterView />
104. </template>Objectives, and how it plans to achieve its goals. Our goal is to provide our client high quality<template>
105.   <RouterView />
106. </template><template>
107.   <RouterView />
108. </template><template>
109.   <RouterView />
110. </template><template>
111.   <RouterView />
112. </template><template>
113.   <RouterView />
114. </template><template>
115.   <RouterView />
116. </template><template>
117.   <RouterView />
118. </template><template>
119.   <RouterView />
120. </template>Product with modern idea accordingly their budgets and according thir reuirements.<template>
121.   <RouterView />
122. </template><template>
123.   <RouterView />
124. </template><template>
125.   <RouterView />
126. </template><template>
127.   <RouterView />
128. </template><template>
129.   <RouterView />
130. </template><template>
131.   <RouterView />
132. </template>

复制代码

效果：

8. 块4

UI图：

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

代码如下：

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template>What our happy client say<template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template>Several selected clients, who already believe in our service.<template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template><template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template><template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template><template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template><template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template>[align=center] [/align]<template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template><template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template><template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template><template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template><template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template><template>
106.   <RouterView />
107. </template><template>
108.   <RouterView />
109. </template><template>
110.   <RouterView />
111. </template><template>
112.   <RouterView />
113. </template><template>
114.   <RouterView />
115. </template><template>
116.   <RouterView />
117. </template><template>
118.   <RouterView />
119. </template><template>
120.   <RouterView />
121. </template>Matthew Paul<template>
122.   <RouterView />
123. </template><template>
124.   <RouterView />
125. </template><template>
126.   <RouterView />
127. </template><template>
128.   <RouterView />
129. </template><template>
130.   <RouterView />
131. </template><template>
132.   <RouterView />
133. </template><template>
134.   <RouterView />
135. </template><template>
136.   <RouterView />
137. </template>Perfect, very good job! Thank you for the amazing design and work. Really<template>
138.   <RouterView />
139. </template><template>
140.   <RouterView />
141. </template><template>
142.   <RouterView />
143. </template><template>
144.   <RouterView />
145. </template><template>
146.   <RouterView />
147. </template><template>
148.   <RouterView />
149. </template><template>
150.   <RouterView />
151. </template><template>
152.   <RouterView />
153. </template><template>
154.   <RouterView />
155. </template><template>
156.   <RouterView />
157. </template>impressed with the high quality and quick turnaround time. Highly recommend.<template>
158.   <RouterView />
159. </template><template>
160.   <RouterView />
161. </template><template>
162.   <RouterView />
163. </template><template>
164.   <RouterView />
165. </template><template>
166.   <RouterView />
167. </template><template>
168.   <RouterView />
169. </template><template>
170.   <RouterView />
171. </template><template>
172.   <RouterView />
173. </template><template>
174.   <RouterView />
175. </template><template>
176.   <RouterView />
177. </template><template>
178.   <RouterView />
179. </template><template>
180.   <RouterView />
181. </template><template>
182.   <RouterView />
183. </template><template>
184.   <RouterView />
185. </template><template>
186.   <RouterView />
187. </template><template>
188.   <RouterView />
189. </template><template>
190.   <RouterView />
191. </template><template>
192.   <RouterView />
193. </template><template>
194.   <RouterView />
195. </template><template>
196.   <RouterView />
197. </template><template>
198.   <RouterView />
199. </template><template>
200.   <RouterView />
201. </template><template>
202.   <RouterView />
203. </template><template>
204.   <RouterView />
205. </template><template>
206.   <RouterView />
207. </template><template>
208.   <RouterView />
209. </template><template>
210.   <RouterView />
211. </template><template>
212.   <RouterView />
213. </template><template>
214.   <RouterView />
215. </template><template>
216.   <RouterView />
217. </template><template>
218.   <RouterView />
219. </template><template>
220.   <RouterView />
221. </template><template>
222.   <RouterView />
223. </template><template>
224.   <RouterView />
225. </template><template>
226.   <RouterView />
227. </template><template>
228.   <RouterView />
229. </template><template>
230.   <RouterView />
231. </template><template>
232.   <RouterView />
233. </template><template>
234.   <RouterView />
235. </template><template>
236.   <RouterView />
237. </template><template>
238.   <RouterView />
239. </template><template>
240.   <RouterView />
241. </template><template>
242.   <RouterView />
243. </template><template>
244.   <RouterView />
245. </template><template>
246.   <RouterView />
247. </template><template>
248.   <RouterView />
249. </template><template>
250.   <RouterView />
251. </template><template>
252.   <RouterView />
253. </template><template>
254.   <RouterView />
255. </template><template>
256.   <RouterView />
257. </template><template>
258.   <RouterView />
259. </template><template>
260.   <RouterView />
261. </template><template>
262.   <RouterView />
263. </template><template>
264.   <RouterView />
265. </template><template>
266.   <RouterView />
267. </template><template>
268.   <RouterView />
269. </template><template>
270.   <RouterView />
271. </template><template>
272.   <RouterView />
273. </template><template>
274.   <RouterView />
275. </template><template>
276.   <RouterView />
277. </template><template>
278.   <RouterView />
279. </template><template>
280.   <RouterView />
281. </template><template>
282.   <RouterView />
283. </template><template>
284.   <RouterView />
285. </template><template>
286.   <RouterView />
287. </template><template>
288.   <RouterView />
289. </template><template>
290.   <RouterView />
291. </template><template>
292.   <RouterView />
293. </template><template>
294.   <RouterView />
295. </template><template>
296.   <RouterView />
297. </template><template>
298.   <RouterView />
299. </template><template>
300.   <RouterView />
301. </template><template>
302.   <RouterView />
303. </template><template>
304.   <RouterView />
305. </template><template>
306.   <RouterView />
307. </template><template>
308.   <RouterView />
309. </template><template>
310.   <RouterView />
311. </template><template>
312.   <RouterView />
313. </template><template>
314.   <RouterView />
315. </template><template>
316.   <RouterView />
317. </template><template>
318.   <RouterView />
319. </template><template>
320.   <RouterView />
321. </template><template>
322.   <RouterView />
323. </template><template>
324.   <RouterView />
325. </template><template>
326.   <RouterView />
327. </template><template>
328.   <RouterView />
329. </template><template>
330.   <RouterView />
331. </template><template>
332.   <RouterView />
333. </template><template>
334.   <RouterView />
335. </template><template>
336.   <RouterView />
337. </template><template>
338.   <RouterView />
339. </template><template>
340.   <RouterView />
341. </template><template>
342.   <RouterView />
343. </template><template>
344.   <RouterView />
345. </template><template>
346.   <RouterView />
347. </template><template>
348.   <RouterView />
349. </template>[align=center] [/align]<template>
350.   <RouterView />
351. </template><template>
352.   <RouterView />
353. </template><template>
354.   <RouterView />
355. </template><template>
356.   <RouterView />
357. </template><template>
358.   <RouterView />
359. </template><template>
360.   <RouterView />
361. </template><template>
362.   <RouterView />
363. </template><template>
364.   <RouterView />
365. </template>[align=center] [/align]<template>
366.   <RouterView />
367. </template><template>
368.   <RouterView />
369. </template><template>
370.   <RouterView />
371. </template><template>
372.   <RouterView />
373. </template><template>
374.   <RouterView />
375. </template><template>
376.   <RouterView />
377. </template><template>
378.   <RouterView />
379. </template><template>
380.   <RouterView />
381. </template>[align=center] [/align]<template>
382.   <RouterView />
383. </template><template>
384.   <RouterView />
385. </template><template>
386.   <RouterView />
387. </template><template>
388.   <RouterView />
389. </template><template>
390.   <RouterView />
391. </template><template>
392.   <RouterView />
393. </template><template>
394.   <RouterView />
395. </template><template>
396.   <RouterView />
397. </template>[align=center] [/align]<template>
398.   <RouterView />
399. </template><template>
400.   <RouterView />
401. </template><template>
402.   <RouterView />
403. </template><template>
404.   <RouterView />
405. </template><template>
406.   <RouterView />
407. </template><template>
408.   <RouterView />
409. </template><template>
410.   <RouterView />
411. </template><template>
412.   <RouterView />
413. </template>[align=center] [/align]<template>
414.   <RouterView />
415. </template><template>
416.   <RouterView />
417. </template><template>
418.   <RouterView />
419. </template><template>
420.   <RouterView />
421. </template><template>
422.   <RouterView />
423. </template><template>
424.   <RouterView />
425. </template><template>
426.   <RouterView />
427. </template><template>
428.   <RouterView />
429. </template>[align=center] [/align]<template>
430.   <RouterView />
431. </template><template>
432.   <RouterView />
433. </template><template>
434.   <RouterView />
435. </template><template>
436.   <RouterView />
437. </template><template>
438.   <RouterView />
439. </template><template>
440.   <RouterView />
441. </template><template>
442.   <RouterView />
443. </template><template>
444.   <RouterView />
445. </template><template>
446.   <RouterView />
447. </template><template>
448.   <RouterView />
449. </template><template>
450.   <RouterView />
451. </template><template>
452.   <RouterView />
453. </template>

复制代码

事实上，这里的图片和选项都写法，复用性很差，而且不好做动效。后面会使用v-for等方法进行修改。
效果如下（因为没有找到合适的图片，就随便拿了一张图片）：

9. 块5

UI如下图：

这一部分的布局和上面的有许多不同，有一部分的布局不能使用flex实现，得用相对和绝对位置relative、absolute来实现重叠，如图中的红色、右边的绿色部分。
具体代码如下：

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template><template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template><template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template><template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template><template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template>Subscribe Newsletter<template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template><template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template><template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template><template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template>I will update good news and promotion service not spam<template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template><template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template><template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template><template>
106.   <RouterView />
107. </template><template>
108.   <RouterView />
109. </template><template>
110.   <RouterView />
111. </template><template>
112.   <RouterView />
113. </template><template>
114.   <RouterView />
115. </template><template>
116.   <RouterView />
117. </template><template>
118.   <RouterView />
119. </template><template>
120.   <RouterView />
121. </template><template>
122.   <RouterView />
123. </template><template>
124.   <RouterView />
125. </template><template>
126.   <RouterView />
127. </template><template>
128.   <RouterView />
129. </template><template>
130.   <RouterView />
131. </template><template>
132.   <RouterView />
133. </template><template>
134.   <RouterView />
135. </template><template>
136.   <RouterView />
137. </template><template>
138.   <RouterView />
139. </template><template>
140.   <RouterView />
141. </template><template>
142.   <RouterView />
143. </template><template>
144.   <RouterView />
145. </template><template>
146.   <RouterView />
147. </template><template>
148.   <RouterView />
149. </template><template>
150.   <RouterView />
151. </template><template>
152.   <RouterView />
153. </template><template>
154.   <RouterView />
155. </template><template>
156.   <RouterView />
157. </template><template>
158.   <RouterView />
159. </template><template>
160.   <RouterView />
161. </template><template>
162.   <RouterView />
163. </template><template>
164.   <RouterView />
165. </template><template>
166.   <RouterView />
167. </template><template>
168.   <RouterView />
169. </template><template>
170.   <RouterView />
171. </template><template>
172.   <RouterView />
173. </template><template>
174.   <RouterView />
175. </template><template>
176.   <RouterView />
177. </template><template>
178.   <RouterView />
179. </template><template>
180.   <RouterView />
181. </template><template>
182.   <RouterView />
183. </template><template>
184.   <RouterView />
185. </template><template>
186.   <RouterView />
187. </template><template>
188.   <RouterView />
189. </template><template>
190.   <RouterView />
191. </template><template>
192.   <RouterView />
193. </template><template>
194.   <RouterView />
195. </template><template>
196.   <RouterView />
197. </template><template>
198.   <RouterView />
199. </template><template>
200.   <RouterView />
201. </template><template>
202.   <RouterView />
203. </template><template>
204.   <RouterView />
205. </template><template>
206.   <RouterView />
207. </template><template>
208.   <RouterView />
209. </template><template>
210.   <RouterView />
211. </template><template>
212.   <RouterView />
213. </template>Contact Now<template>
214.   <RouterView />
215. </template><template>
216.   <RouterView />
217. </template><template>
218.   <RouterView />
219. </template><template>
220.   <RouterView />
221. </template><template>
222.   <RouterView />
223. </template><template>
224.   <RouterView />
225. </template><template>
226.   <RouterView />
227. </template><template>
228.   <RouterView />
229. </template><template>
230.   <RouterView />
231. </template><template>
232.   <RouterView />
233. </template><template>
234.   <RouterView />
235. </template><template>
236.   <RouterView />
237. </template><template>
238.   <RouterView />
239. </template><template>
240.   <RouterView />
241. </template><template>
242.   <RouterView />
243. </template><template>
244.   <RouterView />
245. </template><template>
246.   <RouterView />
247. </template><template>
248.   <RouterView />
249. </template><template>
250.   <RouterView />
251. </template><template>
252.   <RouterView />
253. </template><template>
254.   <RouterView />
255. </template><template>
256.   <RouterView />
257. </template><template>
258.   <RouterView />
259. </template><template>
260.   <RouterView />
261. </template><template>
262.   <RouterView />
263. </template><template>
264.   <RouterView />
265. </template><template>
266.   <RouterView />
267. </template><template>
268.   <RouterView />
269. </template><template>
270.   <RouterView />
271. </template><template>
272.   <RouterView />
273. </template>

复制代码

效果如下：

10. 底部

UI如下：

布局比较简单，就不过多赘述。
代码如下：

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template>A+ Studio<template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template>Leading digital agency with solid design and development expertise. We build<template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template>readymade websites, mobile applications, and elaborate online business services.<template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template><template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template><template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template><template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template>[align=center] [/align]<template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template><template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template><template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template>[align=center] [/align]<template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template><template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template><template>
106.   <RouterView />
107. </template><template>
108.   <RouterView />
109. </template><template>
110.   <RouterView />
111. </template><template>
112.   <RouterView />
113. </template>[align=center] [/align]<template>
114.   <RouterView />
115. </template><template>
116.   <RouterView />
117. </template><template>
118.   <RouterView />
119. </template><template>
120.   <RouterView />
121. </template><template>
122.   <RouterView />
123. </template><template>
124.   <RouterView />
125. </template><template>
126.   <RouterView />
127. </template><template>
128.   <RouterView />
129. </template><template>
130.   <RouterView />
131. </template><template>
132.   <RouterView />
133. </template><template>
134.   <RouterView />
135. </template><template>
136.   <RouterView />
137. </template><template>
138.   <RouterView />
139. </template><template>
140.   <RouterView />
141. </template><template>
142.   <RouterView />
143. </template><template>
144.   <RouterView />
145. </template><template>
146.   <RouterView />
147. </template><template>
148.   <RouterView />
149. </template><template>
150.   <RouterView />
151. </template><template>
152.   <RouterView />
153. </template><template>
154.   <RouterView />
155. </template><template>
156.   <RouterView />
157. </template><template>
158.   <RouterView />
159. </template><template>
160.   <RouterView />
161. </template><template>
162.   <RouterView />
163. </template><template>
164.   <RouterView />
165. </template><template>
166.   <RouterView />
167. </template><template>
168.   <RouterView />
169. </template>What We Do<template>
170.   <RouterView />
171. </template><template>
172.   <RouterView />
173. </template><template>
174.   <RouterView />
175. </template><template>
176.   <RouterView />
177. </template><template>
178.   <RouterView />
179. </template><template>
180.   <RouterView />
181. </template><template>
182.   <RouterView />
183. </template><template>
184.   <RouterView />
185. </template><template>
186.   <RouterView />
187. </template><template>
188.   <RouterView />
189. </template><template>
190.   <RouterView />
191. </template><template>
192.   <RouterView />
193. </template><template>
194.   <RouterView />
195. </template><template>
196.   <RouterView />
197. </template><template>
198.   <RouterView />
199. </template><template>
200.   <RouterView />
201. </template><template>
202.   <RouterView />
203. </template><template>
204.   <RouterView />
205. </template>Web Design<template>
206.   <RouterView />
207. </template><template>
208.   <RouterView />
209. </template><template>
210.   <RouterView />
211. </template><template>
212.   <RouterView />
213. </template><template>
214.   <RouterView />
215. </template><template>
216.   <RouterView />
217. </template><template>
218.   <RouterView />
219. </template><template>
220.   <RouterView />
221. </template><template>
222.   <RouterView />
223. </template><template>
224.   <RouterView />
225. </template><template>
226.   <RouterView />
227. </template><template>
228.   <RouterView />
229. </template>
230. App Design<template>
231.   <RouterView />
232. </template><template>
233.   <RouterView />
234. </template><template>
235.   <RouterView />
236. </template><template>
237.   <RouterView />
238. </template><template>
239.   <RouterView />
240. </template><template>
241.   <RouterView />
242. </template><template>
243.   <RouterView />
244. </template><template>
245.   <RouterView />
246. </template><template>
247.   <RouterView />
248. </template><template>
249.   <RouterView />
250. </template><template>
251.   <RouterView />
252. </template><template>
253.   <RouterView />
254. </template>
255. Social Media Manage<template>
256.   <RouterView />
257. </template><template>
258.   <RouterView />
259. </template><template>
260.   <RouterView />
261. </template><template>
262.   <RouterView />
263. </template><template>
264.   <RouterView />
265. </template><template>
266.   <RouterView />
267. </template><template>
268.   <RouterView />
269. </template><template>
270.   <RouterView />
271. </template><template>
272.   <RouterView />
273. </template><template>
274.   <RouterView />
275. </template><template>
276.   <RouterView />
277. </template><template>
278.   <RouterView />
279. </template>
280. Market Analysis Project<template>
281.   <RouterView />
282. </template><template>
283.   <RouterView />
284. </template><template>
285.   <RouterView />
286. </template><template>
287.   <RouterView />
288. </template><template>
289.   <RouterView />
290. </template><template>
291.   <RouterView />
292. </template><template>
293.   <RouterView />
294. </template><template>
295.   <RouterView />
296. </template><template>
297.   <RouterView />
298. </template><template>
299.   <RouterView />
300. </template><template>
301.   <RouterView />
302. </template><template>
303.   <RouterView />
304. </template><template>
305.   <RouterView />
306. </template><template>
307.   <RouterView />
308. </template><template>
309.   <RouterView />
310. </template><template>
311.   <RouterView />
312. </template><template>
313.   <RouterView />
314. </template><template>
315.   <RouterView />
316. </template><template>
317.   <RouterView />
318. </template><template>
319.   <RouterView />
320. </template><template>
321.   <RouterView />
322. </template><template>
323.   <RouterView />
324. </template><template>
325.   <RouterView />
326. </template><template>
327.   <RouterView />
328. </template><template>
329.   <RouterView />
330. </template><template>
331.   <RouterView />
332. </template><template>
333.   <RouterView />
334. </template><template>
335.   <RouterView />
336. </template>Company<template>
337.   <RouterView />
338. </template><template>
339.   <RouterView />
340. </template><template>
341.   <RouterView />
342. </template><template>
343.   <RouterView />
344. </template><template>
345.   <RouterView />
346. </template><template>
347.   <RouterView />
348. </template><template>
349.   <RouterView />
350. </template><template>
351.   <RouterView />
352. </template><template>
353.   <RouterView />
354. </template><template>
355.   <RouterView />
356. </template><template>
357.   <RouterView />
358. </template><template>
359.   <RouterView />
360. </template><template>
361.   <RouterView />
362. </template><template>
363.   <RouterView />
364. </template><template>
365.   <RouterView />
366. </template><template>
367.   <RouterView />
368. </template><template>
369.   <RouterView />
370. </template><template>
371.   <RouterView />
372. </template>About Us<template>
373.   <RouterView />
374. </template><template>
375.   <RouterView />
376. </template><template>
377.   <RouterView />
378. </template><template>
379.   <RouterView />
380. </template><template>
381.   <RouterView />
382. </template><template>
383.   <RouterView />
384. </template><template>
385.   <RouterView />
386. </template><template>
387.   <RouterView />
388. </template><template>
389.   <RouterView />
390. </template><template>
391.   <RouterView />
392. </template><template>
393.   <RouterView />
394. </template><template>
395.   <RouterView />
396. </template>
397. Career<template>
398.   <RouterView />
399. </template><template>
400.   <RouterView />
401. </template><template>
402.   <RouterView />
403. </template><template>
404.   <RouterView />
405. </template><template>
406.   <RouterView />
407. </template><template>
408.   <RouterView />
409. </template><template>
410.   <RouterView />
411. </template><template>
412.   <RouterView />
413. </template><template>
414.   <RouterView />
415. </template><template>
416.   <RouterView />
417. </template><template>
418.   <RouterView />
419. </template><template>
420.   <RouterView />
421. </template>
422. Become Investor<template>
423.   <RouterView />
424. </template><template>
425.   <RouterView />
426. </template><template>
427.   <RouterView />
428. </template><template>
429.   <RouterView />
430. </template><template>
431.   <RouterView />
432. </template><template>
433.   <RouterView />
434. </template><template>
435.   <RouterView />
436. </template><template>
437.   <RouterView />
438. </template><template>
439.   <RouterView />
440. </template><template>
441.   <RouterView />
442. </template><template>
443.   <RouterView />
444. </template><template>
445.   <RouterView />
446. </template><template>
447.   <RouterView />
448. </template><template>
449.   <RouterView />
450. </template><template>
451.   <RouterView />
452. </template><template>
453.   <RouterView />
454. </template><template>
455.   <RouterView />
456. </template><template>
457.   <RouterView />
458. </template><template>
459.   <RouterView />
460. </template><template>
461.   <RouterView />
462. </template><template>
463.   <RouterView />
464. </template><template>
465.   <RouterView />
466. </template><template>
467.   <RouterView />
468. </template><template>
469.   <RouterView />
470. </template><template>
471.   <RouterView />
472. </template><template>
473.   <RouterView />
474. </template><template>
475.   <RouterView />
476. </template><template>
477.   <RouterView />
478. </template>Support<template>
479.   <RouterView />
480. </template><template>
481.   <RouterView />
482. </template><template>
483.   <RouterView />
484. </template><template>
485.   <RouterView />
486. </template><template>
487.   <RouterView />
488. </template><template>
489.   <RouterView />
490. </template><template>
491.   <RouterView />
492. </template><template>
493.   <RouterView />
494. </template><template>
495.   <RouterView />
496. </template><template>
497.   <RouterView />
498. </template><template>
499.   <RouterView />
500. </template><template>
501.   <RouterView />
502. </template><template>
503.   <RouterView />
504. </template><template>
505.   <RouterView />
506. </template><template>
507.   <RouterView />
508. </template><template>
509.   <RouterView />
510. </template><template>
511.   <RouterView />
512. </template><template>
513.   <RouterView />
514. </template>FAQ<template>
515.   <RouterView />
516. </template><template>
517.   <RouterView />
518. </template><template>
519.   <RouterView />
520. </template><template>
521.   <RouterView />
522. </template><template>
523.   <RouterView />
524. </template><template>
525.   <RouterView />
526. </template><template>
527.   <RouterView />
528. </template><template>
529.   <RouterView />
530. </template><template>
531.   <RouterView />
532. </template><template>
533.   <RouterView />
534. </template><template>
535.   <RouterView />
536. </template><template>
537.   <RouterView />
538. </template>
539. Policy<template>
540.   <RouterView />
541. </template><template>
542.   <RouterView />
543. </template><template>
544.   <RouterView />
545. </template><template>
546.   <RouterView />
547. </template><template>
548.   <RouterView />
549. </template><template>
550.   <RouterView />
551. </template><template>
552.   <RouterView />
553. </template><template>
554.   <RouterView />
555. </template><template>
556.   <RouterView />
557. </template><template>
558.   <RouterView />
559. </template><template>
560.   <RouterView />
561. </template><template>
562.   <RouterView />
563. </template>
564. Business<template>
565.   <RouterView />
566. </template><template>
567.   <RouterView />
568. </template><template>
569.   <RouterView />
570. </template><template>
571.   <RouterView />
572. </template><template>
573.   <RouterView />
574. </template><template>
575.   <RouterView />
576. </template><template>
577.   <RouterView />
578. </template><template>
579.   <RouterView />
580. </template><template>
581.   <RouterView />
582. </template><template>
583.   <RouterView />
584. </template><template>
585.   <RouterView />
586. </template><template>
587.   <RouterView />
588. </template><template>
589.   <RouterView />
590. </template><template>
591.   <RouterView />
592. </template><template>
593.   <RouterView />
594. </template><template>
595.   <RouterView />
596. </template><template>
597.   <RouterView />
598. </template><template>
599.   <RouterView />
600. </template><template>
601.   <RouterView />
602. </template><template>
603.   <RouterView />
604. </template><template>
605.   <RouterView />
606. </template><template>
607.   <RouterView />
608. </template><template>
609.   <RouterView />
610. </template><template>
611.   <RouterView />
612. </template><template>
613.   <RouterView />
614. </template><template>
615.   <RouterView />
616. </template><template>
617.   <RouterView />
618. </template><template>
619.   <RouterView />
620. </template>Contact<template>
621.   <RouterView />
622. </template><template>
623.   <RouterView />
624. </template><template>
625.   <RouterView />
626. </template><template>
627.   <RouterView />
628. </template><template>
629.   <RouterView />
630. </template><template>
631.   <RouterView />
632. </template><template>
633.   <RouterView />
634. </template><template>
635.   <RouterView />
636. </template><template>
637.   <RouterView />
638. </template><template>
639.   <RouterView />
640. </template><template>
641.   <RouterView />
642. </template><template>
643.   <RouterView />
644. </template><template>
645.   <RouterView />
646. </template><template>
647.   <RouterView />
648. </template><template>
649.   <RouterView />
650. </template><template>
651.   <RouterView />
652. </template><template>
653.   <RouterView />
654. </template><template>
655.   <RouterView />
656. </template>WhatsApp<template>
657.   <RouterView />
658. </template><template>
659.   <RouterView />
660. </template><template>
661.   <RouterView />
662. </template><template>
663.   <RouterView />
664. </template><template>
665.   <RouterView />
666. </template><template>
667.   <RouterView />
668. </template><template>
669.   <RouterView />
670. </template><template>
671.   <RouterView />
672. </template><template>
673.   <RouterView />
674. </template><template>
675.   <RouterView />
676. </template><template>
677.   <RouterView />
678. </template><template>
679.   <RouterView />
680. </template>
681. Support 24<template>
682.   <RouterView />
683. </template><template>
684.   <RouterView />
685. </template><template>
686.   <RouterView />
687. </template><template>
688.   <RouterView />
689. </template><template>
690.   <RouterView />
691. </template><template>
692.   <RouterView />
693. </template><template>
694.   <RouterView />
695. </template><template>
696.   <RouterView />
697. </template><template>
698.   <RouterView />
699. </template><template>
700.   <RouterView />
701. </template><template>
702.   <RouterView />
703. </template><template>
704.   <RouterView />
705. </template><template>
706.   <RouterView />
707. </template><template>
708.   <RouterView />
709. </template><template>
710.   <RouterView />
711. </template><template>
712.   <RouterView />
713. </template><template>
714.   <RouterView />
715. </template><template>
716.   <RouterView />
717. </template><template>
718.   <RouterView />
719. </template><template>
720.   <RouterView />
721. </template>

复制代码

效果：

11. 补充

11.1 矩形绘制

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

在right_part中加上两个div，并用相对位置和绝对位置固定。

1. // template<template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template>[align=center] [/align]//style.right_part {<template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template>min-width: 817px;<template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template>height: 100%;<template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template>overflow: auto;<template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template>position: relative;<template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template>/* background-color: red; */}.right_part img {<template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template>height: 512px;<template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template>width: 754px;<template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template>/* min-width: 754px; */<template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template>border-radius: 0px 0px 0px 200px;<template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template>position: absolute;<template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template>top: 0px;<template>
58.   <RouterView />
59. </template><template>
60.   <RouterView />
61. </template>right: 0px;<template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template>/* margin-left: 64.5px;<template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template>margin-bottom: 89px; */}.rectangle1{<template>
70.   <RouterView />
71. </template><template>
72.   <RouterView />
73. </template>position: absolute;<template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template>top: 0px;<template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template>left: 0px;<template>
82.   <RouterView />
83. </template><template>
84.   <RouterView />
85. </template>width: 129px;<template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template>height: 129px;<template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template>background: #DAE9FF;<template>
94.   <RouterView />
95. </template><template>
96.   <RouterView />
97. </template>border-radius: 500px 500px 500px 500px;}.rectangle2{<template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template>position: absolute;<template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template>bottom: 0px;<template>
106.   <RouterView />
107. </template><template>
108.   <RouterView />
109. </template>right: 120px;<template>
110.   <RouterView />
111. </template><template>
112.   <RouterView />
113. </template>width: 178px;<template>
114.   <RouterView />
115. </template><template>
116.   <RouterView />
117. </template>height: 178px;<template>
118.   <RouterView />
119. </template><template>
120.   <RouterView />
121. </template>background: #FFF5DB;<template>
122.   <RouterView />
123. </template><template>
124.   <RouterView />
125. </template>border-radius: 0px 0px 100px 0px;}

复制代码

11.2 获得m3u8链接

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

• 媒体处理MPS
  
• 对象存储
  

• 新建媒体Bucket
  

• 新建工作流
  

• 上传视频并发布
  

• 获取链接
  

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

11.3 限制最大宽度

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

1. max-width: 1440px;
2. /* 设置最大宽度 */
3. margin-left: auto;
4. /* 左侧自动填充 */
5. margin-right: auto;
6. /* 右侧自动填充 */

复制代码

效果如下：

11.4 打开页面默认在顶部

视频播放器有一个bug：在一开始打开页面的时候，会开始缓冲，缓冲时默认把页面滚动到播放器所在的位置。
但是我们想要打开时默认在顶部。
试过使用mounted钩子函数强制滚动到顶部，但是缓冲在后，结果是不生效。
认真查看了视频播放器的文档后，发现通过绑定事件，在缓冲开始时滚动到顶部，可以曲线救国。

1. const onloadstart = (ev) => {<template>
2.   <RouterView />
3. </template>console.log("开始缓冲");<template>
4.   <RouterView />
5. </template>window.scroll(0, 0);};

复制代码

五、修改内容

1. 网页内的内容

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

2. 网页标题与图标

• 将我们想用的图标替换掉public/favicon.ico
  
• 修改根目录下的index.html文件：
  

1. <template>
2.   <RouterView />
3. </template><template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template> 试卷簿——专注高效的学习帮手<template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template><template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template>

复制代码

• 刷新即可看到修改成功。
  

六、动态部分

1. 顶部栏

1.1 固定在顶部

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

• home.vue文件中设置布局
  

1. [/code][list=1]
2. [*]TopBar.vue更改css
3. [/list][code].bar {<template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template>display: flex;<template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template>justify-content: space-between;<template>
12.   <RouterView />
13. </template>        /* margin要改成padding */<template>
14.   <RouterView />
15. </template><template>
16.   <RouterView />
17. </template>padding-top: 42px;<template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template>padding-left: 120px;<template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template> padding-right: 120px;<template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template>padding-bottom: 10px;<template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template>box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 加上底部阴影好看一些*/<template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template>/* margin-top: 42px;<template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template>margin-left: 120px;<template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template>margin-right: 120px; */}

复制代码

1.2 点击跳转指定位置

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

• 定义函数
  

1. [/code][list=1]
2. [*]给标签绑定函数
3. [/list][code]<template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template><template>
12.   <RouterView />
13. </template><template>
14.   <RouterView />
15. </template>试卷簿<template>
16.   <RouterView />
17. </template><template>
18.   <RouterView />
19. </template><template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template><template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template>首页<template>
36.   <RouterView />
37. </template><template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template>支持平台<template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template><template>
54.   <RouterView />
55. </template><template>
56.   <RouterView />
57. </template><template>
58.   <RouterView />
59. </template>特色与优势<template>
60.   <RouterView />
61. </template><template>
62.   <RouterView />
63. </template><template>
64.   <RouterView />
65. </template><template>
66.   <RouterView />
67. </template><template>
68.   <RouterView />
69. </template><template>
70.   <RouterView />
71. </template>APP演示<template>
72.   <RouterView />
73. </template><template>
74.   <RouterView />
75. </template><template>
76.   <RouterView />
77. </template><template>
78.   <RouterView />
79. </template><template>
80.   <RouterView />
81. </template><template>
82.   <RouterView />
83. </template>团队介绍<template>
84.   <RouterView />
85. </template><template>
86.   <RouterView />
87. </template><template>
88.   <RouterView />
89. </template><template>
90.   <RouterView />
91. </template><template>
92.   <RouterView />
93. </template><template>
94.   <RouterView />
95. </template>订阅我们<template>
96.   <RouterView />
97. </template><template>
98.   <RouterView />
99. </template><template>
100.   <RouterView />
101. </template><template>
102.   <RouterView />
103. </template><template>
104.   <RouterView />
105. </template><template>
106.   <RouterView />
107. </template>

复制代码

2. 两个按钮

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

3. 成员介绍

成员介绍部分，需要做到可以点击下面的选择按钮，切换到对应的成员信息去。
template部分：

1. <template>
2.   <RouterView />
3. </template>[align=center][img]https://www.33rz.com/selectedMember.avatar[/img][/align]<template>
4.   <RouterView />
5. </template><template>
6.   <RouterView />
7. </template><template>
8.   <RouterView />
9. </template><template>
10.   <RouterView />
11. </template>{{ selectedMember.name }}
12. <template>
13.   <RouterView />
14. </template><template>
15.   <RouterView />
16. </template><template>
17.   <RouterView />
18. </template>{{ selectedMember.description }}
19. <template>
20.   <RouterView />
21. </template><template>
22.   <RouterView />
23. </template><template>
24.   <RouterView />
25. </template><template>
26.   <RouterView />
27. </template><template>
28.   <RouterView />
29. </template><template>
30.   <RouterView />
31. </template><template>
32.   <RouterView />
33. </template><template>
34.   <RouterView />
35. </template><template>
36.   <RouterView />
37. </template><template>
38.   <RouterView />
39. </template><template>
40.   <RouterView />
41. </template><template>
42.   <RouterView />
43. </template><template>
44.   <RouterView />
45. </template><template>
46.   <RouterView />
47. </template><template>
48.   <RouterView />
49. </template><template>
50.   <RouterView />
51. </template><template>
52.   <RouterView />
53. </template>

复制代码

script部分：

1. [/code][size=5]七、部署到github上[/size]
3. 以上，web页面基本完成，接下来就是将其部署到GitHub上。
4. 参考教程：参考
5. [list=1]
6. [*]先新建一个github仓库，具体怎么操作就不详细讲。
7. [*]将代码上传到仓库中。
8. [*]修改配置文件
9. [/list]打开项目中的[b]vite.config.js[/b]，找到下面代码块，更改为对应的 github 仓库名称
10. [code]export default defineConfig({<template>
11.   <RouterView />
12. </template><template>
13.   <RouterView />
14. </template>base: '/your_repositories_name/', // github仓库名称<template>
15.   <RouterView />
16. </template><template>
17.   <RouterView />
18. </template>plugins: [],})

复制代码

• 编译vue代码
  

1. npm run build

复制代码

• 将编译后的代码上传到仓库中
  

先要在.gitignore文件中将dist文件夹的忽略给注释掉。

然后用git将该文件夹上传到指定分支。

1. git add dist
2. git commit -m "Your commit message"
3. git subtree split --prefix dist -b dist-branch
4. git push your_repositories_name dist-branch:gh-pages # 这里要改成具体的仓库名
5. git branch -d dist-branch

复制代码

最后在仓库的设置中打开github page即可。

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