使用Vue.js创建一个时间跟踪的单页应用


Posted in Javascript onNovember 28, 2016

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

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

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

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

1.视图层:Vue.js

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

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”实现,使用这些组件能够实现党路由变化时,钩子函数被调用。

状态管理

状态管理是只有当应用程序复杂性超过一定水平时才出现。当有多个组件需要共享可变的应用程序状态时,如果您的应用程序中没有专用于管理此类共享状态的层,则可能很难推理和维护。

服务器通信

在本案例中,我们会使用RESful后端,这是一个Go语言编写的 go-vue-event项目

构建工具

首先,整个编译工具链依靠的Node.js ,管理所有使用库包和工具依赖NPM 。 虽然NPM开始是Node.js后端模块的包管理器,但它现在也广泛用于前端包管理。 因为所有NPM包是使用CommonJS模块格式创建的,我们需要一个特殊的工具将这些模块“捆绑”到适合最终部署的文件中。 Webpack就是这样一个工具,你可能也听说过一个类似的工具Browserify。

我们将使用Webpack的系列,因为它提供了更多的高级功能开箱即用,如热重新加载,bundle-splitting和静态文件处理。

无论WebPACK中和Browserify它们暴露的API,使我们能够装载更多的CommonJS的模块:例如,我们可以直接require()的HTML文件通过将其转化成一个JavaScript字符串。

通过将你的前端的一切,包括HTML,CSS甚至图像文件看作为模块依赖,可以在捆绑过程中任意转换,Webpack实际上涵盖了构建SPA时遇到的大多数构建任务。 我们主要是要使用WebPACK和普通 NPM脚本 ,而不需要 任务运行器如Gulp或Grunt。

使用vue-loader 激活单页中Vue组件:

//app.vue
<template>
<h1 class="red">{{msg}}</h1>
</template>
export default{
data(){
return{
msg:'Hello world!'
}
}
}
<style>
.red{
color:#f00;
}
</style>

WebPACK和vue-loader组合能带来:

1.默认情况下ES2015。 这允许我们今天使用未来的JavaScript语法,产生更具表达性和简洁的代码。

2.预埋处理器 。 您可以在单文件Vue组件中使用预处理器,例如使用Jade作为模板,使用SASS作为样式。

3.Vue组件内部CSS输出将自动加前缀。 您也可以使用任何PostCSS插件,如果你喜欢。

4.作用域CSS。 通过增加一个scoped属性添加到<style> ,VUE-loader将通过重写模板和样式模拟输出,特定组件的范围内的CSS不会影响应用程序的其他部分。

5.热刷新 。在开发过程中编辑Vue组件时,组件将“热切换”到正在运行的应用程序中,在不重新加载页面的情况下维护应用程序状态。 这极大地提高了开发体验。

开始设置

现在有了所有这些花哨的功能,对于自己组装构建栈可能是一个非常艰巨的任务! 幸运的是,Vue公司提供vue-cli ,一个命令行界面,十分容易上手:

npm install -g vue-cli
vue init webpack my-project

回答提示,CLI具有开箱即用特点。 所有你需要做的下一步是:

cd my-project
npm install # install dependencies
npm run dev # start dev server at http://localhost:8080

以上所述是小编给大家介绍的使用Vue.js创建一个时间跟踪的单页应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
jquery分页对象使用示例
Apr 01 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
js拖拽功能实现代码解析
Nov 28 #Javascript
百度搜索框智能提示案例jsonp
Nov 28 #Javascript
JS函数多个参数默认值指定方法分析
Nov 28 #Javascript
ajax级联菜单实现方法实例分析
Nov 28 #Javascript
jQuery select自动选中功能实现方法分析
Nov 28 #Javascript
JS两种类型的表单提交方法实例分析
Nov 28 #Javascript
简单实现JavaScript图片切换效果
Nov 28 #Javascript
You might like
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
python中的内置函数getattr()介绍及示例
2014/07/20 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
np.dot()函数的用法详解
2020/01/17 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
我的求职择业计划书
2014/04/04 职场文书
公司寄语大全
2014/04/10 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
汉语拼音教学反思
2016/02/22 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS