Vue入門實戰01：搭建webpack+vue開發環境
最近用webpack+vue構建了一個移動端專案，摸石頭過河遇到了不少坑，看這段時間也沒有更新部落格了，就記錄一下自己在這個專案中遇到的一些技術點，分享出來。
本篇主要分享一下利用webpack搭建vue開發環境，前提電腦上須安裝好了nodejs。
1.搭建開發目錄
新建一專案目錄myVue，進入該目錄新建一個app和一個node_modules資料夾；
進入app資料夾，新建pages目錄用於存放頁面，新建一個component目錄存放元件，新建conmmon目錄用於存放公共資源；
在app裡面建一個入口檔案，命名為app.js和一個入口頁面app.vue，以及一個index.html檔案
在
建成的檔案目錄如下圖所示：
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-runtime2）安裝自動重新整理全域性模組
npm install webpack-dev-server -g4.配置index.html檔案
開啟檔案，配置如下：
<!DOCTYPE html>
<html lang="en">
<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" lang="less">
/*使用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