单页

一、Vue Loader介绍 　　Vue Loader 是一个 webpack 的loader，它允许你以一种名为 单文件组件（SFCs）的格式撰写 Vue 组件。官方文档地址如下所示： 　　 Vue Loader v15及以上版本官方文档地址 　　 Vue Loader v14 或更早的版本官方文档地址 1、vue-loader 特性 默认支持 ES2015； 允许对Vue组件的组成部分使用其他 webpack loader，比如对<style> 使用Sass 和对 <template> 使用 Jade; 将 <style> 和 <template> 中的静态资源当作模块来对待，并使用 webpack loader 进行处理； 对每个组件模拟出 CSS 作用域； 支持开发期组件的热重载。 　　简言之，编写 Vue.js 应用程序时，组合使用 webpack 和 vue-loader 能带来一个现代、灵活并非常强大的前端工作流程。 二、项目示例 1、项目准备和组件安装 　　将 webpack-dev-server 项目复制为 single-file，安装 vue-loader 组件： $ npm install vue-loader@14.2.4 -D 　　安装vue的模板解析器: vue-template-compiler，注意要安装对应的版本号，才能适配。 $ npm

定义： 　　单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 　　通俗点来讲，在应用整个使用流程里浏览器由始至终没有刷新，所有的数据交互由ajax完成。但是用户体验起来和app一样，有明确的页面区分，即所谓的web app。 　　浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。 特点： 　　速度：更好的用户体验，让用户在web app感受native app的速度和流畅， 　　MVC：经典MVC开发模式，前后端各负其责。 　　ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。 　　路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。 优点： 　　1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起； 　　2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍； 　　3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端； 缺点：

一、定义 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。 二、优缺点 单页Web程序的出现是富客户端发展的必然结果，但是该技术也是有些局限性，所以采用之前需要了解清楚它的优缺点。 1、优点： 1).良好的交互体验 用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。 2).良好的前后端工作分离模式 单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。 3).减轻服务器压力 服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍； 4).共用一套后端程序代码 不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端； 2、缺点： 1).SEO难度较高

　　最近一直在学习关于Vue的一些知识，由于遇到了问题，去网上查找资料，收获颇丰，在此分享。 1. 什么是SPA？ 　　单页Web应用（single page web application, SPA）,就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序，是指在浏览器中运行的应用，在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。 　　速度：更好的用户体验，让用户在web app感受native app的速度和流畅， 　　MVC：经典MVC开发模式，前后端各负其责，后端只需要提供数据接口 　　ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。 　　路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载，这个也就是哈希。 　　 　　SPA也是当今网站开发技术的一种趋势和潮流，毕竟前端三大框架不是盖的~~，很多的传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动端平台上面的）也雨后春笋涌现出来。 　　单页Web应用和前端工程师们息息相关，因为主要的变革发生在浏览器端，用到的技术其实还是HTML+CSS+JavaScript，所有的浏览器都原生支持

　　网页设计师努力寻找新的方式来展现内容。其中一个大的趋势是单页网站，现在被世界上的一些大的品牌广泛采用，使用它们来为用户提供一个快速，干净和简单的而且​​美丽的网站。 　　下面是10个令人惊叹的单页 H​​TML5 的网站，涵盖了简约设计，简单导航和视差滚动的综合应用。 您可能感兴趣的相关文章 经典网页设计：超炫动画效果单页网站 30个独具匠心的精美单页网站设计案例 25个以全屏照片为背景的精美网页作品 20个与众不同的网页联系表单设计案例 20个模糊背景在网站中的经典应用案例 Every Last Drop Marty.com Oakley Airbrake MX Scroll for your health Kinderfotografie Evi Hermans CoolApps numéro10 Air Jordan 2012 Laura Baffari Activate 您可能感兴趣的相关文章 那些让人惊叹的的国外创意404错误页面设计 让人爱不释手的精美 Web 应用程序图标素材 赞！10套精美的免费网站后台管理系统模板 期待已久的2012年度最佳 jQuery 插件揭晓 10大流行的 Metro UI 风格 Bootstrap 主题 本文链接： 你应该知道的10个奇特的 HTML5 单页网站作品 编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源 来源

内容 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

趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下。 首发于个人博客； blog.lxstart.net 项目路径: https://github.com/N3-compone... ps: 本项目不同于vue-admin等模板项目介绍大量的组件，基础组件的用法请参考： https://n3-components.github.... <!-- more --> 1、概述 首先N3-admin是一个基于vue / vuex / vue-router / N3 / axios 的单页应用，适用于单页应用的快速上手，并不仅限于N3-components的使用，而是提供一个 比较完善的项目构建的思路和结构 ，提供给初学者学习。同时也是一套可扩展的Vue单页应用开发模板。 项目工程基于Vue-cli，因此大部分同学都能快速上手和理解，往下介绍一下特性和结构。 2、特性 [x] 项目工程相关 [x] 开发环境；静态文件服务器、HTTP代理、热更新 [x] 生产构建：代码编译提取压缩合并混淆hash命名base64~ [x] eslint [x] babel [x] webpack 2.x [x] vue [x] 组件分级 [路由级组件、复用型组件、基础组件(N3)] [x] Vue扩展 [filters

最近用vue+vue-router做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践 全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import这个配置来引用颜色。 示例代码：define.scss $bgColor: #fff; $color:#619eee; $fontColor:#333333; $fontColor01:#A5A5A5; $fontColor02:#4a4a4a; $fontColor03:#448CFF; $color300:#ed5630; $color3001:#fbfbfb; $accpetColor:#2fbe27; $refusedColor: #de0101; $hrefColor:#4a90e2; $redColor:#ff4c4c; 好处： 方便维护整站的色彩风格，后续遇到VI升级改版等，你就偷着乐吧。 vue，vue-router单独抽出来，用script标签引入 bad case npm install vue npm install vue-router //js import Vue from 'vue' import VueRouter from 'vue-router' good case <script src="/path/to

构建单页Web应用 摘自 前端农民工的博客 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统

摘自 前端农民工的博客 让我们先来看几个网站： coding teambition cloud9 注意这几个网站的相同点，那就是在浏览器中，做了原先“应当”在客户端做的事情。它们的界面切换非常流畅，响应很迅速，跟传统的网页明显不一样，它们是什么呢？这就是单页Web应用。 所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。 其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。 开发框架 ExtJS可以称为第一代单页应用框架的典型，它封装了各种UI组件，用户主要使用JavaScript来完成整个前端部分，甚至包括布局。随着功能逐渐增加，ExtJS的体积也逐渐增大，即使用于内部系统的开发，有时候也显得笨重了，更不用说开发以上这类运行在互联网上的系统。 jQuery由于偏重DOM操作，它的插件体系又比较松散，所以比ExtJS这个体系更适合开发在公网运行的单页系统