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

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创建一个时间跟踪的单页应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 利用vue写todolist单页应用

    网上有很多关于vue的todolist小程序.大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习.所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习. 1.vue是啥? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很

  • 如何使用Vuex+Vue.js构建单页应用

    前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • vue2.0构建单页应用最佳实战

    前言 我们将会选择使用一些vue周边的库 vue-cli , vue-router , vue-resource , vuex 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 PS:本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vuex v2.0.0 最终我们将会构建出一个小demo

  • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

    概述 使用Vue2进行的仿手机QQ的webapp的制作,在ui上,参考了设计师kaokao的作品,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能--想着既然是QQ总要能进行对话交流,所以在项目中接入了图灵聊天机器人,可以与列表中的每个人物进行对话. 左滑删除--左滑删除相关消息. 搜索页面--点击右上角搜索按钮,能够进入

  • Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

    一.介绍 vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点,并且提供了很多的周边配套工具 如vue-router .vue-resource .vuex等等 ,通过他们我们可以很轻松的构建一个大型单页应用. 目前Vue版本为:Vue2.0 官网地址:http://vuejs.org.cn/ 查看API文档:https://vuefe.cn/v2/api/ 对比其他框架:http://vuejs.org.cn/guid

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

    Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

  • 一步步教你用Vue.js创建一个组件(附代码示例)

    目录 前言 到底什么是组件? 为什么你一定要使用组件 在Vue中创建一个组件 模板部分 脚本部分 选项API:旧的方式 合成API:现在和未来 风格部分 总结 前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最

  • 基于Vue.js与WordPress Rest API构建单页应用详解

    前言 Vue.js 是用于构建交互式的 Web 界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,我们将使用它来请求api. WordPress REST API为WordPress数据类型提供API端点,允许开发人员通过发送和接收JSON(JavaScript Object Notation)对象与站点进行远程交互 . demo需要实现功能 获取全部的文章列表 点击查

  • vue.js实现格式化时间并每秒更新显示功能示例

    本文实例讲述了vue.js实现格式化时间并每秒更新显示功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=

  • 利用Vue.js制作一个拼图华容道小游戏

    目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简

  • Vue.js实现一个todo-list的上移下移删除功能

    如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换

  • vue.js做一个简单的编辑菜谱功能

    先给大家展示下效果图,如果感觉不错,请参考实现代码 1.先获取门店下的所有菜品类型.菜品名称.菜品id(list),也就是最大数据量 this.$http.post(ceshiApi+'getCyFoodAndFoodTypeForShopId',{shopId:this.shopId},{emulateJSON:true,credentials: true}).then(function(res){ if(res.data.type=='success'){ this.foodList = r

  • Node.js创建一个Express服务的方法详解

    本文实例讲述了Node.js创建一个Express服务的方法.分享给大家供大家参考,具体如下: 1.创建一个HttpServer服务端 在node.js官网下载好node的Windows版本后一路下一步安装好了node,新建一个server.js文件,开始第一个node文件.首先在文件开头需要使用require包含所需要的模块,然后利用http.createServer创建一个server,并执行回调函数.在回调函数内对请求req进行处理,并返回res结果. 利用url的parse方法将req请

  • 如何使用vue slot创建一个模态框的实例代码

    [1]遮罩层:承载内容,管理样式布局. [2]内容层:控制遮罩层的显示与否. 遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦. 遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意.因此可以在遮罩层里采用插槽. 遮罩层的实现 <div class="common-mask" v-if="visible"> <slot name="head"><

  • 详解node.js创建一个web服务器(Server)的详细步骤

    前言 在 node.js 中创建一个服务器非常简单,只需要使用 node.js 为我们提供的 http 模块及相关 API 即可创建一个麻雀虽小但五脏俱全的web 服务器,相比 Java/Python/Ruby 搭建web服务器的过程简单的很. http model 要想创建一个基于 node.js 的 web 服务器,你就必须使用 node.js 提供的 http 模块,node.js 中的 http 接口旨在支持传统上难以使用的协议的许多特性, 特别是,大块的.可能块编码的消息,接口永远不会

随机推荐