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，效果截圖：

但願小夥伴們能夠一次跑通項目流程