1. 程式人生 > >vue專案實踐004~~~一籃子的實踐技巧

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

前言

繼續總結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,len,amount} //優化版本二 :可以支援批量的匯入需要賦值的,對於拷貝物件,用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);//使用者離開
      }
  }
複製程式碼