前期看了很多webpack的介紹，之前一直用requireJS或者browserify，真正決心來使用webpack，實在是因為webpack好像確實功能更全。

這期想做的是通過webpack和vue-router搭建一個單頁應用，並且將vue的transition元件加進去，做一個幻燈片的樣子。
首先，貼上我的環境。

開始

step1：安裝vue cli

推薦更改為cnpm（淘寶的映象），這樣下載要快一點。

生成專案

CMD輸入

vue init webpack-simple my-webpack-simple-demo

然後可以一路回車，它會告訴你vue的版本是2.x，沒錯，我們就是要用vue2.0.
詢問你工程名，描述，以及所有人。
完成後，按照指示，進入檔案，並且npm 下載依賴項

完畢後

npm run dev

瀏覽器會自動跳轉，沒錯，至此我們的環境搭建就算完成了。

說明

這個時候我們可以來看一看檔案的目錄

說一下這些檔案的作用
1、src資料夾
用於存放我們寫的原始碼
2、.gitignore
用於git上傳時，指定忽略一些檔案，比如build資料夾以及node_modules
3、index.html
這個就不用說了，就是我們瀏覽器開啟看到的頁面
4、package.json
這個是一些npm的一些配置檔案。
用於配置npm的命令，比如我們剛剛在命令列輸入的 npm run dev 其實就是在該檔案找到的。

 "dev":
 
 "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",

以及儲存一些依賴項，也就是說，如果之後要用到npm的時候，在後面新增字尾 –save-dev，就會自動儲存在”devDependencies”中。
如果別人使用你的專案，首先npm install，載入所有的依賴項。

5、readme
6、webpack.config.js
webpack的配置檔案。
其實自動化工具，諸如webpack就相當於我們程式的保姆，我們把一些瑣碎的事情丟給它，然後它來幫我們執行。但是它怎麼執行呢，肯定不能亂執行，所以我們需要給它一些命令。
這裡我們來看一下webpack的配置檔案。其實也很好理解。

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

我一點一點的來說：

 entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

entry：指定了程式的入口檔案，告訴webpack原始檔在哪裡。
output:指定了程式的輸出檔案，告訴webpack把檔案解析後，放到哪裡，以及名字叫什麼(filename:’build.js’)

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]

這裡定義了一些語法解析規則。
指定字尾名為.vue 的檔案通過vue-loader語法解析載入。
js檔案通過babel語法解析。
然後png/jpg/gif/svg通過檔案格式解析。
如果有人喜歡用sass的，也需要在這裡配置。

vue-router

簡單版的我就不寫了，回頭有時間寫一篇部落格。
首先安裝vue-router
這是我的目錄，App.vue算是我的主頁，components中存放的是我的小模組。main,js用來啟動路由，router-config.js 用來配置路由路徑

App.vue檔案，沒什麼可說的，基本上照著官方API寫就好了

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
          <h2>Router Demo - 01</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--使用指令v-link進行導航-->
          <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
          <a class="list-group-item" v-link="{ path: '/about'}">About</a>
          <router-link class="list-group-item" to="/Hello">Hello</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--用於渲染匹配的元件-->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  body {
    background-color: #f7f8f9;
  }
</style>

值得說明一下的是

          <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
          <a class="list-group-item" v-link="{ path: '/about'}">About</a>
          <router-link class="list-group-item" to="/Hello">Hello</router-link>

這裡寫了兩種方法，前面兩種是vue1.x的寫法，後面一種是vue2.x的寫法，親測目前vue2.x對於兩種方式都支援。

main.js檔案

這裡踩坑就有點多了。

先上vue的官方檔案

vue1.x的router.start不再適用

router.start({
  template: '<router-view></router-view>'
}, '#app')

變得更簡單了，直接在Vue的例項中宣告router即可，就像宣告data、components一樣

new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
})

template是註冊元件。

template: '<router-view></router-view>'

或者這樣寫，也是沒問題的

new Vue({
  el: '#app',
  router: router,
  render: h => h('router-view')
})

router.map 也被取代了

之前的寫法

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

因為沒有map了，所以router直接寫成陣列

var router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

先說上這兩個基本的，因此我的main.js的寫法是這樣的

import Vue from 'vue'
import VueRouter from "vue-router"
import Hello from './components/hello.vue'
import About from './components/About.vue'
import Home from './components/Home.vue'
Vue.use(VueRouter)

const routes = [{
    path: '/Hello',
    component: Hello
}, {
    path: '/Home',
    component: Home
}, {
    path: '/About',
    component: About
}];

const router = new VueRouter({
    routes // （縮寫）相當於 routes: routes
})

const App = Vue.extend(require('./App.vue'))

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

開啟，執行

npm run dev 

總結

主要是網上的很多教程都是關於vue1.x版本的，踩了很多坑，終於搞明白了，第一步就是這麼完成了。
下面就可以接著探索router的更多好玩的東西了。

另外本教程的程式碼也都放在了我的git上面，最近慢慢寫，慢慢更新。