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);//使用者離開
}
}
複製程式碼