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

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

零、写在最前#

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

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

补充：由于时间关系，该网页没有适配手机端，最佳展示效果为网页端1440p宽度。

---

如果你想要运行源代码：

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

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

3. 安装依赖

npm install

4. 运行项目

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安装的：

1. homebrew安装Java
2. homebrew安装Tomcat

值得注意的是以下启动 Tomcat方法

brew services start tomcat

如果终端提示 Successfully started 'tomcat' (label: homebrew.mxcl.tomcat) 则说明启动成功，浏览器访问 http://localhost:8080 即可看到 Tomcat 的页面。

2. 环境版本记录#

1. Vue.js: @vue/cli 5.0.8
2. npm: 10.5.0
3. Java: openjdk 22.0.1 2024-04-16/ OpenJDK Runtime Environment Temurin-22.0.1+8 (build 22.0.1+8)/ OpenJDK 64-Bit Server VM Temurin-22.0.1+8 (build 22.0.1+8, mixed mode)

3. Vue项目创建#

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

npm create vue@latest

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

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

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

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

四、前端静态部分#

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只需要关注组件部分间的排版即可。

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

然后修改home.vue

最终得到效果如下：

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

3. 顶部菜单栏#

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

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

代码如下：

最终效果：

后续还需要做：

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

4. 头条部分#

UI图：

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

代码如下：

最终效果：

5. 块1#

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

布局如图所示。

代码如下：

效果如下：

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

6. 块2#

UI图如下：

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

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

代码如下：

效果如下：

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

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

7. 块3#

UI图：

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

7.1 视频播放器#

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

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

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

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

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

代码：

• template部分：

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

poster部分是封面。

• script部分：

7.2 布局代码#

代码：

效果：

8. 块4#

UI图：

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

8.1 静态布局#

代码如下：

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

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

9. 块5#

UI如下图：

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

具体代码如下：

效果如下：

10. 底部#

UI如下：

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

代码如下：

效果：

11. 补充#

11.1 矩形绘制#

前面写静态页的时候，有一部分背景图形是直接使用图片，但是拉伸效果不好，所以补充使用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;
}

11.2 获得m3u8链接#

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

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

• 媒体处理MPS

• 对象存储

1. 新建媒体Bucket

2. 新建工作流

3. 上传视频并发布

4. 获取链接

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

11.3 限制最大宽度#

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

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

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

效果如下：

11.4 打开页面默认在顶部#

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

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

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

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

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

五、修改内容#

1. 网页内的内容#

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

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

2. 网页标题与图标#

1. 将我们想用的图标替换掉public/favicon.ico

2. 修改根目录下的index.html文件：

html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/public/favicon.ico"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试卷簿——专注高效的学习帮手title> 
  head>
  <body>
    <div id="app">div>
    <script type="module" src="/src/main.js">script>
  body>
html>

3. 刷新即可看到修改成功。

六、动态部分#

1. 顶部栏#

1.1 固定在顶部#

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

1. home.vue文件中设置布局

2. 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即可实现。

1. 定义函数

2. 给标签绑定函数

2. 两个按钮#

这两个按钮，“立即下降”按钮只需要绑定一个下载链接即可，下载链接可以使用阿里云oss来获取，具体方法和之前视频m3u8链接获取差不多，就不过多赘述。

“提交”按钮需要绑定一个数据库操作的接口，将输入框中的内容加入到数据库中。

由于目前没有可以下载的东西和数据库操作的接口，所以就简单绑定了一个函数给个消息框。代码就不展示了。

3. 成员介绍#

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

template部分：

  
  

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

          

          
      
  

script部分：

七、部署到github上#

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

参考教程：参考

1. 先新建一个github仓库，具体怎么操作就不详细讲。
2. 将代码上传到仓库中。
3. 修改配置文件

打开项目中的vite.config.js，找到下面代码块，更改为对应的 github 仓库名称

export default defineConfig({
    base: '/your_repositories_name/', // github仓库名称
    plugins: [],
})

4. 编译vue代码

npm run build

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

先要在.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即可。