序
最近因工作需要，必須打造一個web-based的電商後台，具體功能包括
商品發佈、圖片壓縮上傳、使用者登入、分頁管理、出貨管理...等等。
由於小弟並非前端程序猿，不常寫js，更是第一次寫ES6，然站在巨人們的肩膀上，最終也只用一週多的時間完成任務，一路上學到很多，體驗到學前端的樂趣，同時也走過一些坑，僅此紀錄，幫助自己也希望幫助別人。
先上結果
整個project技術棧為：
- 前端: Vuejs + Vue-Router + eleme UI + ES6(with Babel) + Webpack
- 後端: Nodejs + Express + MySQL + Coffeescript
功能描述
- 商品列表可在列表狀態下直接編輯分類欄位
- 新增/修改商品：應用modal/selector/switch/text/tooltip等基本UI元件，在不轉跳頁面情況下編輯商品內容。
- 瀏覽器直接上傳圖片至s3，無需經過backend server，並自動產生縮圖。以及實現排序/刪除。
- 登入/登出/記得我等功能。
能學到什麼？
- 從實作商品列表學到async request撈資料、處理分頁、深度使用table。
- 新增/修改商品學到form的各種填入、validation、以及更多的UI元件。
- 圖片處理學到如何用canvas產生縮圖、理解亞馬遜的各種機制包括IAM、Cognito、s3 CORS、endpoint、certificate等各種設定，並使用aws-sdk從瀏覽器直接上傳圖片。這部分是最頭痛也最難搞的！
- 登入/登出系統學到基本加密傳輸、server端驗證、埋token，自動登入用到瀏覽器端local storage...等等。
選擇前端框架： Vuejs vs React
框架的選擇上，只考慮ReactJS跟Vuejs，Angular 2.0不考慮。理由是ReactJS能透過ReactNative跨到移動端，而Vuejs同樣可能透過Weex跨到原生移動端，光這點就足以淘汰Angular了。即使目前我只需要web後台，但考慮到未來的延展性，React跟Vue遠勝Angular。
至於React跟Vue到底該怎麼選？網路上已有許多討論，兩者同樣都是優秀的前端框架，React在github上5.4萬顆星，vuejs則是3.4萬顆星，考慮到vuejs比較晚發展，這成績可以說是旗鼓相當。兩者的社群都非常活躍，開源組件目皆不暇給，例如Vue的Element(PC端)、Mint UI(移動端)，以及Vux(類微信)，以及更多在Awesome Vue Projects。
兩者都是focus在view層面的處理，不一樣的是，Vue擁抱HTML，而React則擁抱Javascript。這話該怎麼理解呢？以iOS來譬喻的話，就是頃向於用xib或storyboard來刻view，邏輯才用code來實作；以Android來比喻的話，就是用xml來刻view，邏輯才用code來實作。不管是iOS的xib還是Android的xml，都是view模板的概念，Vuejs正是基於此概念。
而React更偏向全都用js code來寫view，如果你喜歡用code生成view的話，或許React會是更好的選擇。最佳使用React的方式是寫jsx，一種模板內嵌的js。由於js原來就不是設計來寫view模板的，為了讓js更方便寫view，還因此搞了一個jsx的語法。
在mobile端，我個人喜歡用模板的方式去寫view，iOS跟Android都是。這樣程式碼更乾淨，也能夠更直觀地展現view。所以在前端，我依循此邏輯，最終選擇了vue。另一部分也因為它結構似乎更優雅，而我對優雅的事物是沒什麼抵抗力的。值得注意的是，用模板的方式寫view，不代表不能用code處理view，事實上vue也支援用jsx刻view，但我從沒用過。
於是就開啟了我的Vue學習之路。
附帶一提，Vue作為快速崛起的後起之秀，甚至獲得阿里團隊的青睞，他們基於vue之上打造weex框架，試圖一次coding搞定web+原生iOS/Android。不過這不是今天的重點，就不展開了。
這麼強大的Vue，如果有人說他比jQuery還好學，你相信嗎？根據我自己這一兩週的體驗，確實不困難，相較於iOS/Android簡單多了。
選擇後端框架
後端我就直接採用了熟悉的Nodejs+Express+MySQL+Coffeescript，由於本文主要討論前端學習過程，這部分就不展開了。
基礎篇
所有學習資料中，最重要的兩份文檔，莫過於官方的指南以及Vue-Router，這兩個連結請直接打開並放在瀏覽器前兩分頁，估計你一週內都不會關閉它們。
建議先從頭到尾瀏覽過一次指南，前面的概念都很容易懂，其中Vue實例、組件與單文件組件必須詳看。這份指南寫得很棒，但有一個小問題，文件裡面的範例，幾乎都是用js生成Vue實例，然而真正在開發專案時幾乎都是用.vue檔(單文件組件)去生成Vue實例，而.vue檔的語法跟js有些微不同，老實說我也不知道為何要如此設計，對於剛入門的新手可能會覺得有點卡，但這其實兩者是同一回事，需要小心語法差異。
讀完了基礎文件之後，務必看兩個真實project。其一為Vue.js+LeanCloud单页面博客，僅用兩個組件，不到一兩百行的核心代碼就實現了Single Page Blog，非常經典。其二是Hackernews Clone，看看如何用Vue輕鬆山寨hackernews。比較需要注意的是，Hackernews Clone用的是vue1.x的版本，有些語法或config會不太一樣，但是整體的架構還是可以學習的。務必把這兩個範例，從github上拉下來，整份讀，不一定要run起來，但是要試圖去理解文件的架構，尤其是各種config檔，這些細節指南是不會告訴你的。
以上資料，大約會花你一至兩天時間。
看完這些文件後，對於資料綁定、路由、組件、asyn操作相信都有了基礎的認識。準備好跨出第一步吧！
webpack, babel, eslint
且慢！在你踏進去第一步之前，必須先大致搞懂這三個名詞，有點複雜我知道，但相信我，這時間值得你投資。
我簡單說明一下：
- webpack: 將開發時所用到的許多檔案(HTML, css, sass, scss, .vue, .coffee, jade...等等)，包括套件的相依引用，通通打包成一個檔案。最後輸出成一個檔案例如build.js，只需要載入這一個就搞定了。有點像是C++ compile程式碼，最後變成一個執行檔的概念。
- Babel: 讓看不懂ES6的瀏覽器讀懂你寫的ES6。其實就是一個轉譯。
- ESLint: 由於JS本身語法設計上的問題，容易寫出bug。這工具就是在幫你檢查由coding style可能產生潛在bug。
**什麼時候需要用webpack? **
如果你用.vue寫component，
如果你想用sass, scss等高階css框架
如果你想用jade
所以，基本上你會發現大家都用webpack，既然如此必須要特別留意webpack.config.js，裡面詳細描述了各種文檔需用什麼工具去轉譯。如果用vue-cli啟動project的話，會自動幫你件好一個基礎的webpack設定，大多時候你不太需要更動它。但有許多npm套件需要轉譯.json檔，如果你會用到的話，記得告訴webpack
// ps. 有些舊版webpack的loader名稱，後綴不加"-loader"
rules: [
...
{
test: /\.json$/,
loader: "json-loader"
// exclude: /node_modules/
}
]
//package.json
"json-loader": "^0.5.4"
vue-cli
啟動project前，請先去安裝vue-cli，先用別人的best practice搭建一個框架，暫時先在框架內學習基本套路。vue-cli是vuejs作者開發的一套工具，他發現許多新手的vue問題根本就不是vue問題，而是把webpack、vue、babel、各種loader等阿哩阿雜工具「串起來」的設定問題。於是開發了一套小工具，迅速幫你搭好一個可立即運行的框架，以便新手跳坑。vue-cli能幫你搭建許多種框架，有非常完整的，也有非常簡單的，建議先搭建一個最簡單的版本開始，完整版的框架對新手而言(例如我)非常複雜，令人一開始就會陷入為了要寫個小project得先學會A、B、C、D、E、F...等前置知識，直接死在起跑點。
啟動
未完待續
