基於 Vue2.0 + Element 的單頁面可視化開發實踐

時間 2019-11-16

標籤基於 vue2.0 vue element 頁面可視化開發實踐简体版

原文原文鏈接

需求

項目迭代，要重構出一個可供用戶操做的，可自由選擇模板，可定製內容的頁面。至關於這個單頁面上最終展現的全部內容，都是由用戶本身去定製完成的。細想以後以爲使用 Vue 來作比較合適，由於頁面上大部分操做均可理解爲是對整體數據的再排序編輯。下邊是記錄的開發過程當中一些相對關鍵的問題。webpack

Vue 原始數據的深複製

因爲 JS 對象的引用類型特色，在一些不須要雙向綁定數據的時候，須要經過深拷貝原始的數據對象來暫存數據，即用 JSON.parse(JSON.stringify(...)) 的方式複製一份數據來進行操做。通常狀況下組件間的數據干擾等狀況都是因爲此問題致使的。ios

默認數據與已編輯數據的分離

最開始作的時候未考慮到這個問題，使用了簡單粗暴的方法調取默認數據，即在進入頁面的時候複製一份數據充當默認數據。以後發現這個會致使用戶操做數據後默認數據也跟着改變的問題。良好的解決方法就是相互分離，所有都是獨立請求。git

Element 的 Dialog 對話框監聽

Dialog 方面，因爲目前 Element 2.0版本是在頁面加載時直接將須要用到的全部 Dialog 生成好而後 hide 掉，切換狀態時只是執行了 show/hide 操做，考慮到複用性問題，並不是銷燬及從新生成，因此在數據的監聽更新上會可能存在只有首次才能觸發到的問題，處理辦法之一就是監聽影響對話框顯示隱藏的屬性，如官方示例中的 dialogVisible ，進而執行對話框顯示時的數據更新等操做。github

本地開發的數據請求跨域問題

一方面可經過 webpack-dev-server 添加配置 disableHostCheck: true 來修改它的默認查找 hostname 的行爲。也能夠配置config > index.js 下 proxyTable 來解決此問題。web

proxyTable: {
  '/api': {
    target: 'http://api.x.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}
複製代碼

另：Vue-CLI 的功能是其使用了 http-proxy-middleware 插件 github：github.com/chimurai/ht…json

數據的存儲調取

使用 localstorage 來存儲用於區分身份的 ID，根據不一樣 ID 使用 axios 來進行服務端的數據請求。若是牽涉跨域是須要添加 JSONP 模塊的。連接：github.com/axios/axios…axios

待改進

未使用 Vue 懶加載，因爲操做邏輯的複雜性，首頁全部的 JS 文件將近800 KB ，若是之後迭代功能 JS 文件還可能更大，可能會有更大的 JS 文件，結果可能會致使首次加載等待時間較長，因此理想狀態下是考慮加入懶加載，按需加載 JS 提早規劃。
未使用 Vuex，目前組件間的數據通信全都是經過 prop 傳參的形式實現的。雖然目前組件間還不存在大範圍共享數據的問題，可是引入 Vuex 進行數據處理仍是頗有必要的。隨着項目的複雜化推動目前組件間的傳參會愈來愈顯的笨重。