vue-cli脚手架，实现单页面路由

1.安装vue-cli

安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v  检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node，我这里的npm版本为3.10.10。如果该命令不可以使用，需要安装node软件包，根据你的系统版本选择下载安装就可以了。

下载地址：http://nodejs.cn/download/

npm没有问题，接下来我们可以用npm 命令安装vue-cli了，在命令行输入下面的命令：

[code]npm install vue-cli -g

-g:代表全局安装，安装完成后，可以用vue-V来进行vue-cli的版本号。注意这里的V是大写的。

如果vue-V的命令管用了，说明我们已经顺利的把vue-cli安装到我们的计算机里了

2.初始化项目

在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：

[code]vue init webpack vuecliTest

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git的作者，他会读取。
• Install  vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
• setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

命令行出现上面的文字，说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。

1、cd vuecliTest  进入我们的vue项目目录。

2、npm install  安装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装。

3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。

3.解读src/router/index.js文件

[code]import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
routes: [              //配置路由，这里是个数组
{                    //每一个链接都是一个对象
path: '/',         //链接路径
name: 'Hello',     //路由名称，
component: Hello   //对应的组件模板
}
]
})

增加一个Hi的路由和页面

对路由的核心文件熟悉后，我们试着增加一个路由配置，我们希望在地址栏输入  http://localhost:8080/#/hi   的时候出现一个新的页面，先来看一下我们希望得到的效果。

看到了效果，我们看一下具体的操作步骤：

• 在src/components目录下，新建 hi.vue 文件。
• 编写文件内容，和我们之前讲过的一样，文件要包括三个部分<template><script>和<style>。文件很简单，只是打印一句话。

[code]<template>
<div class="hello2">
<h1>{{msg}}</h1>
</div>
</template>

<script type="text/ecmascript-6">
export default{
name:'hi',
data(){
return{
msg:'hi,I am judy'
}
}

}
</script>

 引入 hi组件：我们在router/index.js文件的上边引入hi组件

[code]import hi from '@/components/hi'

增加路由配置：在router/index.js文件的routes[]数组中，新增加一个对象，代码如下。

[code]{
path:'/hi',
name:'hi',
component:hi
}

以下是index.js里面的路由文件

[code]import Vue from 'vue'  //引入vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下HelloWorld组建

import hi from '@/components/hi'

Vue.use(Router) ; //Vue全局使用Router

export default new Router({
routes: [  //配置路由，这里是个数组
{        //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld',  //路由名称
component: HelloWorld  //对应的组件模版
},
{        //每一个链接都是一个对象
path: '/hi', //链接路径
name: 'hi',  //路由名称
component: hi  //对应的组件模版
}
]
})

router-link制作导航

[code] <router-link to="/">[显示字段]</router-link>

• to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成  to=”/”  ，
• [显示字段] ：就是我们要显示给用户的导航名称，比如首页  新闻页。

明白了router-link的基本语法，我们在src/App.vue文件中的template里加入下面代码，实现导航。

[code]<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>

<p>
导航：
<router-link to="/hi">hi页面</router-link>
<router-link to="/">首页</router-link>
</p>
</div>
</template>

<script>
export default {
name: 'App'
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

总结：这节课我们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用<router-link>标签设置导航。在这里我必须要再强调一遍，路由是Vue中最重点的内容，你必须完全掌握学会。你可以先听一遍视频教程，然后跟着文字教程来作你的练习。一步一个脚印，我们都会成为Vue大神的，小伙伴们加油了！！！