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，不废话，直接上图。

安装

1.我们将会使用webpack去为我们的模块打包，预处理，热加载。如果你对webpack不熟悉，它就是可以帮助我们把多个js文件打包为1个入口文件，并且可以达到按需加载。这就意味着，我们不用担心由于使用太多的组件，导致了过多的HTTP请求，这是非常有益于产品体验的。但我们并不只是为了这个而使用webpack，我们需要用webpack去编译.vue文件，如果没有使用一个loader去转换我们.vue文件里的style、js和html，那么浏览器就无法识别。

2.模块热加载是webpack的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。

通常来说，当我们修改了代码刷新页面，那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的，因为需要重新在跑一遍流程。如果有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，所以状态也会被保留。

3.Vue也为我们提供了CSS预处理，所以我们可以选择在.vue文件里写LESS或者SASS去代替原生CSS。

4.我们过去通常需要使用npm下载一堆的依赖，但是现在我们可以选择Vue-cli。这是一个vue生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目，而它就可以很快地为我们生成。

首先，安装vue-cli。(确保你有node和npm)

然后创建一个webpack项目并且下载依赖

接着使用 npm run dev 在热加载中运行我们的应用

这一行命令代表着它会去找到 package.json 的 scripts 对象，执行 node bulid/dev-server.js 。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在 localhost:8080 即可查看我们的应用。

这些都准备好后，我们需要为我们的路由、XHR请求、数据管理下载三个库，我们可以从vue的官网中找到他们。另外我们使用 bootstrap 作为我的UI库

初始化（main.js）

查看我们的应用文件，我们可以在src目录下找到 App.vue 和 main.js 。 main.js将会作为我们应用的入口文件而 App.vue 会作为我们应用的初始化组件。先让我们来完善下 main.js

rush:js;"> // src/main.js import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource'

import App from './App'
import Home from './components/Home'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(VueRouter)
Vue.use(VueResource)

const routes = [{
path : '/',component : Home
},{
path : '/home',component : Home
}];

const router = new VueRouter({
routes
});

/ eslint-disable no-new /
// 实例化我们的Vue
var app = new Vue({
el: '#app',router,...App,});

这有两个与1.0不同的地方

一、 vue-router 路由的参数由对象统一变为了数组要注意。还有则是实例化vue的el 参数已经不能设置 html 和 body 了，因为在 vue2 中是会替换我们指定的标签

二、我们必须在实例化vue的时候指定渲染什么组件，以前我们是通过路由来指定如router.start(App,'#app') ，而在vue2中则不需要了

可以发现我们在 main.js 里使用了两个组件 App.vue 和 Home.vue ，稍后让我们具体实现它们的内容。

而我们的 index.html 只需要保留

即可，我们的Vue在实例化时设置了 el : '#app' 所以会替换这标签，为我们 App 组件的内容

rush:xhtml;"> //index.html

我们的初始化就到这结束了，接下来让我们开始创建组件。

创建首页组件

首先我们在App.vue里为我们的应用写个顶部导航。

rush:xhtml;"> // src/App.vue

除了我们的 navbar 以外，我们还需要一个 .container 去放我们其余需要展示的信息。

并且在这里我们要放一个 router-view 标签， vue-router 的切换就是通过这个标签开始显现的。

在这有个与1.0不同的地方

以前我们可以直接通过写a标签 然后写v-link属性进行路由跳转，在vue2中改为了写 标签再写对应属性（to）进行跳转

接着，我们需要创建一个 Home.vue 作为我们的首页

rush:xhtml;"> // src/components/Home.vue

不出意外的话，你可以看见如下效果

创建侧边栏组件

目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。

rush:xhtml;"> // src/App.vue

//...

<div class="container">
<div class="col-sm-3">

//...

rush:js;">

在 Sidebar.vue 我们需要通过store去获取总时间，我们的总时间是共享的数据

rush:xhtml;"> // src/components/Sidebar.vue

创建计划列表组件

然后我们需要去创建我们的时间跟踪列表。

rush:xhtml;"> // src/components/TimeEntries.vue

关于template的解释，都写在一起了，再看看我们的 script

<div class="jb51code">
<pre class="brush:js;">
// src/components/TimeEntries.vue