谭俊杰的技能-Vue构建单页应用最佳实战

##前言

我们将会选择使用一些vue周边的库

1. 使用node.js后台，了解到如何获取数据
2. 实现单页路由
3. 实现HTTP请求我们的node
4. 单项数据流
5. 使用.vue文件进行开发

最终我们将会构建出一个小demo，不废话，直接上图。
Vue构建单页应用最佳实战_

##安装

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)
```
npm i -g vue-cli
```
然后创建一个webpack项目并且下载依赖
```
vue init webpack vue-time-tracker
cd vue-time-tracker
npm i
```
接着使用 npm run dev 在热加载中运行我们的应用

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

这些都准备好后，我们需要为我们的路由和XHR请求下载两个库，我们可以从vue的官网中找到他们。
```
npm i vue-resource vue-router --save
```

###初始化（main.js）
查看我们的应用文件，我们可以在src目录下找到App.vue和main.js。在main.js文件中，我们引入Vue和App，并且创建了一个vue的实例（因为在router这行引入了App组件router.start(App, '#app')）
```
// src/main.js

import Vue from 'vue'
import App from './App.vue'
import Hello from './components/Hello.vue'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

//注册两个插件
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter()

// 路由map
router.map({
  '/hello': {
    component: Hello
  }
})

router.redirect({
  '*': '/hello'
})

router.start(App, '#app')
```
我们还需要在index.html包裹下我们的<app></app>
```
//index.html

<div id="app">
    <app></app>
</div>
```
我们的初始化就到这结束了，接下来让我们开始创建别的组件。

###创建首页 View
首先，我们需要为我们的应用增加下bootstrap.css，为了方便，在这就直接在头部引入CDN。
```
<head>
  <meta charset="utf-8">
  <title>计划板</title>
  <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
```
接着在App.vue里为我们的应用写个顶部导航。
```
// src/App.vue

</div>
      <div class="col-sm-9">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
```
除了我们的navbar以外，我们还需要一个.container去放我们其余需要展示的信息。
并且在这里我们要放一个router-view标签，vue-router的切换就是通过这个标签开始显现的。

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

<template>
  <div class="jumbotron">
    <h1>任务追踪</h1>
    <p>
      <strong>
        <a v-link="'/time-entries'">创建一个任务</a>
      </strong>
    </p>
  </div>
</template>
```
既然我们需要显示Home，那就需要开始配置路由，这很简单，只需要在main.js里把Hello.vue换为Home.vue即可
```
//...
router.map({
  '/Home': {
    component: Home
  }
})

router.redirect({
  '*': '/Home'
})
```
Vue构建单页应用最佳实战_

###创建 任务列表 View
在这个页面，我们需要去创建我们的时间跟踪列表。

PS:现在这个页面没有数据，之后我们会在后台配置

```
// src/components/TimeEntries.vue

<template>
  <div>
    //`v-if`是vue的一个指令
    //`$route.path`是当前路由对象的路径，会被解析为绝对路径当
    //`$route.path !== '/time-entries/log-time'`为`true`是显示，`false`，为不显示。
    //v-link 路由跳转地址
    <button
      v-if="$route.path !== '/time-entries/log-time'"
      v-link="'/time-entries/log-time'"
      class="btn btn-primary">
      创建
    </button>

<hr>

//下一级视图
    <router-view></router-view>

<div class="time-entries">
      <p v-if="!timeEntries.length"><strong>还没有任何任务</strong></p>

<div class="col-sm-2 user-details">
            //`:src`属性，这个是vue的属性绑定简写`v-bind`可以缩写为`:`
            // 比如a标签的`href`可以写为`:href`
            //并且在vue的指令里就一定不要写插值表达式了(`:src={{xx}}`)，vue自己会去解析
              <img :src="timeEntry.user.image" class="avatar img-circle img-responsive" />
              <p class="text-center">
                <strong>
                  {{ timeEntry.user.name }}
                </strong>
              </p>
            </div>

<div class="col-sm-2 text-center time-block">
              <h3 class="list-group-item-text total-time">
                <i class="glyphicon glyphicon-time"></i>
                {{ timeEntry.totalTime }}
              </h3>
              <p class="label label-primary text-center">
                <i class="glyphicon glyphicon-calendar"></i>
                {{ timeEntry.date }}
              </p>
            </div>

<div class="col-sm-7 comment-section">
              <p>{{ timeEntry.comment }}</p>
            </div>

</div>
        </a>

</div>
    </div>
  </div>
</template>
```
关于template的解释，都写在一起了，再看看我们的script
```
// src/components/TimeEntries.vue

export default {
    data () {
      // 事先模拟一个数据
      let existingEntry = {
        user: {
          name: '二哲',
          email: 'kodo@forchange.cn',
          image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
        },
        comment: '我的一个备注',
        totalTime: 1.5,
        date: '2016-05-01'
      }

return {
        timeEntries: [existingEntry]
      }
    },
    methods: {
      deleteTimeEntry (timeEntry) {
        //这个方法用于删除某一项计划
        let index = this.timeEntries.indexOf(timeEntry)
        if (window.confirm('确定要删除吗?')) {
          this.timeEntries.splice(index, 1)
          //这里会派发到父组件上，执行父组件events里的deleteTime方法
          this.$dispatch('deleteTime', timeEntry)
        }
      }
    },
    events: {
      timeUpdate (timeEntry) {
        this.timeEntries.push(timeEntry)
        //继续向上派发
        return true
      }
    }
  }
```
别忘了为我们的组件写上一些需要的样式
```
// src/components/TimeEntries.vue

import TimeEntries from './components/TimeEntries.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries
  }
})

//...
```
Vue构建单页应用最佳实战_

###创建任务组件
这个比较简单我们直接给出代码
```
// src/components/LogTime.vue

</template>

export default {
    data () {
      return {
        //模拟一个默认值
        timeEntry: {
          user: {
            name: '二哲',
            email: 'kodo@forchange.cn',
            image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
          }
        }
      }
    },
    methods: {
      save () {
          let timeEntry = this.timeEntry
          this.$dispatch('timeUpdate', timeEntry)
          this.timeEntry = {}
        }
    }
  }
```
这个组件很简单就3个input输入而已，然后就两个按钮，保存我们就把数据push进我们的列表里，并且初始化我们的timeEntry。取消的话，我们就路由定位到/time-entries即可。

ps:按理来说我们应该是要填写6个数据包括名字，邮箱和头像。但这里为了演示就暂时先这样。以后结合后台我们会继续完善这里。

LogTime属于我们TimeEntries组件的一个子路由，所以我们依旧需要配置下我们的router.map
```
// src/main.js

import LogTime from './components/LogTime.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries,
    subRoutes: {
      '/log-time': {
        component: LogTime
      }
    }
  }
})

//...
```
Vue构建单页应用最佳实战_

###创建侧边栏组件
目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。
```
// src/App.vue

//...

//...
```
由于我们把总时间存放在最上级的父组件上，所以我们需要把我们的总时间传入我们的sidebar组件。

在写下我们的两个时间计算方法

```
  import Sidebar from './components/Sidebar.vue'

export default {
    components: { 'sidebar': Sidebar },
    data () {
      return {
        totalTime: 1.5
      }
    },
    events: {
      timeUpdate (timeEntry) {
        this.totalTime += parseFloat(timeEntry.totalTime)
      },
      deleteTime (timeEntry) {
        this.totalTime -= parseFloat(timeEntry.totalTime)
      }
    }
  }
```
最后给出我们Sidebar.vue
```
<template>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h1 class="text-center">已有时长</h1>
    </div>

</div>
</template>

export default {
    props: ['time']
  }
```
props就是vue中传值的写法，不仅要在我们自定义的标签上传入<sidebar :time="totalTime"></sidebar>，还需要在组件里js里定义props: ['time']

##最后
本章，我们可以学习到许多关于vue的特性。

1. 了解了vue-cli脚手架
2. 初步对webpack有了一些了解和认识
3. 如何用.vue愉快的开发
4. 父子组件通信
5. 路由（子路由）的应用

下一章，我们将会结合node学习vue-resource，更好的完善我们SPA应用

> github地址：https://github.com/MeCKodo/vue-tutorial

作者：Kodo
链接：http://www.imooc.com/article/details/id/6991
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作

##前言我们将会选择使用一些vue周边的库 1. 使用node.js后台，了解到如何获取数据 2. 实现单页路由 3. 实现HTTP请求我们的node 4. 单项数据流 5. 使用.vue文件进行开发最终我们将会构建出一个小demo，不废话，直接上图。 Vue构建单页应用最佳实战_ ##安装 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) ``` npm i -g vue-cli ``` 然后创建一个webpack项目并且下载依赖 ``` vue init webpack vue-time-tracker cd vue-time-tracker npm i ``` 接着使用 npm run dev 在热加载中运行我们的应用这一行命令代表着它会去找到package.json的scripts对象，执行node bulid/dev-server.js。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在localhost:8080即可查看我们的应用。这些都准备好后，我们需要为我们的路由和XHR请求下载两个库，我们可以从vue的官网中找到他们。 ``` npm i vue-resource vue-router --save ``` ###初始化（main.js）查看我们的应用文件，我们可以在src目录下找到App.vue和main.js。在main.js文件中，我们引入Vue和App，并且创建了一个vue的实例（因为在router这行引入了App组件router.start(App, '#app')） ``` // src/main.js import Vue from 'vue' import App from './App.vue' import Hello from './components/Hello.vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' //注册两个插件 Vue.use(VueResource) Vue.use(VueRouter) const router = new VueRouter() // 路由map router.map({ '/hello': { component: Hello } }) router.redirect({ '*': '/hello' }) router.start(App, '#app') ``` 我们还需要在index.html包裹下我们的 ``` //index.html

``` 我们的初始化就到这结束了，接下来让我们开始创建别的组件。 ###创建首页 View 首先，我们需要为我们的应用增加下bootstrap.css，为了方便，在这就直接在头部引入CDN。 ``` 计划板 ``` 接着在App.vue里为我们的应用写个顶部导航。 ``` // src/App.vue ``` 除了我们的navbar以外，我们还需要一个.container去放我们其余需要展示的信息。并且在这里我们要放一个router-view标签，vue-router的切换就是通过这个标签开始显现的。接着，我们需要创建一个Home.vue作为我们的首页 ``` // src/components/Home.vue ``` 既然我们需要显示Home，那就需要开始配置路由，这很简单，只需要在main.js里把Hello.vue换为Home.vue即可 ``` //... router.map({ '/Home': { component: Home } }) router.redirect({ '*': '/Home' }) ``` Vue构建单页应用最佳实战_ ###创建任务列表 View 在这个页面，我们需要去创建我们的时间跟踪列表。 PS:现在这个页面没有数据，之后我们会在后台配置 ``` // src/components/TimeEntries.vue ``` 关于template的解释，都写在一起了，再看看我们的script ``` // src/components/TimeEntries.vue export default { data () { // 事先模拟一个数据 let existingEntry = { user: { name: '二哲', email: 'kodo@forchange.cn', image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256' }, comment: '我的一个备注', totalTime: 1.5, date: '2016-05-01' } return { timeEntries: [existingEntry] } }, methods: { deleteTimeEntry (timeEntry) { //这个方法用于删除某一项计划 let index = this.timeEntries.indexOf(timeEntry) if (window.confirm('确定要删除吗?')) { this.timeEntries.splice(index, 1) //这里会派发到父组件上，执行父组件events里的deleteTime方法 this.$dispatch('deleteTime', timeEntry) } } }, events: { timeUpdate (timeEntry) { this.timeEntries.push(timeEntry) //继续向上派发 return true } } } ``` 别忘了为我们的组件写上一些需要的样式 ``` // src/components/TimeEntries.vue ``` 由于新增了页面，所以我们继续配置我们的路由 ``` // src/main.js import TimeEntries from './components/TimeEntries.vue' //... router.map({ '/home': { component: Home }, '/time-entries': { component: TimeEntries } }) //... ``` Vue构建单页应用最佳实战_ ###创建任务组件这个比较简单我们直接给出代码 ``` // src/components/LogTime.vue export default { data () { return { //模拟一个默认值 timeEntry: { user: { name: '二哲', email: 'kodo@forchange.cn', image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256' } } } }, methods: { save () { let timeEntry = this.timeEntry this.$dispatch('timeUpdate', timeEntry) this.timeEntry = {} } } } ``` 这个组件很简单就3个input输入而已，然后就两个按钮，保存我们就把数据push进我们的列表里，并且初始化我们的timeEntry。取消的话，我们就路由定位到/time-entries即可。 ps:按理来说我们应该是要填写6个数据包括名字，邮箱和头像。但这里为了演示就暂时先这样。以后结合后台我们会继续完善这里。 LogTime属于我们TimeEntries组件的一个子路由，所以我们依旧需要配置下我们的router.map ``` // src/main.js import LogTime from './components/LogTime.vue' //... router.map({ '/home': { component: Home }, '/time-entries': { component: TimeEntries, subRoutes: { '/log-time': { component: LogTime } } } }) //... ``` Vue构建单页应用最佳实战_ ###创建侧边栏组件目前我们首页左侧还有一块空白，我们需要它放下一个侧边栏去统计所有计划的总时间。 ``` // src/App.vue //...

//... ``` 由于我们把总时间存放在最上级的父组件上，所以我们需要把我们的总时间传入我们的sidebar组件。在写下我们的两个时间计算方法 ``` import Sidebar from './components/Sidebar.vue' export default { components: { 'sidebar': Sidebar }, data () { return { totalTime: 1.5 } }, events: { timeUpdate (timeEntry) { this.totalTime += parseFloat(timeEntry.totalTime) }, deleteTime (timeEntry) { this.totalTime -= parseFloat(timeEntry.totalTime) } } } ``` 最后给出我们Sidebar.vue ``` export default { props: ['time'] } ``` props就是vue中传值的写法，不仅要在我们自定义的标签上传入，还需要在组件里js里定义props: ['time'] ##最后本章，我们可以学习到许多关于vue的特性。 1. 了解了vue-cli脚手架 2. 初步对webpack有了一些了解和认识 3. 如何用.vue愉快的开发 4. 父子组件通信 5. 路由（子路由）的应用下一章，我们将会结合node学习vue-resource，更好的完善我们SPA应用 > github地址：https://github.com/MeCKodo/vue-tutorial 作者：Kodo 链接：http://www.imooc.com/article/details/id/6991 来源：慕课网本文原创发布于慕课网，转载请注明出处，谢谢合作

任务追踪

创建

{{ timeEntry.totalTime }}

已有时长

{{ time }} 小时

Navigation

Recent Posts

Friend Links