自动化部署hexo

By hiluluke on

作为一名小前端,对于页面的优化肯定是有追求的。本文将利用gulp来压缩hexo生成的文件,并利用npm命令自动部署我们的博客。

添加gulp

首先你需要全局安装gulp: npm install -g gulp

本文所涉及代码全在vue-cnode

vue-router主要作用是将路由控制,转移到前端。我们将会在vue-router里面保存一个路由表,在vue中具体通过调用提供的指令或则方法进行跳转。

其实吧,vue-router说白了就是一个插件,对外暴露的也就是指令和方法。如果只要求灵活用起来,我们需要学习的也就3个地方:

  • 配置路由
  • 指令
  • 方法

本文所涉及代码全在vue-cnode

单页应用,即在一个页面集成系统中所有功能,整个应用只有一个页面。因为路由的控制在前端,单页面应用在页面切换时比传统页面更快,从而在前端体验更好。

将逻辑从后端转移到前端,提升了性能减少了页面加载时间,前后逻辑更扁平。但是当页面复杂度变高时,你会发现,数据处理,UI交互将变得难以维护,所以应运而生,出现了很多MV框架和类库。Vue就是其中之一,个人觉得(非喜勿喷)Vue类库相对于其他MV框架上整体的api更为简洁,提供的api很平衡,解决了问题的同时,没有增加复杂度。另外个人觉得vue在大型应用,开发中使用vue-loader将组件分成template,style,script结构更为清晰。

本文以及后面相应文章,主要是vue相关技术栈来快速的实现单页应用开发。系列文章将以一个实际项目进行讲解,项目的github地址为:

vue-cnode demo

这是一个以cnodejs.org提供的api来开发的单页,主要使用的modules有vue、vue-router、vuex、vue-resource。为了快速开发,我们还使用了vue-cli脚手架工具,下文会做介绍。

BFC note

By hiluluke on

前几天和别人交流的时候,让实现这么一个布局:

双栏图片布局

大概就是上面这个样子。左边是一个图片,右边是文字区域。然后我给的大概实现方式是,左边图片高度宽度固定左浮动,然后右边div框起来左外边距等于图片宽度。

然后这个大兄弟马上说,图片高度宽度不知。我想了想,想起来了overflow:auto可以实现,就这样说了。大兄弟马上问我为啥,我懵逼了。

大兄弟一脸高深的告诉我:知道BFC不?(大兄弟人还是挺好的)

$.extend

  • 用途
    扩展对象属性。
    第一个参数如果是true就递归的将source给target。

    1
    2
    $.extend(target, [source, [source2, ...]]) ⇒ target
    $.extend(true, target, [source, ...]) ⇒ target v1.0+
  • 相关代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function extend(target, source, deep) {
    for (key in source)
    if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
    if (isPlainObject(source[key]) && !isPlainObject(target[key]))
    target[key] = {}
    if (isArray(source[key]) && !isArray(target[key]))
    target[key] = []
    extend(target[key], source[key], deep)
    }
    else if (source[key] !== undefined) target[key] = source[key]
    }
    // Copy all but undefined properties from one or more
    // objects to the `target` object.
    $.extend = function(target){
    var deep, args = slice.call(arguments, 1)
    if (typeof target == 'boolean') {
    deep = target
    target = args.shift()
    }
    args.forEach(function(arg){ extend(target, arg, deep) })
    return target
    }