单页

文章摘自：https://github.com/xufei/blog/issues/5#issuecomment-136962500 单页应用：优点和缺点 http://stackoverflow.com/questions/21862054/single-page-application-advantages-and-disadvantages 单页应用是什么？ 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型

让我们先来看几个站点： coding（ https://coding.net/ ） teambition（ https://www.teambition.com/ ） cloud9（ https://c9.io/ ） 注意这几个站点的相同点。那就是在浏览器中，做了原先“应当”在client做的事情。 它们的界面切换非常流畅，响应非常迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用。指的是在一个页面上集成多种功能。甚至整个系统就仅仅有一个页面，全部的业务功能都是它的子模块，通过特定的方式挂接到主界面上。 它是AJAX技术的进一步升华。把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 事实上单页应用我们并不陌生，非常多人写过ExtJS的项目。用它实现的系统。非常天然的就已经是单页的了。也有人用jQuery或者其它框架实现过相似的东西。 用各种JS框架。甚至不用框架。都是能够实现单页应用的。它仅仅是一种理念。有些框架适用于开发这种系统。假设使用它们，能够得到非常多便利。 开发框架 ExtJS能够称为第一代单页应用框架的典型，它封装了各种UI组件。用户主要使用JavaScript来完毕整个前端部分，甚至包含布局。 随着功能逐渐添加，ExtJS的体积也逐渐增大。即使用于内部系统的开发。有时候也显得笨重了

一、开发框架 　　ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 　　jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统，整个解决方案会相对比较轻量、灵活。 　　但由于jQuery主要面向上层操作，它对代码的组织是缺乏约束的。如何在代码急剧膨胀的情况下控制每个模块的内聚性，并且适当在模块之间产生数据传递与共享，就成为了一种有挑战的事情。 　　为了解决单页应用规模增大时候的代码逻辑问题，出现了不少MV*框架，他们的基本思路都是在JS层创建模块分层和通信机制。有的是MVC，有的是MVP，有的是MVVM，而且，它们几乎都在这些模式上产生了变异，以适应前端开发的特点。 　　这类框架包括Backbone，Knockout，AngularJS，Avalon等。 二、 组件化 　　这些在前端做分层的框架推动了代码的组件化，所谓组件化，在传统的Web产品中，更多的指UI组件，但其实组件是一个广泛概念，传统Web产品中UI组件占比高的原因是它的厚度不足，随着客户端代码比例的增加，相当一部分的业务逻辑也前端化

浅谈单页应用和多页应用——Vue.js向 多页面 多页面应用：每次页面跳转，后台都会返回一个新的HTML文档，就是多页面应用。 在以往传统开发的应用（网站）大多都是多页面应用，路由由后端来写。 页面跳转=》返回HTML，优点：首屏时间快，SEO效果好，缺点是页面切换慢。 首屏时间快？访问页面，服务器只需要返回一个HTML文件，这个过程就经历了一个HTTP请求，请求响应回来，页面就能被展示出来。 SEO（搜索引擎排名）效果好？搜索引擎能识别HTML的内容，根据内容进行排名。 页面切换慢：每一次切换页面都需要发起一个HTTP请求，假设网络较慢就会出现卡顿情况。 单页面 单页应用：用vue写的项目是单页应用，刷新页面会请求一个HTML文件，切换页面的时候，并不会发起新的请求一个HTML文件，只是页面内容发生了变化 vue.js原理：JS感知URL变化，当URL发生变化后，使用JS动态把当前的页面内容清除掉，再把下一个页面的内容挂载到页面上。此时的路由就不是后端来做了，而是前端来做，判断页面到底显示哪一个组件，再把以前的组件清除掉使用新的组件。就不会每一次跳转都请求HTML文件。 页面跳转 =》 JS渲染，优点页面切换快，缺点首屏时间稍慢，SEO差 首屏时间慢？请求HTML还有JS的请求。（在此我想问：HTML里面不也有JS请求嘛？这一点是在看知乎上某个大神说的，没明白

多页面应用 一个项目是由多个完整的html页面组成， 每一次页面跳转的时候，后台服务器都会给返回一个新的HTML文档，页面跳转所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等。这种类型的网站也就是多页网站，也叫做多页应用。 为什么多页应用的首屏时间快？ 首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。 为什么搜索引擎优化效果好（SEO）？ 搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在 Html 中，所以这种多页应用，seo排名效果好。 但是它也有缺点，就是切换慢 因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。 单页面应用 一个项目中只有一个完整的html页面，其他的都是部分的html片段组成。页面跳转只是局部刷新，不会重新加载全部资源。片段之间的切换快，比较容易实现转场动画。 第一次进入页面的时候会请求一个HTML文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的HTML文件请求，页面内容也变化了。 原理是：JS会感知到url的变化，通过这一点

观点一 1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起； 2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍； 3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端； 缺点： 1、SEO问题，现在可以通过Prerender等技术解决一部分； 2、前进、后退、地址栏等，需要程序进行管理； 3、书签，需要程序来提供支持； 观点二： 优点： 1、具有桌面应用的即时性、网站的可移植性和可访问性。 2、用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。 3、基于上面一点，SPA相对对服务器压力小。 4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。 5、对前端人员javascript技能要求更高，促使团队技能提升。 缺点： 1、不利于SEO。 2、初次加载耗时相对增多。 3、导航不可用，如果一定要导航需要自行实现前进、后退。 4、对开发人员技能水平、开发成本高 观点三： 1、优点，很酷，这点对吧。 有人说体验好，我不是很认同，因为过多的ajax，会让页面抖动的厉害，这点很含糊，不足为凭。 最根本的优点是高效。它对服务器压力很小 ，我私下里想

内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的app应用 vuetify ★2925 - 为移动而生的Vue JS 2组件框架 Keen-UI ★2749 - 轻量级的基本UI组件合集 vonic ★1913 - 快速构建移动端单页应用 vue-multiselect ★1539 - Vue.js选择框解决方案 eme ★1529 - 优雅的Markdown编辑器 vueAdmin ★1455 - 基于vuejs2和element的简单的管理员模板 bootstrap-vue ★1267 - 应用于Vuejs2的Twitter的Bootstrap 4组件 Vue.Draggable ★1191 - 实现拖放和视图模型数组同步 eagle.js ★1128 - hacker的幻灯片演示框架 vue-awesome-swiper ★1012

一、前言 现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。 在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 二、webpack的原理 知其然知其所以然。 1、核心概念 （1）entry：一个可执行模块或者库的入口。 （2）chunk：多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk，这是打包。 （3）loader：文件转换器。例如把es6转为es5，scss转为css等 （4）plugin：扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook，添加功能。 2、webpack构建流程（原理） 从启动构建到输出结果一系列过程： （1）初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果。 （2）开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。 （3）确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去。

Vue.js（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。 相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。 正式因为Vue.js具有易用、灵活、高性能和渐进式等特点， 才使得Vue.js成为当前三大流行的JavaScript 框架之一。 工欲善其事，必先利其器。Vue的快速发展和崛起也得益于其快速发展的社区环境。为了实现快速的迭代，Vue社区涌现出了一大批的开源项目，借助这些开源项目，我们可以实现快速的迭代升级。 UI组件 element ★34,784 - 饿了么出品的基于Vue2的web UI工具套件 storybook ★33,503 - 响应式UI 开发及测试环境 Vux ★15,061 - 基于Vue和WeUI的组件库 mint-ui ★13,381 - Vue 2的移动UI元素 iview ★19,629 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★3,615 - 轻量级的UI组件合集 vue-material ★7,542 -

作为vue的初级使用者，在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题，当一个页面滚动了，点击页面上的路由调到下一个页面时，跳转后的页面也是滚动的，滚动条并不是在页面的顶部。 最开始我使用了一个很笨的方法，每个页面上都加上window.scrollTop(0,0);来解决问题，但是这个太繁琐了。最后和小伙伴们商量了一下，在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳转后就不会出现滚动的问题了。 但是这种做法是不友好的，我们可以使用 scrollBehavior (to , from , savedPosition) {}来解决问题。 在我们写路由的时候做个处理，如下 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve => require(['../components/HelloWorld.vue'],resolve) } ],