Vue.js是一個負責View layer的javascript framework，可以用來render html的內容。Vue可以加入到現有網頁，但更多情況是用Vue由頭建立一個SPA(Single-page application)。

這裡紀錄了如何建立一個用上 node.js, npm, webpack, vue-router, vuex 的Vue.js專案。

I. 安裝 Vue

以下參照了官方文檔所寫的步驟：

# 安裝 vue-cli
$ npm install --global vue-cli
# 用 "webpack" template 開一個新project
$ vue init webpack my-project

然後vue-cli會問一些問題去幫你決定如何初始化你的專案，vue-router最好選安裝，用來做網頁的routing。

# 安裝 dependencies
$ cd my-project
$ npm install
# 試行
$ npm run dev

Project Structure

現在你的Project大概長這樣：

.
├── build/  # 放專案管理工具
├── config/  # 放config檔
├── dist/  # 經compile後的完整網頁，由npm run build建立
├── index.html  # 整個project的根檔案
├── node_modules/  # npm modules
├── package.json  # npm dependencies
├── src/  # 你的code
├── static/  # 放static files如圖片等
└── test/  # UI tests

運作流程

趕時間的朋友可跳過這part到Part II

理解這個初始project如何運作，對日後擴展你的application有很大幫助。

Dev server

執行npm run dev，會調用build/dev-server.js，裡面會使用webpack去打包project。

Webpack config

使用vue init建立的project會使用webpack一個叫vue-loader的plugin來打包project。

由於build/webpack.base.config.js寫了：

entry: {
    app: './src/main.js'
  }

所以會把你的src/main.js裡import了的App.vue（以至裡面一層層的.vue檔）打包成一個龐大的js檔（對，整個project純粹就是一個js檔）。

main.js

src/main.js裡建立了一個Vue instance：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

el: #app意思就是會inject到html裡的<div id="app">。

index.html

index.html是整個project的root檔，好似甚麼都沒有。

執行一次npm run build後，可以看看dist/index.html：

<div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.5973cf24864eecc78c48.js></script>
<script type=text/javascript src=/static/js/app.cda9eea43bd2acedfa05.js>

三個js檔都是webpack打包main.js後的產物，執行這些檔後，你的app就會被inject到<div id="app">。

II. Vue Router

主要檔案就是src/router/index.js裡的new Router()和App.vue裡的<router-view/>。

詳情可參照官方文檔。

III. Vuex

Vuex是一個state管理工具，強調一個application只能有一個 centralized store ，而且只能透過 mutation 去改變它。

好處

1. 各component可以共同share data，不用pass來pass去
2. 所有對store的改動都一目瞭然，因為全部都是mutation，方便debug

React.js也有個相似的工具—Redux，他們的概念都來自Flux。

如果你的project規模不少的話，其實很難避免使用Vuex，所以我建議先把它裝了。

$ npm install vuex --save  # --save代表安裝到當前project當中

按照官方的example創建 src/store/ folder，在src/store/index.js加入store：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

在App.vue加入：

import store from './store';  // import

// ...

new Vue({
  el: '#app',
  router,
  store,  // 加入store到app裡面
  components: { App },
  template: '<App/>',
});

之後在.vue檔裡面就可以用this.$store來使用store了。

---

以上就是一個完整的Vue single-page application了，Vue的modularity使這個project可以擴展到非常大規模也沒有問題，除了performance很好，code也容易維護。

日後再寫Vue的入門教學吧。