使用Vue快速开发单页应用-阿里云开发者社区

开发者社区> keller.zhou> 正文

使用Vue快速开发单页应用

简介: 本文所涉及代码全在vue-cnode 单页应用,即在一个页面集成系统中所有功能,整个应用只有一个页面。因为路由的控制在前端,单页面应用在页面切换时比传统页面更快,从而在前端体验更好。
+关注继续查看

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

vue-cli

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

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

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

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

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

文件结构

具体的使用建议看文档

项目结构

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

你可以看到项目根目录下面有一个html,仅有的一个html。

项目结构

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

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

main.js

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

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

 

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

APP.vue

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

下面是App.vue的template

 
<template>
<div id="app">
<cn-header></cn-header>
<sidebar></sidebar>
<router-view></router-view>
<tip></tip>
<loading></loading>
</div>
</template>

 

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

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

router

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

全局组件

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

功能组件

功能组件是比如dialog,tip等组件,使用来与用户交互的。

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

自定义插件

vue还能自己写插件。对于一些公用的方法和逻辑,我们可以提出来写在插件里面。

小节

可以看到,我们项目整体结构非常清晰。入口加载初始化,主组件挂载路由全局控制,然后全局组件功能组件借助vuex进行数据控制。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Java JdbcTemplate对mySQL进行CRUD增删改查操作
使用Java JdbcTemplate对mySQL进行CRUD增删改查操作
6 0
ava Spring Beans.xml里的Bean定义是如何被解析出来的
ava Spring Beans.xml里的Bean定义是如何被解析出来的
4 0
SAP Cloud for Customer的Container应用设计原理
SAP Cloud for Customer的Container应用设计原理
4 0
FireFox使用百度网盘插件
FireFox使用百度网盘插件
3 0
Angular ɵɵelementStart和ɵɵText的工作原理
Angular ɵɵelementStart和ɵɵText的工作原理
4 0
linux cpu飙高原因排查(有手就行)
其实我们现在已经知道是谁把cpu拉高了,但还不够细,只知道哪个项目出的问题远远不够,我们应该找到罪魁祸首,到底是哪个方法的多少行导致的问题,这才能让老大直呼内行
5 0
如何自定义SAP Spartacus店铺的界面颜色风格
如何自定义SAP Spartacus店铺的界面颜色风格
5 0
Angular如何判断某个DOM节点包含Directive
Angular如何判断某个DOM节点包含Directive
3 0
Spring框架里解析配置文件的准确位置
Spring框架里解析配置文件的准确位置
4 0
关于 SAP Spartacus OAuth 2.0 Resource Owner Password Flow 实现的一些讨论
关于 SAP Spartacus OAuth 2.0 Resource Owner Password Flow 实现的一些讨论
3 0
+关注
89
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载