Vue2+VueRouter2+webpack+vue-cil构建完整项目实例（附:详细步骤截图）

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

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

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

四、首先，须要安装vue-cil，命令以下：（vue-cil是vue的脚手架工具）

$ npm install -g vue-cli

五、新建一个本身的vue项目，如vuedemo项目名（输入这个命令以后，会出现一些提示，是什么不用管，一直按回车便可。）

$ vue init webpack vuedemo

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

七、安装依赖（须要等待一段时间，若是长时间没有响应，就ctrl+c中止掉，而后再执行一次便可）

$ npm install

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

$ npm run dev

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

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

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

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

二、整理后的文件目录：

新增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，效果截图：

但愿小伙伴们能够一次跑通项目流程