技術選型背景：公司初級前端人員較多，不適宜使用react框架，故選擇了vue腳手架

技術棧：vue-cli 3.0.0 vuex vant axios mock vconsole

vant-ui傳送門，引入方式選擇方式一，有贊技術團隊推薦，原因：較方法二簡單方便，較方法三無需全局掛載，減少內存消耗，及打包后項目較小

axios:?一個基于 promise 的 HTTP 庫,個人習慣將其defaults熟悉結合webpack,整合成公共配置模塊，用于開發(fā)、測試、生產環(huán)境，無需多次修改

mock：生成隨機數據，攔截ajax請求，模擬后端數據，可預防后端接口進度影響項目展示，需要注意一點get query請求，使用mock時需要用正則匹配對應的路由，才可實現對應的數據攔截。

vconsole:移動端真機調試神器。

項目結構：

_assets:資源文件目錄 存放js、css、img等文件

_components:組件目錄 用于存儲公共組件、可復用性組件

_configs:配置文件目錄,存放axios、rem、wx、file資源等配置

_restfulApi:接口請求目錄

_router:路由配置文件目錄

_store:狀態(tài)管理目錄

???? _mutations:同步狀態(tài)管理目錄

???? _actions:異步狀態(tài)管理目錄

_utils:基礎方法類封裝

_view:視圖層

項目結構及axios攔截處理

微信支付配置模塊

注:微信JSSDK使用前需要先進行初始化，可配置在vuex上，需要注意的是VUEX刷新頁面時會存在數據丟失現象，可將數據保存在sessionStorage中，關閉頁面時，銷毀對應的數據。

整合Vant

踩了個小坑，直接components，對應的組件Button時失敗，提示沒找到對應的選項

components: {[Button.name]: Button}

DEMO

瀏覽器報錯監(jiān)聽:window.onerror = (message, source, line, column, error) => {

let msg ='logger----onerror::::' + message +' source::' + source +' line::' + line

+'? ? column::' + column +'? ? error::' + error

let img =new Image()

img.src ='http://localhost:3000/log/?message=' + msg

}

傳送門：剛玩簡書沒設置好格式，哭暈= =

(因前期使用mint-ui，現更新為vant-ui，暫時不放出git鏈接，整合后補上……)