bob体育官方平台
bob体育官方平台使用Vue.js创建一个时间跟踪的单页应用_vue.js_脚本之家

Vue.js很简单。正因为如此简单,人们常常认为其适合于小项目。虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA。

Vue2 的 SPA 相关功能和组件:

SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应。还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的。

  • vue-loader:让 Webpack 支持 Single File Components 的模块载入器
  • Single File Components:在 SPA 中,可以方便得把 HTML, JS, CSS 都写在一个文件里面的一种 Component 机制
  • vue-router:Vue 的路由层,不需要重新载入页面就可以加载数据和显示页面
  • vuex:Vue 的状态管理器:自己进行简单的状态共享和使用 Vuex 进行共享并没有多大区别,Vuex 最大的优点在于它为你形式化了集中处理数据存储的过程,并提供了所有功能方法去处理那些数据。

从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应用程序。通常,我们需要处理路由,数据获取和持久性,查看渲染和必要的构建设置,以便于模块化代码库。

vue-loader

vue-loader 的主要功能包括:

  • ES2015 enabled by default;
  • Allows using other Webpack loaders for each part of a Vue component, for example SASS for <style> and Jade for <template>;
  • Allows custom sections in a .vue file that can have custom loader chains applied to them
  • Treat static assets referenced in <style> and <template> as module dependencies and handle them with Webpack loaders;
  • Can simulate scoped CSS for each component;
  • Supports component hot-reloading during development.

对于基于Vue.js的SPA,下面工具将帮助你:

Single File Components

由于 SPA 的时候,页面中的元素大部分都是动态载入的,所以模块化是必然的选择,在一个页面中同时撰写 HTML,JS,CSS 也可以让页面逻辑解耦的好选择

1.视图层:Vue.js

vue-router

Vue 的路由系统,SPA 应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中,则是路径之间的切换,也就是组件的切换

2.路由:vue-router,Vue的官方路由器

vuex

专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

后面会在实际的使用过程中,继续完善此份文档~

3.状态管理:vuex,受Flux/Redux启发的状态管理解决方案

4.服务通讯:vue-resource这是和RESTful后端交互的接口

5.构建工具:Webpack和vue-loader进行模块 热刷新ES2015和预处理器等重要的组件

视图层

本系列假设您已经熟悉Vue.js的基础知识,将Vue.js用于大型SPA时的核心概念是:将应用程序分为许多嵌套的自定义组件。在数据流的组件熟悉props和通讯定义事件直接进行平衡设计,将复杂组件切分为小型解耦的单元,更易于维护。

路由器

官方VUE路由器库处理客户端的路由,同时支持哈希模式和HTML5的历史模式。它与独立路由库有点不同,它与Vue.js深度集成,并假设我们将嵌套路由映射到嵌套Vue组件。

当使用vue-router时,我们将组件作为“pages”实现,使用这些组件能够实现党路由变化时,钩子函数被调用。

状态管理

返回顶部