使用Vue快速开发单页应用－主体结构

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

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

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

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

vue-cnode demo

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

vue-cli

自从node的兴起&＃xff0c;前端项目中就开始出现各种预处理工具&＃xff0c;当我们开始一个新项目时&＃xff0c;我们都会先编写一些预处理文件&＃xff0c;和构建项目目录。

而vue-cli就是为了做这方面工作的&＃xff0c;生成一套提前定义好的构建文件&＃xff0c;和相应的文件。

vue-cli有5个对应的项目结构。我们使用的是vue-webpack-boilerplate。

$ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev

执行上面命令后&＃xff0c;我们将生成下面的文件结构&＃xff0c;并开一个服务&＃xff0c;你可以打开http://localhost:8080看看。

文件结构

具体的使用建议看文档。

项目结构

如果你之前就了解vue和vue-router&＃xff0c;可以先看这部分。如果你了解vue不了解vue-router,可以先看这篇文章vue-router。如果你连vue都不是很理解我建议&＃xff0c;抽5个小时左右把文档教程过一遍。

你可以看到项目根目录下面有一个html&＃xff0c;仅有的一个html。

项目结构

上图的结构是我自己琢磨的&＃xff0c;主要是结合vue-router、vuex两使用方法来考虑的。另外对于组件的复用&＃xff0c;将一些功能组件和全局组件都放在根部&＃xff0c;通过vuex来控制组件属性实现一些功能。

下面我就结构由上至下的介绍。

main.js

main.js 是我们的入口文件&＃xff0c;主要作用是初始化vue实例并使用需要的插件。

import Vue from &＃39;vue&＃39; import App from &＃39;./App&＃39; import VueRouter from &＃39;vue-router&＃39; import VueResource from &＃39;vue-resource&＃39; import filter from &＃39;./filter&＃39; import store from &＃39;./vuex/store&＃39; import { sync } from &＃39;vuex-router-sync&＃39; import { configRouter } from &＃39;./config_router&＃39; import resourceGlobalSet from &＃39;./resource_set&＃39;Vue.use(VueResource) Vue.use(VueRouter) // 初始化自定义过滤器 Vue.use(filter)const router &＃61; new VueRouter({history: true,saveScrollPosition: true }) configRouter(router) Vue.http.options.emulateJSON &＃61; true Vue.http.interceptors.push(resourceGlobalSet) // ajax 拦截sync(store, router) router.start(App, &＃39;app&＃39;)

就如同上面所示&＃xff0c;主要是使用和配置相应插件&＃xff0c;并初始化一个vue&＃xff0c;上面的初始化在router.start(App, &＃39;app&＃39;)&＃xff0c;是以App.vue为组要组件&＃xff0c;并以html中的为挂载替换点。

APP.vue

App.vue是我们的主组件&＃xff0c;所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

下面是App.vue的template

你可以看到route-view和其它全局功能组件&＃xff0c;全局组件在一个层级。

另外由于APP.vue在所有页面都有&＃xff0c;我们将会在APP.vue上面写一些初始化全局方法。

router

router 是具体的业务组件&＃xff0c;比如index,login,content等组件都是具体业务相关的。下面就是再和业务相关的组件。

全局组件

全局组件是页面共用的部分&＃xff0c;比如header&＃xff0c;footer&＃xff0c;navbar&＃xff0c;你可能在想如果我有一些header是独特的怎么办&＃xff0c;这种情况下可以通过路由做判断&＃xff0c;渲染不同的html&＃xff0c;如果判断条件不是路由&＃xff0c;也可以在vuex写一个store记录组件的state。

功能组件

功能组件是比如dialog,tip等组件&＃xff0c;是用来与用户交互的。

通常情况下&＃xff0c;功能组件是各个组件都需要的一些组件。在一个页面里如果有两个组件&＃xff0c;两个组件都同时引了一个tip组件作为子组件是纯在的。为了避免这种情况&＃xff0c;我们将功能组件提到App.vue然后通过vuex进行组件交互&＃xff0c;从而就讲一个功能组件变成了全局方法。