Vue3簡單項目流程分享——工作室主頁

零、寫在最前

以下是項目相關的一些鏈接：

• 源代碼GitHub倉庫（需要魔法上網(wǎng)）： 倉庫
• 網(wǎng)頁示例（需要魔法上網(wǎng)）： 網(wǎng)頁示例
• UI圖（來源@設計師楊賀）： MasterGo主頁

補充：由于時間關系，該網(wǎng)頁沒有適配手機端，最佳展示效果為網(wǎng)頁端1440p寬度。

---

如果你想要運行源代碼：

1. 首先需要保證你本地擁有Vue.js環(huán)境（具體方法和版本號下文有提到）
2. 將源代碼克隆到本地（得保證本地有Git環(huán)境）

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

1. 安裝依賴

npm install

1. 運行項目

npm run dev

一、想法

• 作業(yè)要求

• 想做一個簡單的工作室主頁設計（在MasterGo上找到個模板）

• https://mastergo.com/goto/AvNhjBqG?page_id=:27558&file=128583730325968 邀請您進入《工作室主頁設計》，點擊鏈接開始協(xié)作

二、技術棧選用

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

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

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

三、項目初始化

1. 安裝Vue.js和JSP和Tomcat

由于之前已經(jīng)安裝過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. 環(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項目創(chuàng)建

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

npm create vue@latest

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

最后根據(jù)提示進入項目文件夾內，安裝依賴并運行即可。

cd 
npm install #安裝依賴
npm run dev #運行項目

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

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

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. 主頁的排版

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

本項目中將每個部分分別寫成一個組件文件，然后在 home.vue 中集成。

home.vue 只需要關注組件部分間的排版即可。

先分別創(chuàng)建好各個組件對應的文件：

然后修改 home.vue

最終得到效果如下：

接下來只需要在對應的組件文件中，完成前端的繪制即可。

3. 頂部菜單欄

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

使用flex布局，紅色部分使用 space-between ：兩端對齊，項目之間的間隔都相等；藍色部分使用 space-around ：每個項目兩側的間隔相等。

代碼如下：

最終效果：

后續(xù)還需要做：

點擊標簽滾動到對應位置： 參考文章

4. 頭條部分

UI圖：

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

代碼如下：

最終效果：

5. 塊1

接下來是下面的五個塊中的第一個。UI圖如下：

布局如圖所示。

代碼如下：

效果如下：

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

6. 塊2

UI圖如下：

布局有點復雜，其中兩個藍色部分通過調整不同的margin-top來實現(xiàn)錯位的效果。

背景的幾個矩形不太好直接通過代碼繪制，直接導出一張圖片放在容器背景中。

代碼如下：

效果如下：

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

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

7. 塊3

UI圖：

這里的布局比較簡單，就不過多贅述了。

7.1 視頻播放器

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

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

選用 vue3VideoPlay 這個插件，值得注意的是，這個插件有一個問題，其默認package.json中有一個路徑是錯的，要改寫成下面這個：

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

經(jīng)過測試，網(wǎng)絡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; 實現(xiàn)。

poster 部分是封面。

• script部分：

7.2 布局代碼

代碼：

效果：

8. 塊4

UI圖：

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

8.1 靜態(tài)布局

代碼如下：

事實上，這里的圖片和選項都寫法，復用性很差，而且不好做動效。后面會使用v-for等方法進行修改。

效果如下（因為沒有找到合適的圖片，就隨便拿了一張圖片）：

9. 塊5

UI如下圖：

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

具體代碼如下：

效果如下：

10. 底部

UI如下：

布局比較簡單，就不過多贅述。

代碼如下：

效果：

11. 補充

11.1 矩形繪制

前面寫靜態(tài)頁的時候，有一部分背景圖形是直接使用圖片，但是拉伸效果不好，所以補充使用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鏈接

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

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

• 媒體處理MPS

• 對象存儲

1. 新建媒體Bucket

1. 新建工作流

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

1. 獲取鏈接

1. OSS授權（不操作的話，鏈接會提示沒權限）

11.3 限制最大寬度

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

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

max-width: 1440px;
/* 設置最大寬度 */
margin-left: auto;
/* 左側自動填充 */
margin-right: auto;
/* 右側自動填充 */

效果如下：

11.4 打開頁面默認在頂部

視頻播放器有一個bug：在一開始打開頁面的時候，會開始緩沖，緩沖時默認把頁面滾動到播放器所在的位置。

但是我們想要打開時默認在頂部。

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

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

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

五、修改內容

1. 網(wǎng)頁內的內容

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

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

2. 網(wǎng)頁標題與圖標

1. 將我們想用的圖標替換掉 public/favicon.ico

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

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

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

1. 錕斤拷錕斤拷錕斤拷

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

錕斤拷錕斤拷細錕斤拷喜錕斤拷錕斤拷嵌錕教�锟藉K斤拷鄭錕斤拷錕斤拷錕街憋拷錕酵�锟藉K絚ss錕斤拷錕斤拷錕斤拷錕斤拷實錕街ｏ拷只錕斤拷錕斤拷錕斤拷前錕斤拷錕斤拷錕斤拷錕斤拷錕剿ｏ拷錕斤拷錕節(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 錕斤拷錕斤拷實錕街★拷

1. 錕斤拷錕藉函錕斤拷

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

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

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

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

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

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: [],
})

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

npm run build

1. 錕斤拷錕斤拷錕斤拷錕僥達拷錕斤拷錕較達拷錕斤拷錕街匡拷錕斤拷

錕斤拷要錕斤拷 .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錕斤拷錕繳★拷