使用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创建一个时间跟踪的单页应用，希望对大家有所帮助