上一篇文章《一個基於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 jquery@1.11.3 --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
真是激動了我三生三世，終於成功了
四、結語
代碼地址：https://github.com/Nangxif/ES6-demo請大家多多支持