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

上图是我们demo项目的整体结构，我们可以看见在第三级有三个东西router,全局组件，功能组件。其中全局组件和功能组件是脱离于router的，因为这两部分是所有逻辑组件共有的。我们将他提出来，放在App.vue里面而不是放在router下面的路由组件中，是为了只引用一次然后全局调用。

但是，具体的路由逻辑组件需要展现的全局组件内容是不一样的，需要功能组件交互的内容也不一样，所以需要在不同的路由逻辑组件中对全局组件和功能组件进行控制。

本文就是介绍如何通过vuex对全局组件和功能组件进行控制的。

本文所涉及代码全在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)
    }
  })

}

本文所涉及代码全在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脚手架工具，下文会做介绍。