今天開始進入切版實戰囉!
大家平常在上網時,不妨可以看看你所在的網頁版面配置是如何,雖然因為技術推陳出新,越來越無法輕易看出原本的專案結構,但這算是一個練習的小方法。
我在切板時,會先用ppt畫出草稿,區分出對應的div。
譬如說這次要來練習的版型如下:。
越困難的版型,就會越難切,但原理都是一樣的,就是將大的元件拆分成小的元件。
接下來,就要開始透過Vue.js這個前端框架開始實作版面,有關Vue、npm、git的介紹,這裡就不贅述了。
在建立專案前,務必先download相關的工具,包含:node.js、npm、git(版控)。
接著我們透過npm下載Vue-cli命令列工具,安裝完畢後可使用 $ vue -v查看版本。
npm install -g vue-cli
接著,再透過vue cli建立專案,webpack是用來打包程式碼的工具。
vue init webpack myWebsite
建立過程可依需求調整相關選項:
建議安裝 vue-router (需要安裝作為 SPA 路由)
建議安裝 ESLint (檢查 coding style 套件,保持專案風格一致)
構建完成後,再來看的是專案的目錄結構,在使用框架時,非常重要的事,你要找到它的Entry Point(進入點)在哪裡。
裡面有幾個重要的檔案跟資料夾:
- main.js: 程式入口檔案,是初始化vue例項並使用需要的外掛,載入各種公共元件.
- App.vue: 是我們的主元件,頁面入口檔案 ,所有頁面都是在App.vue下進行切換的。也是整個專案的關鍵,app.vue負責構建定義及頁面元件歸集。
- index.js: 把準備好路由元件註冊到路由裡,當要切換頁面時,就必須要在這裡註冊你的路由(route)。
- index.html: 是一個會html-webpack-plugin 處理的模板。在Build的過程中,資源會被注入到這。
- components資料夾: 放置元件(Component)。
- node_modules資料夾: 存放下載下來的模組(package)。
- build資料夾: 配置了webpack的基本配置、開發環境配置、生產環境配置等。
- static資料夾: 這裡我用來存放CSS檔案。
首先我們在components資料夾裡新增一個MainPage.vue的vue template。
先從右上方的橫幅標題開始
<div class="content">
<div class="banner">
<div>
<div class="picture">
<img src="../assets/title.jpg" class="bar_picture">
</div>
<div>
<span class="intro">李培華
<p class="introduction">正在努力邁向前端工程師之路。</p>
</span>
</div>
</div>
</div>
<component :is="currentTab" keep-alive></component>
</div>
定義一下banner這個CSS,我直接在CSS設定banner的背景圖片,cover使用於背景圖片小於容器時,將背景圖片的大小放大至容器的大小並填滿,缺點是如果容器的長寬比例與背景圖片的長寬比例不吻合,會出現背景圖片失真的情況。
.content .banner {
margin-left:280px;
width: 100%;
height: 200px;
background: url('../../src/assets/bar.jpg') center center fixed no-repeat;
background-size:cover;
}
.content .banner div {
display: inline-block;
}
接下來是左邊的區塊(淺藍框框)。
<div class="menu">
<div class="title">
<div>
<img src="../assets/title.jpg" class="min_picture">
</div>
<div>
<p>Grant Li(李培華)</p><br><br><br><br>
</div>
</div>
<ul>
<li @click="changeView(Home)" class="liststyle">Home(首頁)</li>
<li @click="changeView(WorkExperience)" class="liststyle">Work Experience(工作經歷)</li>
<li @click="changeView(ProjectExperience)" class="liststyle">Project Experience(專案經歷)</li>
<li @click="changeView(Portfolio)" class="liststyle">Portfolio(作品集)</li>
<li @click="changeView(Photo)" class="liststyle">Photo(相片)</li>
</ul>
<div class="link">
<a href="https://www.facebook.com/profile.php?id=100001824960776">
<div class="fb"></div>
</a>
<a href="https://github.com/PefyLi">
<div class="github"></div>
</a>
<a href="https://www.linkedin.com/in/grant-li-3a6680150/">
<div class="linkedin"></div>
</a>
<a href="mailto:pefy19950714@gmail.com">
<div class="gmail"></div>
</a>
</div>
</div>
左邊的大div中,分邊包含了小標題、菜單及社群媒體標籤三個div,我這邊想做的是透過左邊的菜單點選,右下方的內容區呈現對應的內容。
對應的CSS,title中的div我們想讓它平行排列,這時候就必須設定display屬性為inline-block,不然div預設會是垂直排列喔。
.title {
width: 100%;
height: 100px;
background: url('../../src/assets/887.jpg') no-repeat;
background-size:cover;
}
.title div{
display: inline-block;
}
.menu .link{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.menu .link div {
height: 50px;
width: 50px;
display: inline-block;
}
.menu .link .fb {
background: url('../../src/assets/facebook.png') no-repeat;
background-size: auto 33px;
margin-left: 20px
}
.menu .link .fb:hover {
width: 50px;
height: 50px;
background: url('../../src/assets/facebook.png') no-repeat;
background-size: auto 40px;
}
.menu .link .github {
background: url('../../src/assets/github.png') no-repeat;
background-size: 33px auto;
}
.menu .link .github:hover {
width: 50px;
height: 50px;
background: url('../../src/assets/github.png') no-repeat;
background-size: auto 40px;
}
.menu .link .linkedin {
background: url('../../src/assets/linkedin.png') no-repeat;
background-size: 33px auto;
}
.menu .link .linkedin:hover {
width: 50px;
height: 50px;
background: url('../../src/assets/linkedin.png') no-repeat;
background-size: auto 40px;
}
.menu .link .gmail {
background: url('../../src/assets/gmail.png') no-repeat;
background-size: 33px auto;
}
.menu .link .gmail:hover {
width: 50px;
height: 50px;
background: url('../../src/assets/gmail.png') no-repeat;
background-size: auto 40px;
}
.liststyle{
height: 30px;
padding: 15px;
margin-top:15px;
}
半成品:
下一篇將會繼續切版流程,會介紹如何切換頁面,以及設定預設頁面。
本系列文章將同步發布於我的個人網站。