添砖加瓦 - 手把手教你快速构建网站布局
项目地址
本章源码地址
文章地址
本文为方便讲述重构去除了 Element、vux 库，用了最近比较火的 bulma 轻量、快捷、易读。
项目截屏
Layout and Components
Layout
首先，似上图，我们思考把一个小型网站拆成三部分：页头(Header)、内容(Content)、页脚(Footer) 这几乎每个网站内都必须有的，通常把万年不变的：页头(Header)、页脚(Footer) 制作成 Layout 方便通用。
Components
再把内容(Content)根据业务进行拆分成 组件(Components)
如上图：Header 和 Content ：Header其实没有拆分的必要，没有可以重用的组件，而 Conntent 是必须要拆分的布局元素。因为动态网站 Conntent 随着内容的变化而变化，内容多，可重用的东西的概率越高，需要把能重用的东西提炼出来
1、节省代码、提高代码阅读性
2、便于修改 （比如更新广告）
开始写代码
接着我们的 第二章上传的源码 开始，基于它继续完善小网站布局和组件化。
值得一提的是：本系列教程一章跟随一章并且每一章可以独立运行，章与章之间完美衔接，没有 “突然出现” 的代码段。不会给新手无从下手的感觉，如果那你对代码陌生，那你该认真翻翻往期文章了。你可以基于上一章逐步写代码，也可以下载本章简单预览代码。
- 引入 bulma 样式 CDN
vim new-bee/index.html
复制代码
"//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
"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 模板组件
这个组件专门写头部的内容，最好配合栅格尽可能写出简单的响应式组件
<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/">
专栏
a >
<a class="navbar-item " href="https://bulma.io/expo/">
聊天
a >
<a class="navbar-item " href="https://bulma.io/expo/">
面经
a >
<router-link class="navbar-item " to="/book">
书籍
router-link>
div>
<div class="navbar-end">
<div class="login-before" style="padding-top: 5px;">
<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 ">
<i class="iconfont icon-tixing">i>
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 文件中
上文的比较熟悉的代码是让我们的头像变圆的代码段
复制代码-
看看效果
-
HelloWorld.vue 代码看起来是这样的
还算看得过去，我们继续参照图二
为 Content 制定 AD(广告) 组件。
vim new-bee/src/renderer/components/common/AD.vue
复制代码
<template>
<div class="ad"><h1>澳门皇家赌场上线啦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 无所谓了，谢谢大家。
项目地址
本章源码地址
文章地址
往期文章
序 - 开源的意义
开篇 - 纵观WEB历史演变
探究 - 深入聊聊前后分离架构
准备 - 前端了解过关了吗？前端基础架构和技术介绍
实战 - 5分钟快速构建规范的前端项目骨架
实战 - 欲善其事先利其器 继续打磨前端架构
完善 - 手把手教你快速构建网站布局