從angular到react再到後來的vue~火熱的框架可謂一個接一個，著實讓小的有點力不從心，大神們為了更好的組織編寫程式碼，費盡心機搗鼓了各種各樣的框架。由於小的沒有怎麼接觸react，暫且不做過多描述，且說說angular和vue吧。

接觸angular大約是在兩年前，那會還是angular1。這也是小的使用的第一個框架，讓我印象最深刻的是它讓我完全改變了基於jquery開發時的編碼方式，從dom的操作，拼接轉變為資料驅動。從此不用再去糾結頁面的呈現應該如何切換，如何追加列表，資訊錄入的時候不用再遍歷選中輸入框再去獲取其中的輸入值，還有強大的自定義指令能夠方便的將需要複用的功能抽取。但也不得不說，這個版本的angular確實蠻重的，所幸那會編寫的都是pc端的頁面，還hold的住，現在再瞅瞅好像都出到4了，再次感嘆這迭代速度，不過好來小的因為工作的原因，很少再接觸這個框架了。

後來工作主要涉及移動端的開發，遇到個比較棘手的問題是專案都是基於前後端混合的方式開發的，在分工明確的情況下，往往一份程式碼就需要兩個小夥伴的配合，確實有點小揪心，於是一直謀劃著做個前後端分離的工作。

因為是前後端分離，頁面資料不再是通過後端語言的變數分配的方式來呈現，那麼資料的顯示就是一個大問題，所以面臨兩個選擇，要不選一個mvvm的框架做資料渲染，要不自己搗鼓一個，後者一直是小的夢想（嗯~夢想還是要有的），在框架的選擇上，第一個想到的還是angualr，但是覺得將angular用在移動端頁面上有點殺雞用牛刀，最後選中了輕量高效的vue（這裡再次點贊vue cli，對我的編碼工作帶來了很大的便利）。

注：此專案頁面基於sanse商城，只是筆者做前後端分離的實踐實驗，如需下單請到sanse app或是微信公眾號

專案地址

技術棧

vue2 + vue-rotuer2 + vuex + webpack + ES6 + axios + flex

挖坑集錦

• 跨域

專案中幾乎所有的資料請求都是基於ajax，資料通過測試介面返回，而開發環境下是基於node伺服器開啟的網頁，於是就不可避免面臨跨域的問題，所幸強大的vue cli考慮到了這點，只需稍做配置，便可將請求代理到指定的域名下，操作如下：
基於vue cli構建的專案，都可在根目錄下找到config資料夾，我們修改其中的index.js檔案，在dev屬性中新增如下程式碼：

其中 '/api' 為匹配項，target 為被請求的地址
此時只需將請求資料的baseURL設定為/api，便可正確請求到target選項中指明的請求地址下的資料，比如：

當然，這只是開發環境為了方便編碼，如果專案部署到測試環境或是正式上線，跨域還需另外處理，具體看專案對應的後端，主要就是新增幾個允許跨域的頭。

• build出來的專案重新整理報404錯誤

因為一開始做路由的時候使用的是history模式，開發環境的時候使用node做伺服器，並未遇到這個問題，但是當將專案build出來放置到測試伺服器上執行的時候，因為伺服器使用的是iis，並不支援history的模式，頁面在重新整理的時候因為其url都是指令碼模擬的，故找不到對應的資源而報404，無奈之下只能講路由形式改回hash。

這裡注意如果涉及到微信支付，在微信後臺配置域名的時候要注意配置到#之後

專案截圖

• 首頁

  
  
  image.png

• 品牌列表

  
  
  image.png

• 商品列表

  
  
  

• 商品詳情

  
  
  image.png

• 購物袋

  
  
  image.png

• 訂單頁

  
  
  image.png

• 個人中心

  
  
  image.png

結尾

本專案主要基於vue2 構建前後端分離專案的實驗，因為是用業餘時間搗鼓的專案，週期有點長，目前也有段時間木有更新了，後續會找機會將首頁改版為自定義廣告佈局頁面。