 首页 > 教程 > Vue3简单项目流程分享——工作室主页

创世纪.神 V1.0 安卓版

幽游白书武术会 v1.0.0 安卓版

阴阳师妖怪屋 V1.1.0 安卓版

怒剑传说 V1.0 安卓版

远征2最新版 V1.0.1 安卓版

顽石英雄 V1.0.1 安卓版

迷你装甲 V1.1.0 安卓版

魔法学徒的一天游戏 V1.0 安卓版

白蛇仙劫 V1.0.1 安卓版

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

时间：2024-06-03　|　来源：　|　阅读：77

话题： v 项目 VUE 主页工作 E3

Vue3简单项目流程分享——工作室主页零、写在最前以下是项目相关的一些链接：源代码GitHub仓库（需要魔法上网）：仓库网页示例（需要魔法上网）：网页示例 UI图（来源@设计师杨贺）：MasterGo主页补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。如果你

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

一、想法

作业要求

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

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

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

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 进行单页面应用开发 ，其他选项均选择了否。

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

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

cd 
npm install #安装依赖
npm run dev #运行项目

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

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

四、前端静态部分

1. 路由设置

本项目是简单的项目，只有一个主页面，页面内由上到下排布多个块。

我们只需要修改 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

2. 主页的排版

根据UI图可以看出，主页是由多个部分组成，由上到下排布。

本项目中将每个部分分别写成一个组件文件，然后在 home.vue 中集成。

home.vue 只需要关注组件部分间的排版即可。

先分别创建好各个组件对应的文件：

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

然后修改 home.vue

最终得到效果如下：

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

接下来只需要在对应的组件文件中，完成前端的绘制即可。

3. 顶部菜单栏

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

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

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

代码如下：

最终效果：

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

后续还需要做：

点击标签滚动到对应位置：参考文章

4. 头条部分

UI图：

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

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

代码如下：

最终效果：

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

5. 块1

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

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

布局如图所示。

代码如下：

效果如下：

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

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

6. 块2

UI图如下：

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

布局有点复杂，其中两个蓝色部分通过调整不同的margin-top来实现错位的效果。

背景的几个矩形不太好直接通过代码绘制，直接导出一张图片放在容器背景中。

代码如下：

效果如下：

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

实践中发现，使用背景图片来实现那些矩形，有点难以控制，效果不佳。最终我简化了一些元素，勉强能看。

如果要达到最好的效果，还是得通过代码实现矩形的绘制。

7. 块3

UI图：

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

这里的布局比较简单，就不过多赘述了。

7.1 视频播放器

比较特别的是此处使用了一个视频播放器， ~~但是目前暂时没有实现，出现了一些bug：第三方的播放器插件安装后import显示找不到，传统的video播放不了……~~

~~先使用img代替，后续再修这个bug。~~

选用 vue3VideoPlay 这个插件，值得注意的是，这个插件有一个问题，其默认package.json中有一个路径是错的，要改写成下面这个：

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

另外，该插件官方的文档也有点问题，mp4文件不知道为什么播放不了，本地文件也播放不了……

经过测试，网络m3u8文件可以播放，所以下面使用此格式进行播放。（如何获得m3u8链接，写在了补充部分）

代码：

template部分：


    
    https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg" :src="options.src"
        :type="options.type" :autoPlay="false" />

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

poster 部分是封面。

script部分：

7.2 布局代码

代码：

效果：

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

8. 块4

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

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

8.1 静态布局

代码如下：

事实上，这里的图片和选项都写法，复用性很差，而且不好做动效。后面会使用v-for等方法进行修改。

效果如下（因为没有找到合适的图片，就随便拿了一张图片）：

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

9. 块5

UI如下图：

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

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

具体代码如下：

效果如下：

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

10. 底部

UI如下：

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

布局比较简单，就不过多赘述。

代码如下：

效果：

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

11. 补充

11.1 矩形绘制

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

首先是headline的这两个矩形：

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

在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;
}

11.2 获得m3u8链接

上面提到过，那个视频播放插件无法播放本地视频，所以需要将视频上传到网络上，通过网络链接获取。

在此使用阿里云的媒体处理MPS和对象存储OSS实现。

媒体处理MPS
对象存储

新建媒体Bucket

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

新建工作流

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

上传视频并发布

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

获取链接

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

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

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

11.3 限制最大宽度

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

只需要在 home.vue 的 style 部分添加下面代码。

max-width: 1440px;
/* 设置最大宽度 */
margin-left: auto;
/* 左侧自动填充 */
margin-right: auto;
/* 右侧自动填充 */

效果如下：

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

11.4 打开页面默认在顶部

视频播放器有一个bug：在一开始打开页面的时候，会开始缓冲，缓冲时默认把页面滚动到播放器所在的位置。

但是我们想要打开时默认在顶部。

试过使用 mounted 钩子函数强制滚动到顶部，但是缓冲在后，结果是不生效。

认真查看了视频播放器的文档后，发现通过绑定事件，在缓冲开始时滚动到顶部，可以曲线救国。

const onloadstart = (ev) => {
  console.log("开始缓冲");
  window.scroll(0, 0);
};

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

五、修改内容

1. 网页内的内容

以上，前端静态部分的所有布局都画好了，接下来要根据实际情况将内容修改成我们自己的。

在这里，我想要做的是我们开发的一款app的介绍，所以将页面改成了以下。（由于只需要修改内容，所以代码就不展示了）

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

2. 网页标题与图标

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



  
    
     
    
    锟皆撅拷锟斤拷锟斤拷锟斤拷专注锟斤拷效锟斤拷学习锟斤拷锟斤拷

刷锟铰硷拷锟缴匡拷锟斤拷锟睫改成癸拷锟斤拷

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

锟斤拷锟斤拷锟斤拷态锟斤拷锟斤拷

1. 锟斤拷锟斤拷锟斤拷

1.1 锟教讹拷锟节讹拷锟斤拷

锟斤拷锟斤拷细锟斤拷喜锟斤拷锟斤拷嵌锟教拷锟斤拷郑锟斤拷锟斤拷锟街憋拷锟酵拷锟絚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; */
}

1.2 锟斤拷锟斤拷锟阶革拷锟轿伙拷锟�

锟斤拷锟节革拷锟斤拷锟斤拷锟斤拷母叨锟斤拷枪潭锟斤拷锟斤拷锟侥ｏ拷锟斤拷锟斤拷直锟斤拷使锟斤拷 document.documentElement.scrollTop 锟斤拷锟斤拷实锟街★拷

锟斤拷锟藉函锟斤拷

锟斤拷锟斤拷签锟襟定猴拷锟斤拷

2. 锟斤拷锟斤拷锟斤拷钮

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

锟斤拷锟斤拷锟斤拷锟斤拷钮锟斤拷锟斤拷锟斤拷锟斤拷锟铰斤拷锟斤拷锟斤拷钮只锟斤拷要锟斤拷一锟斤拷锟斤拷锟斤拷锟斤拷锟接硷拷锟缴ｏ拷锟斤拷锟斤拷锟斤拷锟接匡拷锟斤拷使锟矫帮拷锟斤拷锟斤拷oss锟斤拷锟斤拷取锟斤拷锟斤拷锟藉方锟斤拷锟斤拷之前锟斤拷频m3u8锟斤拷锟接伙拷取锟筋不锟洁，锟酵诧拷锟斤拷锟斤拷赘锟斤拷锟斤拷

锟斤拷锟结交锟斤拷锟斤拷钮锟斤拷要锟斤拷一锟斤拷锟斤拷锟捷匡拷锟斤拷锟斤拷慕涌冢锟斤拷锟斤拷锟斤拷锟斤拷锟叫碉拷锟斤拷锟捷硷拷锟诫到锟斤拷锟捷匡拷锟叫★拷

锟斤拷锟斤拷目前没锟叫匡拷锟斤拷锟斤拷锟截的讹拷锟斤拷锟斤拷锟斤拷锟捷匡拷锟斤拷锟斤拷慕涌冢锟斤拷锟斤拷跃图虻グ锟斤拷锟揭伙拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟较拷颉４锟斤拷锟酵诧拷展示锟剿★拷

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

3. 锟斤拷员锟斤拷锟斤拷

锟斤拷员锟斤拷锟杰诧拷锟街ｏ拷锟斤拷要锟斤拷锟斤拷锟斤拷锟皆碉拷锟斤拷锟斤拷锟斤拷选锟斤拷钮锟斤拷锟叫伙拷锟斤拷锟斤拷应锟侥筹拷员锟斤拷息去锟斤拷

template 锟斤拷锟街ｏ拷


  
  
      {{ selectedMember.name }}
      {{ selectedMember.description }}

script 锟斤拷锟街ｏ拷

锟竭★拷锟斤拷锟斤拷github锟斤拷

锟斤拷锟较ｏ拷web页锟斤拷锟斤拷锟斤拷锟缴ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷锟角斤拷锟戒部锟斤拷GitHub锟较★拷

锟轿匡拷锟教程ｏ拷锟轿匡拷

锟斤拷锟铰斤拷一锟斤拷github锟街库，锟斤拷锟斤拷锟斤拷么锟斤拷锟斤拷锟酵诧拷锟斤拷细锟斤拷锟斤拷
锟斤拷锟斤拷锟斤拷锟较达拷锟斤拷锟街匡拷锟叫★拷
锟睫革拷锟斤拷锟斤拷锟侥硷拷

锟斤拷锟斤拷目锟叫碉拷 vite.config.js 锟斤拷锟揭碉拷锟斤拷锟斤拷锟斤拷锟介，锟斤拷锟斤拷为锟斤拷应锟斤拷 github 锟街匡拷锟斤拷锟斤拷

export default defineConfig({
    base: '/your_repositories_name/', // github锟街匡拷锟斤拷锟斤拷
    plugins: [],
})

锟斤拷锟斤拷vue锟斤拷锟斤拷

npm run build

锟斤拷锟斤拷锟斤拷锟侥达拷锟斤拷锟较达拷锟斤拷锟街匡拷锟斤拷

锟斤拷要锟斤拷 .gitignore 锟侥硷拷锟叫斤拷dist锟侥硷拷锟叫的猴拷锟皆革拷注锟酵碉拷锟斤拷

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

然锟斤拷锟斤拷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简单项目流程分享——工作室主页