spa 标签

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