一、用vue-cil来构建一个项目，先把基本项目跑起来
1、新建文件夹目录：

2、打开vueProject文件夹按住shift键右击选择在此处打开命令窗口（cmd）

3、检测nodejs和npm本版，确认已经安装node环境和npm包管理工具（下载地址：http://nodejs.cn/；）；

4、首先，需要安装vue-cil，命令如下：（vue-cil是vue的脚手架工具）

$ npm install -g vue-cli

5、新建一个自己的vue项目，如vuedemo项目名（输入这个命令之后，会出现一些提示，是什么不用管，一直按回车即可。）

$ vue init webpack vuedemo

6、进入新建的vuedemo目录，命令如下：
$ cd vuedemo

7、安装依赖（需要等待一段时间，如果长时间没有响应，就ctrl+c停止掉，然后再执行一次即可）

$ npm install

8、把项目跑起来，在运行了npm run dev之后，会自动打开一个浏览器窗口，就可以看到实际的效果了。

$ npm run dev

二、根据实际项目改造目录，以及路由配置
1、编辑器打开vuedemo项目（红色波浪线是编辑器不识别新的语法，忽略）
src文件：（我们的开发目录，基本上绝大多数工作都是在这里开展的，这里我只说src文件）
//commponents目录里面放了一个演示的组件文件。

//router文件放路由配置文件；

//App.vue是项目入口文件。

//main.js这是项目的核心文件。全局的配置都在这个文件里面配置。

2、整理后的文件目录：

新增pages目录，放详情页面，如下：
firstPage.vue

<template>
  <div class="firstP">
    firstPage
  </div>
</template>
<style>
    .firstP{
      color:red;
    }
</style>
<script>

</script>

secondPage.vue

<template>
    <div class="secondP">
        secondPage
    </div>
</template>
<style>
    .secondP{
      color:blue;
    }
</style>
<script>

</script>

router文件下index.js文件可屏蔽掉，新增routes.js文件代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import firstPage from '../pages/firstPage'
import secondPage from '../pages/secondPage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/first',
      name: 'first',
      component: firstPage
    },
    {
      path: '/second',
      name: 'second',
      component: secondPage
    }
  ]
})

App.vue文件修改代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div class="nav-list">
      <router-link class="nav-item" to="/">index</router-link>
      <router-link class="nav-item" to="/first">页面一</router-link>
      <router-link class="nav-item" to="/second">页面二</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </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>

main.js 文件修改代码如下：
注意：变动部分为引入路由配置文件路径：

import Vue from 'vue'
import App from './App'
import router from './router/routes.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

ok，效果截图：

希望小伙伴们可以一次跑通项目流程