《從零構建先後分離的web項目》：前端完善 - 手把手教你快速構建網站佈局
添磚加瓦 - 手把手教你快速構建網站佈局
項目地址
本章源碼地址
文章地址
本文爲方便講述重構去除了 Element、vux 庫，用了最近比較火的 bulma 輕量、快捷、易讀。javascript
項目截屏css
Layout and Components
Layout
首先，似上圖，咱們思考把一個小型網站拆成三部分：頁頭(Header)、內容(Content)、頁腳(Footer) 這幾乎每一個網站內都必須有的，一般把萬年不變的：頁頭(Header)、頁腳(Footer) 製做成 Layout 方便通用。html
Components
再把內容(Content)根據業務進行拆分紅 組件(Components)前端
如上圖：Header 和 Content ：Header其實沒有拆分的必要，沒有能夠重用的組件，而 Conntent 是必需要拆分的佈局元素。由於動態網站 Conntent 隨着內容的變化而變化，內容多，可重用的東西的機率越高，須要把能重用的東西提煉出來vue
一、節省代碼、提升代碼閱讀性java
二、便於修改 （好比更新廣告）webpack
開始寫代碼
接着咱們的 第二章上傳的源碼 開始，基於它繼續完善小網站佈局和組件化。git
值得一提的是：本系列教程一章跟隨一章而且每一章能夠獨立運行，章與章之間完美銜接，沒有 「忽然出現」 的代碼段。不會給新手無從下手的感受，若是那你對代碼陌生，那你該認真翻翻往期文章了。你能夠基於上一章逐步寫代碼，也能夠下載本章簡單預覽代碼。github
- 引入 bulma 樣式 CDN
vim new-bee/index.html
複製代碼
<!-- font -->
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
複製代碼
- 新建 Layout 目錄
vim new-bee/src/renderer/components/layout
複製代碼
- Layout 目錄下創建 Header.vue 模板組件
這個組件專門寫頭部的內容，最好配合柵格儘量寫出簡單的響應式組件web
<template>
<div id="bee-header" element-loading-text="正在努力請求github..." element-loading-background="rgba(0, 0, 0, 0.8)">
<!-- 遮罩 -->
<div :class=" loading ? `modal is-active` : `modal` " style="background-color: #ffffff36">
< img src="https://img.actd.tw/images/2018/11/17/ezgif-4-05f4bba41fef.gif" style="width: 300px" alt="">
</div>
<div class="is-underline ">
<div class="container">
<nav class="navbar ">
<div class="navbar-brand">
<a class="navbar-item" >
< img src="https://img.actd.tw/images/2018/11/17/bee.png" alt="Bulma: a modern CSS framework based on Flexbox" width="92" height="28">
</a >
<div class="login-before is-hidden-mobile" style="padding-top: 5px;">
<a class="navbar-item is-hidden-desktop" href=" " target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-lg fa-github is-size-2"></i>
</span>
</a >
</div>
<div class="navbar-item is-hidden-desktop ">
<div class="field has-addons" ><div class="control" ><input type="input" class="input" name="email" placeholder="搜索一下" required="required" style="height: 36.4px;width:130px"><input type="hidden" name="redirect" id="name" value="/fr/#thanks"></div><div class="control" ><input type="submit" class="button is-warning" value="GO"></div></div>
</div>
<div class="navbar-burger burger" data-target="navMenuDocumentation" >
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuDocumentation" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-active">
發現
</a >
<div class="navbar-dropdown ">
<a class="navbar-item " type="收藏集">
收藏集
</a >
<a class="navbar-item" type="徽章">
徽章
</a >
<a class="navbar-item " type="排名">
排名
</a >
<a class="navbar-item " type="職場生活">
職場生活
</a >
</div>
</div>
<a class="navbar-item " href="https://bulma.io/expo/">
<!--<span class="bd-emoji">⭐️</span>-->
專欄
</a >
<a class="navbar-item " href="https://bulma.io/expo/">
<!--<span class="bd-emoji">⭐️</span>-->
聊天
<!-- 不少人不知道幹什麼。。。 -->
</a >
<a class="navbar-item " href="https://bulma.io/expo/">
<!--<span class="bd-emoji">⭐️</span>-->
面經
</a >
<router-link class="navbar-item " to="/book">
<!--<span class="bd-emoji">❤️</span>-->
書籍
</router-link>
</div>
<div class="navbar-end">
<div class="login-before" style="padding-top: 5px;">
<!-- pc -->
<a class="navbar-item is-hidden-desktop-only" href="https://github.com/pkwenda/my-bbs" target="_blank">
<span class="icon" style="color: #333;">
<i class="fa fa-lg fa-github is-size-2"></i>
</span>
</a >
</div>
<div class="navbar-item is-hidden-mobile ">
<div class="field has-addons" ><div class="control" ><input type="input" class="input" name="email" placeholder="搜索一下" required="required" style="height: 36.4px;"><input type="hidden" name="redirect" id="name" value="/fr/#thanks"></div><div class="control" ><input type="submit" class="button is-warning" value="GO"></div></div>
</div>
<div class="navbar-item is-hidden-mobile ">
<!--<span class="icon is-medium">-->
<i class="iconfont icon-tixing"></i>
<!--</span>-->
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="is-hidden-mobile" target="_blank">
< img src="https://avatars2.githubusercontent.com/u/14212375?s=400&u=dc515636befebfda36501309d1cdc087ee31d500&v=4" class=" header-avatar img-circle " style="margin-top: 10px">
</a >
<div class="navbar-dropdown ">
<a class="navbar-item " type="收藏集">
寫文章
</a >
<a class="navbar-item" type="徽章">
設置
</a >
<a class="navbar-item " type="排名">
退出
</a >
</div>
</div>
<div class="login-before">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="button is-warning" v-show="!isLogin" >
<strong>登陸</strong>
</a >
</p >
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</template>
<script> export default { name: "BeeHeader", data() { return { popupShow: false, isLogin: false, user: {}, loading: false, userInfo: {} }; }, created() {}, destroyed() {}, mounted() {}, methods: {} }; </script>
<style scoped> .img-circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } </style>
複製代碼
什麼樣式能夠寫在 .vue 文件中
上文的比較熟悉的代碼是讓咱們的頭像變圓的代碼段
<style scoped>
.img-circle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
複製代碼
- 效果
這裏我偷了個懶，恰好能夠說一說，對於如此通用的樣式，侷限在 .vue文件中，而且以 scoped 標示，宣判了它沒法複用的事實，任何模塊想用這個樣式，都須要複製一份，顯然是不規範的，咱們一般還會創建通用的 css 文件進行管理，大型項目 css 管理規範將更加嚴格、規範的樹級結構，具體就看 CTO 的想法了。
根據喜愛選擇如何佈局
按需引入
vim new-bee/src/renderer/components/HelloWorld.vue
複製代碼
<template>
<div>
<Header></Header>
<!--<div class="container"> </div>-->
</div>
</template>
<script>
import Header from "@/components/layout/Header";
export default {
name: "NewBeeIndex",
components: { Header },
data() {
return {};
},
destroyed() {},
mounted() {},
methods: {},
watch: {}
};
</script>
複製代碼
缺點是要一個一個引入，但優勢是代碼可讀性高
全局引入
- App 主入口
vim new-bee/src/renderer/App.vue
複製代碼
- 引入
<template>
<div id="app">
<Header></Header>
<!-- < img src="./assets/logo.png"> -->
<router-view/>
</div>
</template>
<script> import Header from "@/components/layout/Header"; export default { name: "App", components: { Header } }; </script>
<style> </style>
複製代碼
- 查看效果
基於 webpack 爸爸的熱部署，咱們無需刷新瀏覽器，webpack 偷偷用 ws 更新了咱們的內容。彷佛很完美，可是也許你們發現了一個問題，咱們經過瀏覽器渲染出來的 dom 就能夠看到：：
咱們在主 APP 入口引入了頭部佈局， App.vue 是緊臨 元素的正文元素，而這個程序全部頁面、子路由所有都是 App.vue 入口的子集，說明全局引入佈局會存在以下問題：
一、這個項目全部的項目都必定會帶上 Header 組件渲染的內容 二、並且會影響在下期 《性能優化》中講的 webpack 按需加載的性能。
固然能夠再 Header 組件上書寫邏輯條件,過濾指定的路由，但會破壞項目的易讀性，難以維護
我我的是比較推薦第一種：按需引入的方式。
繼續佈局
- 照貓畫虎寫好 Footer
vim new-bee/src/renderer/components/layout/Footer.vue
複製代碼
<template>
<footer class="footer footer-light-medium " style="padding-bottom: 20px;padding-top: 20px;">
<div class="container">
<div class="columns">
<!-- Column -->
<div class="column is-4">
<div class="mb-20">
< img class="small-footer-logo" src="https://img.actd.tw/images/2018/11/17/bee.png" alt="">
<div class="footer-description pt-10">
new bee 是一個爲開發者提供的專一於技術分享的開源社區,全部源碼都可在 github 上找到,但願對廣大開發者有所幫助。
</div>
</div>
<div>
<span class="moto">喜歡項目能夠點贊支持 <a href="https://github.com/pkwenda/new-bee" target="_blank">
<span class="icon"><i class="fa fa-github"></i></span>
</a >.</span>
<div class="social-links mt-20">
</div>
</div>
</div>
<!-- Column -->
<div class="column is-6 is-offset-2">
<div class="columns">
<!-- Column -->
<div class="column">
<ul class="footer-column">
<li class="column-header">
Links
</li>
<li class="column-item"><a href="https://github.com/pkwenda/new-bee">Home</a ></li>
<li class="column-item"><a href="https://cssninja.io/themes">Blog</a ></li>
<li class="column-item"><a href="https://github.com/pkwenda/new-bee/wiki">Wiki</a ></li>
</ul>
</div>
<!-- Column -->
<div class="column">
<ul class="footer-column">
<li class="column-header">
Ressources
</li>
<li class="column-item"><a href="https://cssninja.io/help">Help center</a ></li>
<li class="column-item"><a href="https://cssninja.io/blog">Blog</a ></li>
<li class="column-item"><a href="https://cssninja.io/help/rules">Rules</a ></li>
</ul>
</div>
<!-- Column -->
<div class="column">
<ul class="footer-column">
<li class="column-header">
Terms
</li>
<li class="column-item"><a href="https://cssninja.io/help/terms/licenses/personal">Personal</a ></li>
<li class="column-item"><a href="https://cssninja.io/help/terms/licenses/developer">Developer</a ></li>
<li class="column-item"><a href="https://cssninja.io/help/terms/service">Terms of Service</a ></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</template>
<script>
export default {
name: "Footer",
data() {
return {};
},
created() {},
destroyed() {},
mounted() {
},
methods: {}
};
</script>
複製代碼
別忘了在 HelloWorld 引入一下
- 看看效果
- 看起來效果還不錯，接下來是 Content（正文）部分
vim new-bee/src/renderer/components/layout/Content.vue
複製代碼
<template>
<div class="container" style="height:700px">
<h1 >博客列表</h1>
<article class="column is-3" v-for="blog in blogs" v-bind:key="blog">
<a class="bd-article-image is-bootstrap" >
<span class="bd-article-overlay"></span>
<span class="bd-article-icon">
<i class="fa fa-tag"></i>
</span>
<strong class="bd-star-icon" ><i class="fa fa-star"></i> <span style="font-size: 1rem"> {{blog.commendCount}}</span></strong>
<strong class="bd-article-info">
<span>
<time class="bd-article-date" datetime="2017-10-09T00:00:00+00:00">
{{blog.tag}}
</time>
<strong class="bd-article-title">
{{blog.title}}
</strong>
</span>
</strong>
</a>
</article>
</div>
</template>
<script>
let article = { tag: "java", title: "java", commendCount: 0 };
export default {
name: "Footer",
data() {
return {
blogs: [
article,
article,
article,
article,
article,
article,
article,
article
]
};
},
created() {},
destroyed() {},
mounted() {},
methods: {}
};
</script>
<style scoped>
.bd-article-image.is-bootstrap {
background-color: #6f5499;
}
.bd-article-image {
background-color: #00d1b2;
display: block;
height: 240px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.bd-star-icon {
font-size: 19.2px;
font-size: 1.2rem;
color: #0a0a0a;
opacity: 0.25;
bottom: 10px;
left: 30px;
position: absolute;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.bd-article-icon,
.bd-article-info {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.bd-article-info {
padding: 20px;
}
a strong {
color: currentColor;
}
.bd-article-date {
color: rgba(0, 0, 0, 0.5);
display: block;
}
.bd-article-title {
color: white;
display: block;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.25;
padding: 0 20px;
}
.bd-article-icon {
color: #0a0a0a;
opacity: 0.25;
}
h1 {
text-align: center;
font-size: 30px;
}
.column.is-3,
.column.is-3-tablet {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 25%;
float: left;
}
</style>
複製代碼
還算看得過去，咱們繼續參照圖二
爲 Content 制定 AD(廣告) 組件。
vim new-bee/src/renderer/components/common/AD.vue
複製代碼
<template>
<div class="ad"><h1>澳門XX賭場上線啦</h1></div>
</template>
<script> export default { name: "AD", data() { return {}; }, destroyed() {}, mounted() {}, methods: {}, watch: {} }; </script>
<style scoped> .ad { width: 150px; height: 180px; background-color: #ececec; position: fixed; right: 30px; top: 80px; } </style>
複製代碼
- 別忘了在 Content.vue 引入一下
...
<AD></AD>
...
import AD from "@/components/common/AD";
export default {
name: "Content",
components: { AD },
...
}
複製代碼
- 看下效果
- 對比一下咱們以前 sketch 畫的草圖
差很少完成了咱們初步的構思
總結
至此頁面佈局和組件的引用大概講述完了，相信你們能夠觸類旁通，寫好本身的小網站，其中更復雜的嵌套方式再也不講了，你們直接去看項目吧。
做者的話
其實這個項目老早就是今天這個樣子了，只是一直在下班後寫教程，耽誤了進度，寫教程也不是複製粘貼，首先要保障準確性，而不是刪刪改改草草了事，想寫出好的教程只能換位思考，以小白的身份，從 CLI 、頭到尾一行代碼一行代碼堆上去。相信寫到如今一部分人對前端也有了一些新的認識，前端已經不是引入一個 JQuery.js、Vue.js 去寫腳本的時代了 （Angular 已經有 IOC 了），做爲一個後端，前端初步就帶你們玩到這裏了，Electron 之後你們直接去看項目吧，沒什麼好講的，下一章會單獨講解一章終章《前端性能優化》大概涉及： webpack按需加載 、gZip、CDN、沒錢買服務器如何調試小程序等 Tips ，本教程全棧方向的，下一步還有後端微服務、消息隊列、docker、docker-compose/rancher 模擬集羣、運維 等幾個點，之後會加快進度的，儘可能新年以前寫徹底部內容。
關於回覆
新發布的文章前兩天其實我都會去掘金你們的評論我都會看，可是你能想象獲得嗎，掘金消息提醒沒有分類 ：點贊 | 回覆 |
你們的消息就是在無盡的滾動條中石沉大海了，以後也就懶得看了，評論找不到我能夠去 github的issues 各個文章下面留言提問，或者勘誤，爲後人鋪路，新文章也會先發到這裏一天請你們勘誤，star 不 star 無所謂了，謝謝你們。
項目地址
本章源碼地址
文章地址
往期文章
下一章《前端終章-前端性能優化與上線》
相關文章
- 1. 手把手教你構建gradle項目
- 2. 《從零構建先後分離的web項目》：前端了解過關了嗎？
- 3. 《從零構建先後分離的web項目》：前端1.0 終 - 前端性能優化 (多圖預警)
- 4. 手把手教你從零開始搭建SpringBoot後端項目框架
- 5. 《從零構建先後分離web項目》：開篇 - 縱觀WEB歷史演變
- 6. 《從零構建先後分離web項目》探究 - 深刻聊聊先後分離架構
- 7. 手把手教你webpack4.x從零開始搭建vue項目
- 8. 從零構建前端 Lint 工做流（2020手把手版）
- 9. 先後端分離以前端項目構建（grunt+require+angular）
- 10. 手把手教你快速構建一份全國疫情分佈地圖
- 更多相關文章...
- • Maven 構建 Java 項目 - Maven教程
- • Maven 構建 & 項目測試 - Maven教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 手把手教你構建gradle項目
- 2. 《從零構建先後分離的web項目》：前端了解過關了嗎？
- 3. 《從零構建先後分離的web項目》：前端1.0 終 - 前端性能優化 (多圖預警)
- 4. 手把手教你從零開始搭建SpringBoot後端項目框架
- 5. 《從零構建先後分離web項目》：開篇 - 縱觀WEB歷史演變
- 6. 《從零構建先後分離web項目》探究 - 深刻聊聊先後分離架構
- 7. 手把手教你webpack4.x從零開始搭建vue項目
- 8. 從零構建前端 Lint 工做流（2020手把手版）
- 9. 先後端分離以前端項目構建（grunt+require+angular）
- 10. 手把手教你快速構建一份全國疫情分佈地圖