上一篇文章《一個基於ES5的vue小demo》我們講了如何用ES5，vue-router做一個小demo，接下來我們來把它變成基於ES6+webpack的demo。

一、環境搭建及程式碼轉換

我們先搭建一下vue 的開發環境，根據我的一篇隨筆《Vue開發環境搭建及熱更新》，我們一步步搭建開發環境，project名為ES6-demo。

在之前我發表的一篇隨筆《 理解最基本的Vue專案》中，說到了在放置元件和入口檔案的src資料夾中，main.js檔案就是入口檔案，App.vue是主元件，所有元件都是在App.vue下進行切換的。components資料夾就是存放元件的地方，像我們這個專案，裡面一開始就只是存放著一個Hello元件，assets資料夾存放的是圖片，router資料夾存放的是路由檔案。

我們從之前ES5寫的demo來看，我們總共需要建立四個元件檔案，分別為Play.vue，Home.vue，Time.vue，About.vue。下面是修改後的src的目錄

--assets
--components//元件
------About.vue
------Home.vue
------Play.vue
------Time.vue
--router//路由
------index.js
--App.vue//主元件
--main.js//入口檔案

我們來依次看一下這些裡面的程式碼是什麼樣的

About.vue

<template>
	<div>
		<h1>About</h1>
		<p>{{msg2}}</p>
	</div>
</template>
<script>
export default{
	name:'about',
	data(){
		return{
			msg2:'This is About page!'
		}
	}
}
</script>
 

Home.vue

<template>
	<div>
		<h1>Home</h1>
		<p>{{msg1}}<router-link to="/play/home/time" class="btn">獲取當前日期</router-link></p>
		<router-view></router-view>
	</div>
	
</template>
<script>
export default{
	name:'home',
	data(){
		return{
			msg1:'This is Home page!'
		}
	}
}
</script>
 

Play.vue

<template>
	<div class="container">
		<div class="row">
			<div class="col-md-2 col-md-offset-2">
				<div class="list-group">
					<router-link to="/play/home" class="list-group-item">Home</router-link>  
            		<router-link to="/play/about" class="list-group-item">About</router-link> 
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel">
					<div class="panel-body">
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default{
	name:'play'
}
</script>

Time.vue

<template>
	<table class="table table-striped">
		<tr>
			<td>年份</td>
			<td>月份</td>
			<td>日</td>
		</tr>
		<tr v-for="t in dates">
			<td>{{t.year}}</td>
			<td>{{t.month}}</td>
			<td>{{t.day}}</td>
		</tr>
	</table>
</template>
<script>
export default{
	name:'time',
	data(){
		const D = new Date();
		return{
			dates:[{
				year:D.getFullYear(),
				month:D.getMonth()+1,
				day:D.getDate()
			}]
		}
	}
}
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Play from '@/components/Play'
import Time from '@/components/Time'
import About from '@/components/About'

Vue.use(Router)


export default new Router({ 
  routes: [  
    { 
      path: '/play',  
      name: 'play',  
      component: Play,  
      children: [  
        {  
          path: '/play/home',  
          name: 'home',  
          component: Home,
          children:[{
          	path:'/play/home/time',
          	name:'time',
          	component:Time
          }]  
        },  
        {  
          path: '/play/about',  
          name: 'about',  
          component: About  
        }   
      ]  
    }]
}) 

App.vue

<template>  
    <div class="container">
      <div class="jumbotron">
          <h1>A Demo!</h1>
          <p>Let's play a demo</p>
         <p><router-link to="/play" class="btn btn-primary btn-lg">play</router-link></p>
      </div> 
    </div>
    <router-view></router-view>
</template>  
<script>  
export default{  
    name:'app'
}  
</script>  

main.js

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

Vue.config.productionTip = false

new Vue({
  router,
  template: '<App/>',
  components: { App }
}) 

二、錯誤修改

我們先暫時將ES5的demo改為這樣，最好是先理解每個檔案的作用，再來看這幾段程式碼。這個專案執行之後，會出現一些錯誤，我們來看看。

這個錯誤的意思是vue模板只能有一個根物件，而我們把<router-view>放在<div>外面了，所以你想要出現正常的效果，在App.vue檔案中直接把<router-view>放到<div>裡面就可以了，我們改過之後再來試試看

你會看到這裡面大概就是說哪里哪里有空格，所以就錯誤了，但是等你回去看程式碼的時候，你會發現，你這麼寫語法是對的呀！這是因為你打開了eslint這個外掛，eslint是語法檢查工具，但限制太過於嚴格，大部分開發人員無法適應，所以我們還是把它關掉吧。這個外掛是在你建立webpack模板的時候（《 Vue開發環境搭建及熱更新》第三點），Use ESLint to lint your code? (Y/n) 這一步選擇了yes

要關掉這個功能直接選no就行了，萬一安裝了怎麼辦，別怕。在build資料夾裡面找到webpack.base.conf.js，刪掉裡面這一段就行了

再執行一下，這次我們發現cmd不報錯能運行了，但是介面裡面卻什麼東西都沒有渲染出來，開啟控制檯也沒有什麼錯誤。檢查了很久我才發現，原來在main.js裡面，我們居然忘了將這些元件掛載到index.html裡面id為app的div上，main.js是入口檔案，打包之後會產生app.js，然後匯入index.html中，所以我們將main.js的程式碼改為

new Vue({
  el: '#app',//加上這一句
  router,
  template: '<App/>',
  components: { App }
}) 

執行完之後，蒼天啊！終於有效果了。

三、使用bootstrap

每個按鈕都正常運作，不過我們給他們設定的樣式沒有渲染出來，這是肯定的，我們沒有匯入bootstrap.js和bootstrap.css。

我們首先要先安裝jQuery，先在cmd命令列中輸入

npm install [email protected] --save-dev

再來配置一下jQuery，在build/webpack.base.conf.js檔案中,在module.exports裡面再加入一段程式碼

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
    ]

還要記得在該檔案開頭，匯入webpack

var webpack = require('webpack')

否則將會出現下面的錯誤

然後去bootstrap官網下載bootstrap包，我們這裡使用的是3.3.7版本，下載下來後將fonts，js，css資料夾分別放到專案目錄/src/assets下。

最後是引用bootstrap。我們在src/main.js檔案的頂部加入如下對bootstrap主要檔案的引用。

import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'

其實本來bootstrap也是需要配置的，但是在build/webpack.base.conf.js檔案中moudle的rules設定中都已經包含對字型檔案的打包設定

不用我們去弄了。

讓我們一起迎接接下來這一神聖的時刻，打包，在cmd輸入

cnpm run build

生成dist資料夾，最後我們在本地伺服器上執行，在cmd輸入

cnpm run dev

真是激動了我三生三世，終於成功了

四、結語

這兩個小demo寫到這裡終於告一段落，如果大家在執行過程中有什麼問題，我們可以相互探討，一起進步！ ps：可能這篇文章有些圖片在瀏覽器上看起來偏小不太清晰，各路高手自行ctrl+滾軸哈！