Vue3简单项目流程分享——工作室主页 零、写在最前 以下是项目相关的一些链接： 源代码GitHub仓库（需要魔法上网）：仓库 网页示例（需要魔法上网）：网页示例 UI图（来源@设计师杨贺）：MasterGo主页 补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。 如果你
以下是项目相关的一些链接：
补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。
如果你想要运行源代码：
cd your_path
git clone https://github.com/YellowSeaa/studio_page.git
npm install
npm run dev
课程作业要求要使用HTML+CSS+JSP技术，在网上了解到JSP内可以套用Vue（相当于用Vue写模板，然后外面套一层JSP模板即可）。
最终决定使用Vue来实现前端，并且使用element Plus脚手架，后端部分尝试使用JSP（没学过，不知道能不能弄的下来），如果实在不行就用Django做前后端分离开发。
数据库方面的话，就用Mysql或者sqlite3。
由于之前已经安装过Vue，所以不记录了。
JSP和Tomcat参考的是下面几篇文章，直接使用homebrew安装的：
值得注意的是以下启动 Tomcat方法
brew services start tomcat
如果终端提示
Successfully started 'tomcat' (label: homebrew.mxcl.tomcat)
则说明启动成功，浏览器访问
http://localhost:8080
即可看到 Tomcat 的页面。
使用终端，进入想创建的文件夹位置，然后运行以下命令
npm create vue@latest
然后会让我输入项目名称和进行一些选项，在此我只选择了 引入 Vue Router 进行单页面应用开发 ，其他选项均选择了否。
最后根据提示进入项目文件夹内，安装依赖并运行即可。
cd
npm install #安装依赖
npm run dev #运行项目
在浏览器中打开对应网址即可
本项目是简单的项目，只有一个主页面，页面内由上到下排布多个块。
我们只需要修改
src/App.vue
和
src/router/index.js
中的内容，将一开始的页面指向自定义的文件
src/components/home.vue
即可，以下是具体内容：
// index.js
import { createRouter, createWebHistory } from 'vue-router'
import home from '../components/home.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: home
},
]
})
export default router
This is home
根据UI图可以看出，主页是由多个部分组成，由上到下排布。
本项目中将每个部分分别写成一个组件文件，然后在
home.vue
中集成。
home.vue
只需要关注组件部分间的排版即可。
先分别创建好各个组件对应的文件：
然后修改
home.vue
最终得到效果如下：
接下来只需要在对应的组件文件中，完成前端的绘制即可。
首先看一下UI图，布局如下：
使用flex布局，红色部分使用
space-between
：两端对齐，项目之间的间隔都相等；蓝色部分使用
space-around
：每个项目两侧的间隔相等。
代码如下：
最终效果：
后续还需要做：
点击标签滚动到对应位置： 参考文章
UI图：
其中红色部分使用flex分为左右两部分，左边使用flex分为上下三部分，右边则是一张图。
代码如下：
A Digital Product Agency
Leading digital agency with solid design and development expertise. We build readymade
websites, mobile applications, and elaborate online business services.
最终效果：
接下来是下面的五个块中的第一个。UI图如下：
布局如图所示。
代码如下：
Our Client
Several selected clients, who already believe in our service.
效果如下：
UI图如下：
布局有点复杂，其中两个蓝色部分通过调整不同的margin-top来实现错位的效果。
背景的几个矩形不太好直接通过代码绘制，直接导出一张图片放在容器背景中。
代码如下：
How can we help your Business ?
We build readymade websites, mobile applications, and elaborate online business services.
Business Idea Planning
We present you a proposal and discuss niffty-gritty like
Financial Planning System
Protocols apart from aengage models, pricing billing
Development Website and App
Communication protocols apart from engagement models
Market Analysis Project
Protocols apart from aengage models, pricing billing
效果如下：
实践中发现，使用背景图片来实现那些矩形，有点难以控制，效果不佳。最终我简化了一些元素，勉强能看。
如果要达到最好的效果，还是得通过代码实现矩形的绘制。
UI图：
这里的布局比较简单，就不过多赘述了。
比较特别的是此处使用了一个视频播放器，
但是目前暂时没有实现，出现了一些bug：第三方的播放器插件安装后import显示找不到，传统的video播放不了……
先使用img代替，后续再修这个bug。
选用
vue3VideoPlay
这个插件，值得注意的是，这个插件有一个问题，其默认package.json中有一个路径是错的，要改写成下面这个：
另外，该插件官方的文档也有点问题，mp4文件不知道为什么播放不了，本地文件也播放不了……
经过测试，网络m3u8文件可以播放，所以下面使用此格式进行播放。（如何获得m3u8链接，写在了补充部分）
代码：
https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg" :src="options.src"
:type="options.type" :autoPlay="false" />
此处值得注意的部分是，播放器的长和宽得像代码的写法才有效，写成css无效，另外，圆角也只能通过设置父容器
overflow: hidden;
实现。
poster
部分是封面。
代码：
Great Digital Product Agency since 2016
Our Business Plan is a written document describing a company's core business activites,
Objectives, and how it plans to achieve its goals. Our goal is to provide our client high quality
Product with modern idea accordingly their budgets and according thir reuirements.
效果：
UI图：
这张图是有动效的，中间的蓝色圆圈可以选择不同的人物介绍。
在此先做好静态的外观，动效后面再补全。
代码如下：
What our happy client say
Several selected clients, who already believe in our service.
Matthew Paul
Perfect, very good job! Thank you for the amazing design and work. Really
impressed with the high quality and quick turnaround time. Highly recommend.
事实上，这里的图片和选项都写法，复用性很差，而且不好做动效。后面会使用v-for等方法进行修改。
效果如下（因为没有找到合适的图片，就随便拿了一张图片）：
UI如下图：
这一部分的布局和上面的有许多不同，有一部分的布局不能使用flex实现，得用相对和绝对位置
relative
、
absolute
来实现重叠，如图中的红色、右边的绿色部分。
具体代码如下：
Subscribe Newsletter
I will update good news and promotion service not spam
效果如下：
UI如下：
布局比较简单，就不过多赘述。
代码如下：
A+ Studio
Leading digital agency with solid design and development expertise. We build
readymade websites, mobile applications, and elaborate online business services.
What We Do
Web Design
App Design
Social Media Manage
Market Analysis Project
Company
About Us
Career
Become Investor
Support
FAQ
Policy
Business
Contact
WhatsApp
Support 24
效果：
前面写静态页的时候，有一部分背景图形是直接使用图片，但是拉伸效果不好，所以补充使用div来画矩形，以适应不同宽度的浏览器。
首先是headline的这两个矩形：
在right_part中加上两个div，并用相对位置和绝对位置固定。
// template
//style
.right_part {
min-width: 817px;
height: 100%;
overflow: auto;
position: relative;
/* background-color: red; */
}
.right_part img {
height: 512px;
width: 754px;
/* min-width: 754px; */
border-radius: 0px 0px 0px 200px;
position: absolute;
top: 0px;
right: 0px;
/* margin-left: 64.5px;
margin-bottom: 89px; */
}
.rectangle1{
position: absolute;
top: 0px;
left: 0px;
width: 129px;
height: 129px;
background: #DAE9FF;
border-radius: 500px 500px 500px 500px;
}
.rectangle2{
position: absolute;
bottom: 0px;
right: 120px;
width: 178px;
height: 178px;
background: #FFF5DB;
border-radius: 0px 0px 100px 0px;
}
上面提到过，那个视频播放插件无法播放本地视频，所以需要将视频上传到网络上，通过网络链接获取。
在此使用阿里云的媒体处理MPS和对象存储OSS实现。
媒体处理MPS
对象存储
之前在布局时，多使用flex布局，可以根据浏览器宽度自适应布局，在一定的宽度限制内效果还不错，但是如果宽度太大，会导致左右两边的组件之间有一个巨大的空白，很难看，所以需要限制一个最大的宽度，当超出这个宽度时，在两边使用空白填充。
只需要在
home.vue
的
style
部分添加下面代码。
max-width: 1440px;
/* 设置最大宽度 */
margin-left: auto;
/* 左侧自动填充 */
margin-right: auto;
/* 右侧自动填充 */
效果如下：
视频播放器有一个bug：在一开始打开页面的时候，会开始缓冲，缓冲时默认把页面滚动到播放器所在的位置。
但是我们想要打开时默认在顶部。
试过使用
mounted
钩子函数强制滚动到顶部，但是缓冲在后，结果是不生效。
认真查看了视频播放器的文档后，发现通过绑定事件，在缓冲开始时滚动到顶部，可以曲线救国。
const onloadstart = (ev) => {
console.log("开始缓冲");
window.scroll(0, 0);
};
以上，前端静态部分的所有布局都画好了，接下来要根据实际情况将内容修改成我们自己的。
在这里，我想要做的是我们开发的一款app的介绍，所以将页面改成了以下。（由于只需要修改内容，所以代码就不展示了）
将我们想用的图标替换掉
public/favicon.ico
修改根目录下的
index.html
文件：
锟皆撅拷锟斤拷锟斤拷锟斤拷专注锟斤拷效锟斤拷学习锟斤拷锟斤拷
锟斤拷锟斤拷细锟斤拷喜锟斤拷锟斤拷嵌锟教拷锟斤拷郑锟斤拷锟斤拷锟街憋拷锟酵拷锟絚ss锟斤拷锟斤拷锟斤拷锟斤拷实锟街ｏ拷只锟斤拷锟斤拷锟斤拷前锟斤拷锟斤拷锟斤拷锟斤拷锟剿ｏ拷锟斤拷锟节此诧拷锟斤拷锟较★拷
home.vue
锟侥硷拷锟斤拷锟斤拷锟矫诧拷锟斤拷
TopBar.vue
锟斤拷锟斤拷css
.bar {
display: flex;
justify-content: space-between;
/* margin要锟侥筹拷padding */
padding-top: 42px;
padding-left: 120px;
padding-right: 120px;
padding-bottom: 10px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 锟斤拷锟较底诧拷锟斤拷影锟矫匡拷一些*/
/* margin-top: 42px;
margin-left: 120px;
margin-right: 120px; */
}
锟斤拷锟节革拷锟斤拷锟斤拷锟斤拷母叨锟斤拷枪潭锟斤拷锟斤拷锟侥ｏ拷锟斤拷锟斤拷直锟斤拷使锟斤拷
document.documentElement.scrollTop
锟斤拷锟斤拷实锟街★拷
锟斤拷锟斤拷锟斤拷锟斤拷钮锟斤拷锟斤拷锟斤拷锟斤拷锟铰斤拷锟斤拷锟斤拷钮只锟斤拷要锟斤拷一锟斤拷锟斤拷锟斤拷锟斤拷锟接硷拷锟缴ｏ拷锟斤拷锟斤拷锟斤拷锟接匡拷锟斤拷使锟矫帮拷锟斤拷锟斤拷oss锟斤拷锟斤拷取锟斤拷锟斤拷锟藉方锟斤拷锟斤拷之前锟斤拷频m3u8锟斤拷锟接伙拷取锟筋不锟洁，锟酵诧拷锟斤拷锟斤拷赘锟斤拷锟斤拷
锟斤拷锟结交锟斤拷锟斤拷钮锟斤拷要锟斤拷一锟斤拷锟斤拷锟捷匡拷锟斤拷锟斤拷慕涌冢锟斤拷锟斤拷锟斤拷锟斤拷锟叫碉拷锟斤拷锟捷硷拷锟诫到锟斤拷锟捷匡拷锟叫★拷
锟斤拷锟斤拷目前没锟叫匡拷锟斤拷锟斤拷锟截的讹拷锟斤拷锟斤拷锟斤拷锟捷匡拷锟斤拷锟斤拷慕涌冢锟斤拷锟斤拷跃图虻グ锟斤拷锟揭伙拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟较拷颉４锟斤拷锟酵诧拷展示锟剿★拷
锟斤拷员锟斤拷锟杰诧拷锟街ｏ拷锟斤拷要锟斤拷锟斤拷锟斤拷锟皆碉拷锟斤拷锟斤拷锟斤拷选锟斤拷钮锟斤拷锟叫伙拷锟斤拷锟斤拷应锟侥筹拷员锟斤拷息去锟斤拷
template
锟斤拷锟街ｏ拷
![Vue3简单项目流程分享——工作室主页]()
{{ selectedMember.name }}
{{ selectedMember.description }}
script
锟斤拷锟街ｏ拷
锟斤拷锟较ｏ拷web页锟斤拷锟斤拷锟斤拷锟缴ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷锟角斤拷锟戒部锟斤拷GitHub锟较★拷
锟轿匡拷锟教程ｏ拷 锟轿匡拷
锟斤拷锟斤拷目锟叫碉拷 vite.config.js 锟斤拷锟揭碉拷锟斤拷锟斤拷锟斤拷锟介，锟斤拷锟斤拷为锟斤拷应锟斤拷 github 锟街匡拷锟斤拷锟斤拷
export default defineConfig({
base: '/your_repositories_name/', // github锟街匡拷锟斤拷锟斤拷
plugins: [],
})
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锟斤拷锟缴★拷
Win11锟绞记憋拷锟斤拷锟皆讹拷锟斤拷锟斤拷应锟矫碉拷锟斤拷色锟斤拷锟斤拷示锟斤拷锟斤拷
锟侥讹拷AI之锟矫ｏ拷锟斤拷锟节达拷模锟酵碉拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷
锟侥讹拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷璞革拷墓锟斤拷锟斤拷锟斤拷锟脚碉拷锟斤拷锟斤拷
锟侥讹拷GitHub锟斤拷锟脚匡拷源锟斤拷目锟斤拷HelloGitHub锟斤拷锟斤拷
锟侥讹拷锟斤拷锟斤拷锟斤拷锟斤拷锟紿adoop锟斤拷IntelliJ IDEA远锟斤拷锟斤拷锟接凤拷锟斤拷锟斤拷锟斤拷Hadoop锟斤拷锟斤拷WordCount
锟侥讹拷Uno Platform锟斤拷锟斤拷平台锟斤拷锟斤拷锟斤拷芙锟斤拷锟�
锟侥讹拷Manim锟叫碉拷Cone锟洁：锟斤拷锟斤拷锟酵操匡拷锥锟轿硷拷锟轿讹拷锟斤拷
锟侥讹拷Java锟斤拷昕斤拷锟�13锟斤拷为什么锟斤拷锟姐都锟斤拷锟斤拷些锟斤拷
锟侥讹拷MethodTimer锟斤拷一锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷.NET锟斤拷锟叫猴拷时统锟狡匡拷
锟侥讹拷探锟斤拷Avalonia锟斤拷锟斤拷肟达拷丶锟斤拷锟斤拷锟斤拷锟斤拷
锟侥讹拷园锟接伙拷员锟斤拷锟斤拷锟斤拷锟斤拷为锟狡凤拷锟斤拷锟斤拷一锟斤拷锟斤拷锟斤拷锟饺�
锟侥讹拷锟斤拷锟斤拷锟剿癸拷锟斤拷锟斤拷模锟酵伙拷锟斤拷锟斤拷TFDS锟斤拷Keras锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷
锟侥讹拷
锟斤拷锟节猴拷锟斤拷锟斤拷锟斤拷系锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟�锟斤拷锟斤拷站锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟狡硷拷锟斤拷锟斤拷
频锟斤拷 锟斤拷锟斤拷频锟斤拷锟斤拷锟斤拷锟斤拷专锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷卓锟斤拷锟斤拷锟�锟斤拷app锟斤拷锟斤拷
锟狡硷拷 锟斤拷原锟斤拷锟斤拷锟斤拷锟斤拷锟铰帮拷锟斤拷锟斤拷锟斤拷锟杰匡拷锟斤拷锟斤拷锟截诧拷锟斤拷
锟斤拷锟斤拷 锟斤拷锟斤拷色锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷 锟斤拷锟斤拷锟�锟斤拷锟斤拷战锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷
扫锟斤拷维锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟街伙拷锟芥本锟斤拷
扫锟斤拷维锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟脚癸拷锟节号ｏ拷
锟斤拷站锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟较达拷锟斤拷锟斤拷锟斤拷锟街凤拷锟斤拷陌锟饺拷锟斤拷敕拷始锟�[email protected]
锟斤拷ICP锟斤拷2022002427锟斤拷-10 锟芥公锟斤拷锟斤拷锟斤拷锟斤拷43070202000427锟斤拷© 2013~2024 haote.com 锟斤拷锟斤拷锟斤拷
