最近用webpack+vue建構了一個移動端項目，摸石頭過河遇到了不少坑，看這段時間也沒有更新部落格了，就記錄一下自己在這個項目中遇到的一些技術點，分享出來。
本篇主要分享一下利用webpack搭建vue開發環境，前提電腦上須安裝好了nodejs。
1.搭建開發目錄
建立一項目目錄myVue，進入該目錄建立一個app和一個node_modules檔案夾；
進入app檔案夾，建立pages目錄用于存放頁面，建立一個component目錄存放元件，建立conmmon目錄用于存放公共資源；
在app裡面建一個入口檔案，命名為app.js和一個入口頁面app.vue，以及一個index.html檔案
在myVue目錄下建立webpack.config.js啟動檔案
建成的檔案目錄如下圖所示：
2.配置啟動檔案
打開webpack.config.js檔案，配置和說明如下：
//引入webpack插件
var webpack = require("webpack");
// 生成HTML插件
var html = require("html-webpack-plugin");
// 删除檔案插件（後面用到删除www檔案夾）
var clean = require("clean-webpack-plugin");
//用到的子產品
module.exports = {
//入口檔案
entry:"./app/app.js",
//輸出
output:{
//輸出位址，會自動建立檔案夾www
path:__dirname+"/www",
//輸出命名
filename:"bundle.js"
},
//用到的子產品，基本上常用的就是這幾個
module:{
loaders:[
{
//css打包，使用正規表達式識别樣式檔案，常用用到了style-loader、css-loader、less-loader子產品
test:/\.css$/,
loader:"style-loader!css-loader!less-loader"
},
{
//圖檔打包，limit限制打包的圖檔大小和圖檔放到imges檔案下使用原名字，使用4位的hash值防止命名相同而沖突，使用原來的擴充名
test:/\.(png|jpe?g|gif)$/,
loader:"url-loader?limit=1000&name=images/[name].[hash:4].[ext]"
},
{
//vue檔案打包
test:/\.vue$/,
loader:"vue-loader"
},
{
//字型打包
test:/\.(woff|svg|eot|ttf)\??.*$/,
loader:"url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]"
}
]
},
//使用插件
plugins:[
//生成html，标題，用到的模闆
new html({
title:"myVue",
template:__dirname+"/app/index.html",
filename:"index.html",
}),
//删除www目錄，這裡為了後面看效果，先不删除
// new clean(["www"]),
],
//sudo npm install webpack-dev-server -g 設定自動重新整理和端口
devServer: {
contentBase:"./www",
inline: true,
port: 8088
},
resolve:{
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}
其中：
entry 入口檔案 讓webpack用哪個檔案作為項目的入口
output 出口 讓webpack把處理完成的檔案放在哪裡
module 子產品 要用什麼不同的子產品來處理各種類型的檔案
plugins 插件 用來配置需要用到的插件
resolve 用來設定路徑指向
用到的子產品包括：
webpack html-webpack-plugin clean-webpack-plugin style-loader css-loader less-loader less url-loader file-loader vue vue-router vue-loader vue-template-compiler babel-loader babel-preset-es2015 babel-core babel-plugin-transform-runtime
3.安裝相應的子產品
1）在myVue目錄下安裝子產品
npm install webpack html-webpack-plugin clean-webpack-plugin style-loader css-loader less-loader less url-loader file-loader vue vue-router vue-loader vue-template-compiler babel-loader babel-preset-es2015 babel-core babel-plugin-transform-runtime
2）安裝自動重新整理全局子產品
npm install webpack-dev-server -g
4.配置index.html檔案
打開檔案，配置如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
</html>
注意：
移動端用需要配置視口viewport，配置頭部，配置body部分id
5.建構測試代碼
下面要實作功能就是點選下方導航就跳轉到對應的頁面，而且标題會随着頁面而修改。
1）建構各子頁面和公共元件
在pages目錄下建立五個目錄，分别為首頁、分類、社群、購物車和我的對應的英文檔案夾，再在每個檔案夾裡面設定對應的vue頁面home.vue,classify.vue,community.vue,shopcart.vue,mine.vue,每個頁面寫入測試内容，比如home.vue寫入代碼如下：
<template>
<div class="home">
<header1 title="首頁"></header1>
<div>{{data}}</div>
</div>
</template>
<script type="text/javascript">
import Header1 from '../../component/header/header1.vue';
export default {
components:{
Header1
},
data(){
return{
data:"這是首頁"
}
}
}
</script>
注意到每個頁面要導入header1，在component元件下面建立header檔案夾，建立一個header1.vue檔案，寫入頭部代碼：
<template>
<div class="header">
{{title}}
</div>
</template>
<script type="text/javascript">
export default {
props:["title"]
}
</script>
<style type="text/css">
.header {
background: #ddd;
text-align: center;
line-height: 50px;
}
</style>
那如何将各頁面标題傳值到标題上呢？這裡用到了props傳值，在vue官方文檔上解釋為：“元件執行個體的作用域是孤立的。這意味着不能并且不應該在子元件的模闆内直接引用父元件的資料。可以使用 props 把資料傳給子元件”。
那麼這裡props綁定的是title,而在各個子頁面的頭部，直接給title指派即可，比如home頁面的：
<header1 title="首頁"></header1>
2）建構入口檔案入口頁面
打開app.js檔案，裡面要導入元件vue,導入vue路由，導入各個頁面
import Vue from 'vue';
import VueRouter from 'vue-router';
//首頁面入口
import App from "./app.vue";
//其他頁面
import Home from "./pages/home/home.vue";
import Community from "./pages/community/community.vue";
import Classify from "./pages/classify/classify.vue";
import Mine from "./pages/mine/mine.vue";
import Shopcart from "./pages/shopcart/shopcart.vue";
Vue.use(VueRouter);
const router = new VueRouter({
routes:[
{path:"/",component:Home},
{path:"/community",component:Community},
{path:"/classify",component:Classify},
{path:"/mine",component:Mine},
{path:"/shopcart",component:Shopcart}
]
})
//指定一開始加載的頁面
new Vue({
router,
render:h=>h(App)
}).$mount("#app")
這裡将對應的元件和頁面導入，并生命一個路由，裡面設定各頁面對應的路徑和指定的頁面，然後new Vue一個vue，在裡面使用這個路由，然後使用render函數和箭頭函數傳回App元件，然後使用mount挂載到Index.html裡面去。
首頁預設為home頁，path路徑設定為/
打開aap.vue頁面，寫入測試代碼
<template>
<div>
<div class="content">
<router-view></router-view>
</div>
<div class="nav">
<router-link to="/">首頁</router-link>
<router-link to="/classify">分類</router-link>
<router-link to="/community">社群</router-link>
<router-link to="/shopcart">購物車</router-link>
<router-link to="/mine">我的</router-link>
</div>
</div>
</template>
<style type="text/css" >
/*使用less樣式*/
@import './common/css/reset.css';
.nav{
position: fixed;
bottom: 0;
width: 100%;
display: flex;
border-top: 1px solid #ccc;
background: white;
a{
flex:1;
display: block;
text-align: center;
line-height: 50px;
color: black;
}
}
.content{
font-size: 30px;
padding-bottom: 50px;
}
</style>
使用router-link路由，to到app.js中對應的path，路由對應的頁面放在router-view中，使用less方式設定樣式表；
另外這裡也import如重置樣式表，當然也可以用link。
6.運作代碼
敲完測試代碼之後，整個項目檔案夾目錄如下：
打開myVue檔案夾，運作webpack
webpack
運作可以看到各個檔案的打包情況，若有報錯，需要根據報錯去查找原因。
運作結果是myVue目錄下多出一個www檔案夾，裡面有一個index.html和bundles.js檔案，這是webpack.config.js檔案中設定對應的目錄和檔案名然後webpack打包生成的。
運作index.html檔案：
可以看出，當點選導航欄時，路由将對應的子頁面展示在router-view中，子頁面中導入的header1公共元件中綁定的title也随着子頁面傳值改變而改變。
7.自動重新整理
在webpack.config.js中有這段代碼：
devServer: {
contentBase:"./www",
inline: true,
port: 8088
},
實際開發中需要邊開發邊自動重新整理，這樣不需要不停的運作webpack，這段代碼就是開啟一個伺服器，并自動重新整理，當修改代碼時會自動重新整理。
在myVue中打開指令行，輸入
webpack-dev-server
運作之後會顯示端口位址http://localhost:8088,在浏覽器中打開這個位址就會顯示對應的頁面，當實時修改代碼儲存，浏覽器就會自動重新整理展示最新效果。
這樣，一個簡單的使用vue開發的架構搭建完成。
本篇代碼位址：http://pan.baidu.com/s/1kVmIr6v 密碼：yka9