上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終
256pages 還是全面改用原裝的 VueJs 來作 framework 。
基本框架
* Home - 播片及 Banner
* About - 自己介紹及網頁介紹
* Project - 我的作品集
* Contact - 聯絡方法
原型使用官方提供的 Webpack template
有時候不同 components 之間有少量數據希望共用，但又不想用到 Vuex 這麼麻煩的話，有比較方便的做法可以使用。就是使用 VueJS 的
Global
Mixins [https://vuejs.org/v2/guide/mixins.html#Global-Mixin] 來儲放 data 了。
Global Mixins 的用法
簡單來說就是把平時放在 export default 中的 data 搬到 Vue
上回架設了基本的 VueJS 開發環境，接下來要進行一些設定。因為在這個架構下，可以很方便的預處理SASS，基本上不用另外設定，但是之前在 NuxtJS
中已經有 SASS 中設定變數不能共用的問題。不過現在 vue-loader 已經有官方解決方法
[https://vue-loader.vuejs.org/en/configurations/pre-processors.html]，就是使用
sass-resources-loader [https://github.com/shakacode/sass-resources-loader]
載入global的變數。
用法很簡單，使用
不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。
開發環境
為了有效地在本地開發，最近使用了 Visual Studio Code [https://code.visualstudio.com/] 為開發工具 (以下簡稱
VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，
以前對Sass/SCSS等需要預處理的CSS Style有一定抗拒，因為需要安裝一堆應用程式，每次更新都需要處理一次，但是現在在NuxtJS中有Vue
Loader處理，不論那一種需要預處理的CSS都可以輕鬆搞定。
在多種預處理的CSS中我先是賞試了Sass，不用再加任何標點符號真的很棒！
Sass
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
原本是這樣的CSS
