圖片懶加載

圖片懶加載，就是圖片延遲加載。只加載頁(yè)面可視區(qū)域上的圖片，等滾動(dòng)到頁(yè)面下面時(shí)，再加載對(duì)應(yīng)視口上的圖片
而在vue中有一個(gè)插件

vue-lazyload - npm (npmjs.com)

npm i vue-lazyload

?

?

去使用他，這里我們引入了一張圖片，然后在插件的配置中，配置了懶加載默認(rèn)的圖片為這張

?然后就是這樣去設(shè)置他

?然后我們就發(fā)現(xiàn)了圖片并沒(méi)有加載出來(lái)，我查詢了文檔。好像要下這個(gè)版本

npm i vue-lazyload@1.3.3

然后成功了

?圖片沒(méi)有加載的時(shí)候，就默認(rèn)顯示這樣

?然后說(shuō)一下圖片懶加載的原理

自定義插件

書寫插件，并去使用它

然后傳入的倆個(gè)參數(shù)，第一個(gè)是vue,第二個(gè)是傳入的值

這個(gè)element就是網(wǎng)頁(yè)標(biāo)簽的結(jié)構(gòu) params就是傳入的參數(shù)

然后我們就實(shí)現(xiàn)了一個(gè)將小寫字符修改成大寫字符的功能

vee-validate表單驗(yàn)證使用

vee-validate 基本使用

vee-validate - npm (npmjs.com)

第一步：插件安裝與引入

npm i vee-validate@2 --save??安裝的插件安裝2版本的

import VeeValidate from 'vee-validate'import zh_CN from 'vee-validate/dist/locale/zh_CN'???// 引入中文 messageVue.use(VeeValidate)

第二步：提示信息

VeeValidate.Validator.localize('zh_CN', {messages: {...zh_CN.messages,is: (field) => `${field}必須與密碼相同` // 修改內(nèi)置規(guī)則的 message，讓確認(rèn)密碼和密碼相同},attributes: { // 給校驗(yàn)的 field 屬性名映射中文名稱phone: '手機(jī)號(hào)',code: '驗(yàn)證碼',password:'密碼',password1:'確認(rèn)密碼',isCheck:'協(xié)議'}})

第三步：基本使用

<inputplaceholder="請(qǐng)輸入你的手機(jī)號(hào)"v-model="phone"name="phone"v-validate="{ required: true, regex: /^1\d{10}$/ }":class="{ invalid: errors.has('phone') }"/><span class="error-msg">`{{ errors.first("phone") }}</span>

const success = await this.$validator.validateAll(); //全部表單驗(yàn)證

//自定義校驗(yàn)規(guī)則

//定義協(xié)議必須打勾同意

VeeValidate.Validator.extend('agree', {validate: value => {return value},getMessage: field => field + '必須同意'})

引用注冊(cè)

完成提示信息

將組件內(nèi)的結(jié)構(gòu)進(jìn)行替換

效果是這樣的，然后根據(jù)這個(gè)替換其他的表單信息，修改其數(shù)據(jù)

完成了其他表單的驗(yàn)證。而下面的勾選需要自定義

判斷驗(yàn)證所有表單都成功了

然后表單驗(yàn)證判斷完成

路由懶加載

路由懶加載 | Vue Router (vuejs.org)

就是按需導(dǎo)入的意思

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

可以簡(jiǎn)化

再簡(jiǎn)化

簡(jiǎn)化的原理就是箭頭函數(shù)

處理map文件

打包?npm run build

搞定

項(xiàng)目打包后，代碼都是經(jīng)過(guò)壓縮加密的，如果運(yùn)行時(shí)報(bào)錯(cuò)，輸出的錯(cuò)誤信息無(wú)法準(zhǔn)確得知是哪里的代碼報(bào)錯(cuò)。

有了map就可以像未加密的代碼一樣，準(zhǔn)確的輸出是哪一行那一列有錯(cuò)。

所以該文件如果項(xiàng)目不需要是可以除掉的

vue.config.js >配置

productionSourceMap:false

去配置文件去配置，然后下次打包map文件就沒(méi)了