摘要：本文以及后面相应文章，主要是相关技术栈来快速的实现单页应用开发。原文出处其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信
本文所涉及代码全在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.jsmain.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的子组件。所以我将router标示为App.vue的子组件。
下面是App.vue的template
你可以看到route-view和其它全局功能组件，全局组件在一个层级。
另外由于APP.vue在所有页面都有，我们将会在APP.vue上面写一些初始化全局方法。
routerrouter 是具体的业务组件，比如index,login,content等组件都是具体业务相关的。下面就是再和业务相关的组件。
全局组件全局组件是页面共用的部分，比如header，footer，navbar，你可能在想如果我有一些header是独特的怎么办，这种情况下可以通过路由做判断，渲染不同的html，如果判断条件不是路由，也可以在vuex写一个store记录组件的state。
功能组件功能组件是比如dialog,tip等组件，是用来与用户交互的。
通常情况下，功能组件是各个组件都需要的一些组件。在一个页面里如果有两个组件，两个组件都同时引了一个tip组件作为子组件是纯在的。为了避免这种情况，我们将功能组件提到App.vue然后通过vuex进行组件交互，从而就讲一个功能组件变成了全局方法。
自定义插件vue还能自己写插件。对于一些公用的方法和逻辑，我们可以提出来写在插件里面。
小节可以看到，我们项目整体结构非常清晰。入口加载初始化，主组件挂载路由全局控制，然后全局组件、功能组件借助vuex进行数据控制。
原文出处: http://hiluluke.cn/2016/08/04...
其他
使用Vue快速开发单页应用－主体结构
使用Vue快速开发单页应用－vue-router
使用Vue快速开发单页应用－登录页面
使用Vue快速开发单页应用－功能组件与路由组件通信
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80174.html
摘要：展示信息展示时间结束后，执行回调函数如果有上面就完成了组件的整套逻辑，最后我们还需要把组件挂在。原文链接其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信 本文所涉及代码全在vue-cnode showImg(https://segmentfault.com/image?src=http://7fvhwe.com1...
摘要：当前路由对象调用此函数处理切换过程的下一步终止切换重定向到另一个路由由于是路由切换后，只有上面的两个属性。原文地址其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信 本文所涉及代码全在vue-cnode vue-router主要作用是将路由控制，转移到前端。我们将会在vue-router里面保存一个路由表，在vue...
摘要：首先我们从登录页面以及开始，因为后续很多其它的页面都需要登录信息。大家还是看看我这做个指引，具体还是看代码原文地址其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信 本文所涉及代码全在vue-cnode 前面两篇都是介绍组织结构和vue-router，从本文开始我们将讲一些如何优雅的用vue编写单页应用。首先我们从...
摘要：趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把这套基于的单页应用模板简单的给介绍一下。同时也是一套可扩展的单页应用开发模板。 趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下。 首发于个人博客；blog.lxstart.net项目路径: https://github.com/N3-co...
摘要：趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把这套基于的单页应用模板简单的给介绍一下。同时也是一套可扩展的单页应用开发模板。 趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下。 首发于个人博客；blog.lxstart.net项目路径: https://github.com/N3-co...
阅读 2373·2021-09-30 09:47
阅读 1365·2021-09-28 09:35
阅读 3236·2021-09-22 15:57
阅读 2483·2021-09-22 14:59
阅读 3632·2021-09-07 10:25
阅读 3068·2021-09-03 10:48
阅读 3034·2021-08-26 14:14
阅读 931·2019-08-30 15:55
