基于vue2.0打造移動商城頁面實踐

前言

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

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

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

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

注：此項目頁面基于sanse商城，隻是筆者做前後端分離的實踐實驗，如需下單請到sanse app或是微信公衆号

項目位址

https://github.com/x-shadow-x/sanse_wap_v2

技術棧

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。

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

項目截圖

• 首頁

  

• 品牌清單

  

• 商品清單

  

• 商品詳情

  

• 購物袋

  

• 訂單頁

  

• 個人中心

  

結尾

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