Vue3簡(jiǎn)單項(xiàng)目流程分享——工作室主頁(yè)

零、寫在最前

以下是項(xiàng)目相關(guān)的一些鏈接：

• 源代碼GitHub倉(cāng)庫(kù)（需要魔法上網(wǎng)）： 倉(cāng)庫(kù)
• 網(wǎng)頁(yè)示例（需要魔法上網(wǎng)）： 網(wǎng)頁(yè)示例
• UI圖（來(lái)源@設(shè)計(jì)師楊賀）： MasterGo主頁(yè)

補(bǔ)充：由于時(shí)間關(guān)系，該網(wǎng)頁(yè)沒(méi)有適配手機(jī)端，最佳展示效果為網(wǎng)頁(yè)端1440p寬度。

---

如果你想要運(yùn)行源代碼：

1. 首先需要保證你本地?fù)碛蠽ue.js環(huán)境（具體方法和版本號(hào)下文有提到）
2. 將源代碼克隆到本地（得保證本地有Git環(huán)境）

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

1. 安裝依賴

npm install

1. 運(yùn)行項(xiàng)目

npm run dev

一、想法

• 作業(yè)要求

• 想做一個(gè)簡(jiǎn)單的工作室主頁(yè)設(shè)計(jì)（在MasterGo上找到個(gè)模板）

• https://mastergo.com/goto/AvNhjBqG?page_id=:27558&file=128583730325968 邀請(qǐng)您進(jìn)入《工作室主頁(yè)設(shè)計(jì)》，點(diǎn)擊鏈接開始協(xié)作

二、技術(shù)棧選用

課程作業(yè)要求要使用HTML+CSS+JSP技術(shù)，在網(wǎng)上了解到JSP內(nèi)可以套用Vue（相當(dāng)于用Vue寫模板，然后外面套一層JSP模板即可）。

最終決定使用Vue來(lái)實(shí)現(xiàn)前端，并且使用element Plus腳手架，后端部分嘗試使用JSP（沒(méi)學(xué)過(guò)，不知道能不能弄的下來(lái)），如果實(shí)在不行就用Django做前后端分離開發(fā)。

數(shù)據(jù)庫(kù)方面的話，就用Mysql或者sqlite3。

三、項(xiàng)目初始化

1. 安裝Vue.js和JSP和Tomcat

由于之前已經(jīng)安裝過(guò)Vue，所以不記錄了。

JSP和Tomcat參考的是下面幾篇文章，直接使用homebrew安裝的：

1. homebrew安裝Java
2. homebrew安裝Tomcat

值得注意的是以下啟動(dòng) Tomcat方法

brew services start tomcat

如果終端提示 Successfully started 'tomcat' (label: homebrew.mxcl.tomcat) 則說(shuō)明啟動(dòng)成功，瀏覽器訪問(wèn) http://localhost:8080 即可看到 Tomcat 的頁(yè)面。

2. 環(huán)境版本記錄

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項(xiàng)目創(chuàng)建

使用終端，進(jìn)入想創(chuàng)建的文件夾位置，然后運(yùn)行以下命令

npm create vue@latest

然后會(huì)讓我輸入項(xiàng)目名稱和進(jìn)行一些選項(xiàng)，在此我只選擇了 引入 Vue Router 進(jìn)行單頁(yè)面應(yīng)用開發(fā) ，其他選項(xiàng)均選擇了否。

最后根據(jù)提示進(jìn)入項(xiàng)目文件夾內(nèi)，安裝依賴并運(yùn)行即可。

cd 
npm install #安裝依賴
npm run dev #運(yùn)行項(xiàng)目

在瀏覽器中打開對(duì)應(yīng)網(wǎng)址即可

四、前端靜態(tài)部分

1. 路由設(shè)置

本項(xiàng)目是簡(jiǎn)單的項(xiàng)目，只有一個(gè)主頁(yè)面，頁(yè)面內(nèi)由上到下排布多個(gè)塊。

我們只需要修改 src/App.vue 和 src/router/index.js 中的內(nèi)容，將一開始的頁(yè)面指向自定義的文件 src/components/home.vue 即可，以下是具體內(nèi)容：

// 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. 主頁(yè)的排版

根據(jù)UI圖可以看出，主頁(yè)是由多個(gè)部分組成，由上到下排布。

本項(xiàng)目中將每個(gè)部分分別寫成一個(gè)組件文件，然后在 home.vue 中集成。

home.vue 只需要關(guān)注組件部分間的排版即可。

先分別創(chuàng)建好各個(gè)組件對(duì)應(yīng)的文件：

然后修改 home.vue

最終得到效果如下：

接下來(lái)只需要在對(duì)應(yīng)的組件文件中，完成前端的繪制即可。

3. 頂部菜單欄

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

使用flex布局，紅色部分使用 space-between ：兩端對(duì)齊，項(xiàng)目之間的間隔都相等；藍(lán)色部分使用 space-around ：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。

代碼如下：

最終效果：

后續(xù)還需要做：

點(diǎn)擊標(biāo)簽滾動(dòng)到對(duì)應(yīng)位置： 參考文章

4. 頭條部分

UI圖：

其中紅色部分使用flex分為左右兩部分，左邊使用flex分為上下三部分，右邊則是一張圖。

代碼如下：

最終效果：

5. 塊1

接下來(lái)是下面的五個(gè)塊中的第一個(gè)。UI圖如下：

布局如圖所示。

代碼如下：

效果如下：

• 遇到一個(gè)問(wèn)題：布局的高度不是固定的（我在css里寫了固定的數(shù)值），會(huì)隨著瀏覽器的縮放而改變。暫未解決。

6. 塊2

UI圖如下：

布局有點(diǎn)復(fù)雜，其中兩個(gè)藍(lán)色部分通過(guò)調(diào)整不同的margin-top來(lái)實(shí)現(xiàn)錯(cuò)位的效果。

背景的幾個(gè)矩形不太好直接通過(guò)代碼繪制，直接導(dǎo)出一張圖片放在容器背景中。

代碼如下：

效果如下：

實(shí)踐中發(fā)現(xiàn)，使用背景圖片來(lái)實(shí)現(xiàn)那些矩形，有點(diǎn)難以控制，效果不佳。最終我簡(jiǎn)化了一些元素，勉強(qiáng)能看。

如果要達(dá)到最好的效果，還是得通過(guò)代碼實(shí)現(xiàn)矩形的繪制。

7. 塊3

UI圖：

這里的布局比較簡(jiǎn)單，就不過(guò)多贅述了。

7.1 視頻播放器

比較特別的是此處使用了一個(gè)視頻播放器， 但是目前暫時(shí)沒(méi)有實(shí)現(xiàn)，出現(xiàn)了一些bug：第三方的播放器插件安裝后import顯示找不到，傳統(tǒng)的video播放不了……

先使用img代替，后續(xù)再修這個(gè)bug。

選用 vue3VideoPlay 這個(gè)插件，值得注意的是，這個(gè)插件有一個(gè)問(wèn)題，其默認(rèn)package.json中有一個(gè)路徑是錯(cuò)的，要改寫成下面這個(gè)：

另外，該插件官方的文檔也有點(diǎn)問(wèn)題，mp4文件不知道為什么播放不了，本地文件也播放不了……

經(jīng)過(guò)測(cè)試，網(wǎng)絡(luò)m3u8文件可以播放，所以下面使用此格式進(jìn)行播放。（如何獲得m3u8鏈接，寫在了補(bǔ)充部分）

代碼：

• template部分：

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

此處值得注意的部分是，播放器的長(zhǎng)和寬得像代碼的寫法才有效，寫成css無(wú)效，另外，圓角也只能通過(guò)設(shè)置父容器 overflow: hidden; 實(shí)現(xiàn)。

poster 部分是封面。

• script部分：

7.2 布局代碼

代碼：

效果：

8. 塊4

UI圖：

這張圖是有動(dòng)效的，中間的藍(lán)色圓圈可以選擇不同的人物介紹。
在此先做好靜態(tài)的外觀，動(dòng)效后面再補(bǔ)全。

8.1 靜態(tài)布局

代碼如下：

事實(shí)上，這里的圖片和選項(xiàng)都寫法，復(fù)用性很差，而且不好做動(dòng)效。后面會(huì)使用v-for等方法進(jìn)行修改。

效果如下（因?yàn)闆](méi)有找到合適的圖片，就隨便拿了一張圖片）：

9. 塊5

UI如下圖：

這一部分的布局和上面的有許多不同，有一部分的布局不能使用flex實(shí)現(xiàn)，得用相對(duì)和絕對(duì)位置 relative 、 absolute 來(lái)實(shí)現(xiàn)重疊，如圖中的紅色、右邊的綠色部分。

具體代碼如下：

效果如下：

10. 底部

UI如下：

布局比較簡(jiǎn)單，就不過(guò)多贅述。

代碼如下：

效果：

11. 補(bǔ)充

11.1 矩形繪制

前面寫靜態(tài)頁(yè)的時(shí)候，有一部分背景圖形是直接使用圖片，但是拉伸效果不好，所以補(bǔ)充使用div來(lái)畫矩形，以適應(yīng)不同寬度的瀏覽器。

首先是headline的這兩個(gè)矩形：

在right_part中加上兩個(gè)div，并用相對(duì)位置和絕對(duì)位置固定。

// 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鏈接

上面提到過(guò)，那個(gè)視頻播放插件無(wú)法播放本地視頻，所以需要將視頻上傳到網(wǎng)絡(luò)上，通過(guò)網(wǎng)絡(luò)鏈接獲取。

在此使用阿里云的媒體處理MPS和對(duì)象存儲(chǔ)OSS實(shí)現(xiàn)。

• 媒體處理MPS

• 對(duì)象存儲(chǔ)

1. 新建媒體Bucket

1. 新建工作流

1. 上傳視頻并發(fā)布

1. 獲取鏈接

1. OSS授權(quán)（不操作的話，鏈接會(huì)提示沒(méi)權(quán)限）

11.3 限制最大寬度

之前在布局時(shí)，多使用flex布局，可以根據(jù)瀏覽器寬度自適應(yīng)布局，在一定的寬度限制內(nèi)效果還不錯(cuò)，但是如果寬度太大，會(huì)導(dǎo)致左右兩邊的組件之間有一個(gè)巨大的空白，很難看，所以需要限制一個(gè)最大的寬度，當(dāng)超出這個(gè)寬度時(shí)，在兩邊使用空白填充。

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

max-width: 1440px;
/* 設(shè)置最大寬度 */
margin-left: auto;
/* 左側(cè)自動(dòng)填充 */
margin-right: auto;
/* 右側(cè)自動(dòng)填充 */

效果如下：

11.4 打開頁(yè)面默認(rèn)在頂部

視頻播放器有一個(gè)bug：在一開始打開頁(yè)面的時(shí)候，會(huì)開始緩沖，緩沖時(shí)默認(rèn)把頁(yè)面滾動(dòng)到播放器所在的位置。

但是我們想要打開時(shí)默認(rèn)在頂部。

試過(guò)使用 mounted 鉤子函數(shù)強(qiáng)制滾動(dòng)到頂部，但是緩沖在后，結(jié)果是不生效。

認(rèn)真查看了視頻播放器的文檔后，發(fā)現(xiàn)通過(guò)綁定事件，在緩沖開始時(shí)滾動(dòng)到頂部，可以曲線救國(guó)。

const onloadstart = (ev) => {
  console.log("開始緩沖");
  window.scroll(0, 0);
};

五、修改內(nèi)容

1. 網(wǎng)頁(yè)內(nèi)的內(nèi)容

以上，前端靜態(tài)部分的所有布局都畫好了，接下來(lái)要根據(jù)實(shí)際情況將內(nèi)容修改成我們自己的。

在這里，我想要做的是我們開發(fā)的一款app的介紹，所以將頁(yè)面改成了以下。（由于只需要修改內(nèi)容，所以代碼就不展示了）

2. 網(wǎng)頁(yè)標(biāo)題與圖標(biāo)

1. 將我們想用的圖標(biāo)替換掉 public/favicon.ico

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

1. 刷錕鉸鹼拷錕繳匡拷錕斤拷錕睫改成癸拷錕斤拷

錕斤拷錕斤拷錕斤拷態(tài)錕斤拷錕斤拷

1. 錕斤拷錕斤拷錕斤拷

1.1 錕教訛拷錕節(jié)訛拷錕斤拷

錕斤拷錕斤拷細(xì)錕斤拷喜錕斤拷錕斤拷嵌錕教�锟藉K斤拷鄭錕斤拷錕斤拷錕街憋拷錕酵�锟藉K絚ss錕斤拷錕斤拷錕斤拷錕斤拷實(shí)錕街ｏ拷只錕斤拷錕斤拷錕斤拷前錕斤拷錕斤拷錕斤拷錕斤拷錕剿ｏ拷錕斤拷錕節(jié)此詫拷錕斤拷錕較★拷

1. home.vue 錕僥鹼拷錕斤拷錕斤拷錕矯詫拷錕斤拷

1. 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 錕斤拷錕斤拷錕階�指锟藉K轎伙拷錕?

錕斤拷錕節(jié)革拷錕斤拷錕斤拷錕斤拷母叨錕斤拷槍潭錕斤拷錕斤拷錕僥ｏ拷錕斤拷錕斤拷直錕斤拷使錕斤拷 document.documentElement.scrollTop 錕斤拷錕斤拷實(shí)錕街★拷

1. 錕斤拷錕藉函錕斤拷

1. 錕斤拷錕斤拷簽錕襟定猴拷錕斤拷

2. 錕斤拷錕斤拷錕斤拷鈕

錕斤拷錕斤拷錕斤拷錕斤拷鈕錕斤拷錕斤拷錕斤拷錕斤拷錕鉸斤拷錕斤拷錕斤拷鈕只錕斤拷要錕斤拷一錕斤拷錕斤拷錕斤拷錕斤拷錕接鹼拷錕繳ｏ拷錕斤拷錕斤拷錕斤拷錕接匡拷錕斤拷使錕矯幫拷錕斤拷錕斤拷oss錕斤拷錕斤拷取錕斤拷錕斤拷錕藉方錕斤拷錕斤拷之前錕斤拷頻m3u8錕斤拷錕接伙拷取錕筋不錕潔，錕酵詫拷錕斤拷錕斤拷贅錕斤拷錕斤拷

錕斤拷錕結(jié)交錕斤拷錕斤拷鈕錕斤拷要錕斤拷一錕斤拷錕斤拷錕捷匡拷錕斤拷錕斤拷慕涌冢錕斤拷錕斤拷錕斤拷錕斤拷錕叫碉拷錕斤拷錕捷鹼拷錕誡到錕斤拷錕捷匡拷錕叫★拷

錕斤拷錕斤拷目前沒(méi)錕叫匡拷錕斤拷錕斤拷錕截的訛拷錕斤拷錕斤拷錕斤拷錕捷匡拷錕斤拷錕斤拷慕涌冢錕斤拷錕斤拷躍圖虻グ錕斤拷錕揭伙拷錕斤拷錕斤拷錕斤拷錕斤拷錕斤拷錕較�锟筋R４錕斤拷錕酵詫拷展示錕剿★拷

3. 錕斤拷員錕斤拷錕斤拷

錕斤拷員錕斤拷錕杰詫拷錕街ｏ拷錕斤拷要錕斤拷錕斤拷錕斤拷錕皆碉拷錕斤拷錕斤拷錕斤拷選錕斤拷鈕錕斤拷錕叫伙拷錕斤拷錕斤拷應(yīng)錕僥籌拷員錕斤拷息去錕斤拷

template 錕斤拷錕街ｏ拷

  
  

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

          

          
      
  

script 錕斤拷錕街ｏ拷

錕竭★拷錕斤拷錕斤拷github錕斤拷

錕斤拷錕較ｏ拷web頁(yè)錕斤拷錕斤拷錕斤拷錕繳ｏ拷錕斤拷錕斤拷錕斤拷錕斤拷錕角斤拷錕戒部錕斤拷GitHub錕較★拷

錕轎匡拷錕教程ｏ拷 錕轎匡拷

1. 錕斤拷錕鉸斤拷一錕斤拷github錕街庫(kù)，錕斤拷錕斤拷錕斤拷么錕斤拷錕斤拷錕酵詫拷錕斤拷細(xì)錕斤拷錕斤拷
2. 錕斤拷錕斤拷錕斤拷錕較達(dá)拷錕斤拷錕街匡拷錕叫★拷
3. 錕睫革拷錕斤拷錕斤拷錕僥鹼拷

錕斤拷錕斤拷目錕叫碉拷 vite.config.js 錕斤拷錕揭碉拷錕斤拷錕斤拷錕斤拷錕介，錕斤拷錕斤拷為錕斤拷應(yīng)錕斤拷 github 錕街匡拷錕斤拷錕斤拷

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

1. 錕斤拷錕斤拷vue錕斤拷錕斤拷

npm run build

1. 錕斤拷錕斤拷錕斤拷錕僥達(dá)拷錕斤拷錕較達(dá)拷錕斤拷錕街匡拷錕斤拷

錕斤拷要錕斤拷 .gitignore 錕僥鹼拷錕叫斤拷dist錕僥鹼拷錕叫的猴拷錕皆革拷注錕酵碉拷錕斤拷

然錕斤拷錕斤拷git錕斤拷錕斤拷錕僥鹼拷錕斤拷錕較達(dá)拷錕斤拷指錕斤拷錕斤拷支錕斤拷

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

錕斤拷錕斤拷誆摯錕斤拷錕斤拷錕斤拷錕叫達(dá)拷github page錕斤拷錕繳★拷