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

前面两篇都是介绍组织结构和vue-router，从本文开始我们将讲一些如何优雅的用vue编写单页应用。首先我们从登录页面以及开始，因为后续很多其它的页面都需要登录信息。

路由，文件组织

首先我们第一步肯定是指定一条路由啦，在src/config_router.js里面增加一条路由

1
2
3
4
5
6
7
8
9
10
11

export function configRouter (router) {
  router.map({
    '/login': {
      name: 'login',
      title: '登录',
      // es6箭头函数
      component: (resolve) => require(['./components/login/login.vue'], resolve)
    }
  })

}

作为一名小前端，对于页面的优化肯定是有追求的。本文将利用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脚手架工具，下文会做介绍。

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

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

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

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