上一篇文章《一個基於ES5的vue小demo》我們講瞭如何用ES5,vue-router做一個小demo,接下來我們來把它變成基於ES6+webpack的demo。 一、環境搭建及代碼轉換 我們先搭建一下vue 的開發環境,根據我的一篇隨筆《Vue開發環境搭建及熱更新》,我們一步步搭建開發環境,pr ...
上一篇文章《一個基於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>About.vue
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>Home.vue
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>Play.vue
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>Time.vue
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 } ] }] })index.js
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>App.vue
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 } })main.js
二、錯誤修改
我們先暫時將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
真是激動了我三生三世,終於成功了
四、結語
這兩個小demo寫到這裡終於告一段落,如果大家在運行過程中有什麼問題,我們可以相互探討,一起進步! ps:可能這篇文章有些圖片在瀏覽器上看起來偏小不太清晰,各路高手自行ctrl+滾軸哈!
代碼地址:https://github.com/Nangxif/ES6-demo請大家多多支持