vue專案實踐004~~~一籃子的實踐技巧

RobinsonZhang發表於2018-11-14
Vue

前言

繼續總結vue專案實踐中的優化和思考，實踐系列004，請持續關注不要掉隊哦

實踐問題

批量物件屬性賦值

使用場景：主要是針對需要把物件的一些屬性批量的賦值到另外一個物件上，然後如果你的屬性很多可能要寫很多賦值語句。（前提是屬性名一般是相同的）

說明：可能有人會問為什麼不直接用這個物件，答案也很簡單，如果可以直接用，當然直接用是最好的，我自己在寫介面param的時候，就會注意這些，需要傳參的部分封裝到一個特殊的物件裡，然後進行data的繫結，這樣需要的時候直接用傳參物件。但這裡討論的不是這種情況。

//優化前
let data = {}
data.name = this.form.name
data.len = this.form.len
data.amount = this.form.amount
//優化版本一 ：利用物件的解構
let {name,len,amount} = this.form 
//利用物件解構還可以支援屬性名變更的情況
let {name,len:length,amount:money} = this.form
let data = {name,length,money}

//優化版本二 ：可以支援批量的匯入需要賦值的，對於拷貝物件，用source屬性承接，而需要賦值的屬性用propArr承接
//在方法中用json的相關方法支援了簡單的物件深拷貝
// 批量載入物件屬性，支援傳入陣列[{source:sourceObj,propArr:[]}]  
setProps(arr) {
    if (arr.length <= 0) return {}
    return arr.reduce((acc, item) => {
         item.propArr.reduce((acc, prop) => {
          if (typeof item.source[prop] === 'object') {
            acc[prop] = JSON.parse(JSON.stringify(item.source[prop]))
         } else {
                acc[prop] = item.source[prop]
                }
            return acc
            }, acc)
        return acc
    }, {})
}
複製程式碼

擴充思考：像這種程式碼如果你的vue程式碼裡經常寫，不妨在你的mixins中混入這個方法，可以為你的頁面節省大量的程式碼空間。

批量變數重置

在我們的程式碼中經常會遇到吧一些變數進行重置，這部分程式碼重複率很高又沒有技術含量，所以我寫一個工具方法進行簡單的支援，程式碼優化。

//優化前
this.search = false 
this.data = []
this.cur_page = 1
this.pageNo = 1
this.totalCount = 0
this.processType = ''
this.person = ''
this.keyword = ''
this.taskStatus = ''
this.stdate = []
this.processStatus = ''
 /**
      * @author zhangbing 
      * @param [] arr 需要重置的陣列變數
      * @param {*} options 配置物件 對於這裡的重置規則如果不符合需求的可以自定義option字典,然後用instanceof 判斷型別（todo）
      */   
    resetVars(arr, options) { 
        if (!arr || arr.length === 0) return 
        let _options = {
            object: {},
            string: '',
            number: 0,
            boolean: true,
            null: null,
            undefined: undefined
        }
        _options = options ? Object.assign({}, _options, options) : _options
        return arr.map(item => { 
            if (_options.includes(typeof item)) {
                item = _options[typeof item]
            } else { 
                // 不存在重置型別的 重置為字串
                item = ''
            }
            return item
        })

    }
複製程式碼

擴充思考：像這種程式碼如果你的vue程式碼裡經常寫，不妨在你的mixins中混入這個方法，可以為你的頁面節省大量的程式碼空間。

骨架屏的相關連線

axios配置的攔截

模組的過多介紹這裡就不講了，這裡說明的是一個非http 200狀態碼的錯誤解析，一般情況下我們會針對response部分做異常解析。

// 配置返回攔截器
_axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  if (error.response) {
    console.warn(error.response)
    return Promise.reject(error.response)
  } else {
    return Promise.reject(error)
  }
 
})
複製程式碼

那麼這裡就會有一個問題，首先報錯中的error是不能直接列印的，如果你寫會報錯如下：

Request failed with status code 404
    at createError (createError.js?8da8:16)
    at settle (settle.js?664b:18)
    at XMLHttpRequest.handleLoad (xhr.js?ddba:77)
複製程式碼

然後針對response存在的情況下，因為這部分的處理是一樣的，返回也都在catch裡解決的，所以我個人建議直接把錯誤的提示在這裡解決掉，比如通過console.warn的方式或者ui的message.error的方式，這樣節省了業務方面的處理錯誤程式碼。

但如果你一定希望在介面呼叫位置處理這部分非http 200的錯誤，要知道這部分是在catch，error中的，並不是在then中的作用域內。

api.xxx().then(res=> {
//http 200 處理程式碼
}).catch(error=> {
//非 200處理程式碼
})
複製程式碼

vue元素標籤帶空格部分使用loader配置去掉

有些時候我們在寫模板時不想讓元素和元素之間有空格，可能會寫成這樣：

<ul>
  <li>1111</li><li>2222</li><li>333</li>
</ul>
複製程式碼

當然還有其他方式，比如設定字型的font-size: 0，然後給需要的內容單獨設定字型大小，目的是為了去掉元素間的空格。其實我們完全可以通過配置 vue-loader 實現這一需求。

{
  vue: {
    preserveWhitespace: false
  }
}
複製程式碼

它的作用是阻止元素間生成空白內容，在 Vue 模板編譯後使用 _v(" ") 表示。如果專案中模板內容多的話，它們還是會佔用一些檔案體積的。例如 Element 配置該屬性後，未壓縮情況下檔案體積減少了近 30Kb。

vue-cli 腳手架之後待辦事項

  • 預設情況下沒有樣式前處理器的loader ，我用的scss,不加會報錯，所以需要
npm i sass-loader node-sass --save-dev
複製程式碼
  • 預設況下，沒有頁面資料夾，在src目錄下新加pages資料夾
  • 預設情況下，沒有全域性的services、filter全域性檔案，可以分別用來是存放axios請求服務，過濾器的
  • 預設情況下assets目錄下沒有分樣式，指令碼，圖片的資料夾，需要加的
  • 預設情況下，路由部分只有index,沒有路由守衛，路由子模組，建議分別加入，當然我還有另外的import懶載入方法，filter路由配置檔案要加
  • 預設的@符號沒有聯想提示路徑，需要加jsconfig.json
{
    "compilerOptions": {
      "target": "es2017",
      "allowSyntheticDefaultImports": false,
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"],

      }
    },
    "exclude": ["node_modules", "dist"],
    "include": ["src"]
  }
複製程式碼
  • 預設的axios沒有我們需要的業務閘道器配置和請求攔截
  • 預設的mixins，你一定有很多工具方法和資料需要全域性配置使用
  • 預設情況下，沒有業務列舉資料，建議新加一個列舉資料夾，用來存放各個業務的列舉資料
  • 預設情況下，api服務沒有mock設定和請求，可以根據自己需求設定 其中baseUrl需要設定為自己的域名地址，可以根據process.node.env控制，可以根據域名判斷。其中axios需要加必要的請求前後的攔截配置，其中使用者id的部分在必要的時候需要加入。
const transformRequest = (data = {}, headers) => {
  if (typeof data === 'string') return data

  const loginId = getUid()
  return JSON.stringify({...data, loginId})
}

let _axios = axios.create({
  baseURL: apiProxyUrl,
  headers: { 'Content-Type': 'application/json' },
  transformRequest: [transformRequest],
  timeout: 10000
})

// 配置返回攔截器
_axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  if (error.response) {
    console.warn(error.response)
    return Promise.reject(error.response)
  } else {
    return Promise.reject(error)
  }
})
複製程式碼
  • 預設的app跟元件可能沒有設定data為返回函式 ，返回物件

vue-router 路由死迴圈

下面這個報錯是因為路由進入了死迴圈，需要糾正檢視下路由的守衛部分有沒有迴圈，以及設定的攔截、非攔截路徑是否正確。

[vue-router] uncaught error during route navigation:
<failed to convert exception to string>
複製程式碼

data屬性沒有設定為函式並返回物件的報錯

顯性的返回物件就可以了

[Vue warn]: data functions should return an object:
複製程式碼

eslint配置自動驗證和自動修復

前提：配置了eslint外掛並且開啟了eslint對檔案的格式驗證。

預設加了很多eslint規則之後，專案執行就會報錯，但實際上肯定是期望軟體幫我們自動修正，那麼其設定的方法是什麼呢？分為兩部分，一部分是軟體的設定，一部分外掛的設定，這裡以mac --vscode為例，說明下如何設定自動糾正：

1、window電腦： 檔案 > 首選項 > 設定 開啟 VSCode 配置檔案 2、mac電腦 code>首選項 >設定

"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",{
        "language": "vue",
        "autoFix": true
    },"html",
    "vue"
],
複製程式碼

備註：如果你不想在專案中使用eslint，其在config/index.js，dev配置中，useEslint: true ，設定為false即可。

vue路由攔截實現儲存使用者資訊

場景：為了防止使用者突然離開，沒有儲存已輸入的資訊。

 //在路由元件中:mounted(){}，
  beforeRouteLeave (to, from, next) {
      if(使用者已經輸入資訊){
        //出現彈窗提醒儲存草稿，或者自動後臺為其儲存
      }else{
        next(true);//使用者離開
      }
  }
複製程式碼

相關文章