使用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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
DWR中各种java方法的调用
May 04 Javascript
js a标签点击事件
Mar 30 Javascript
Vuex简单入门
Apr 19 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
vue-loader教程介绍
2017/06/14 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python计算IV值的示例讲解
2020/02/28 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
《蜗牛》教学反思
2014/02/18 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
市场营销求职信范文
2014/02/21 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
责任心演讲稿
2014/05/14 职场文书
有关浪费资源的建议书
2015/09/14 职场文书