【Day04】實戰開始 - 設計版型以及透過Vue框架建立專案


今天開始進入切版實戰囉!

大家平常在上網時,不妨可以看看你所在的網頁版面配置是如何,雖然因為技術推陳出新,越來越無法輕易看出原本的專案結構,但這算是一個練習的小方法。
我在切板時,會先用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(進入點)在哪裡。

裡面有幾個重要的檔案跟資料夾:

  1. main.js: 程式入口檔案,是初始化vue例項並使用需要的外掛,載入各種公共元件.
  2. App.vue: 是我們的主元件,頁面入口檔案 ,所有頁面都是在App.vue下進行切換的。也是整個專案的關鍵,app.vue負責構建定義及頁面元件歸集。
  3. index.js: 把準備好路由元件註冊到路由裡,當要切換頁面時,就必須要在這裡註冊你的路由(route)。
  4. index.html: 是一個會html-webpack-plugin 處理的模板。在Build的過程中,資源會被注入到這。
  5. components資料夾: 放置元件(Component)。
  6. node_modules資料夾: 存放下載下來的模組(package)。
  7. build資料夾: 配置了webpack的基本配置、開發環境配置、生產環境配置等。
  8. 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;
}

半成品:

下一篇將會繼續切版流程,會介紹如何切換頁面,以及設定預設頁面。

本系列文章將同步發布於我的個人網站

#html #css #Web







你可能感興趣的文章

763. Partition Labels

763. Partition Labels

N2_Babel 簡介及使用

N2_Babel 簡介及使用

ASP.NET Core Web API 入門教學 - 開發環境基本介紹

ASP.NET Core Web API 入門教學 - 開發環境基本介紹






留言討論