Image lazy loading
Lazy loading of pictures means lazy loading of pictures. Only load the pictures on the visible area of the page, and then load the pictures on the corresponding viewport when scrolling to the bottom of the page. There
is a plugin in vue
vue-lazyload - npm (npmjs.com)
npm i vue-lazyload 
To use it, here we introduce a picture, and then in the configuration of the plug-in, configure the lazy loading default picture as this
And that's how to set him up
Then we found that the picture was not loaded, so I checked the document. It seems to be downloading this version
npm i [email protected]and it worked
When the picture is not loaded, it will display like this by default
Then talk about the principle of lazy loading of pictures
custom plugin
Write a plugin and use it
Then the two parameters passed in, the first is vue, and the second is the value passed in
This element is the structure of the web page tag params is the incoming parameter
Then we implemented a function to modify lowercase characters to uppercase characters
vee-validate form validation using
Basic use of vee-validate
vee-validate - npm (npmjs.com)
Step 1: Plug-in installation and introduction
npm i vee-validate@2 --save 安装的插件安装2版本的import VeeValidate from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN' // 引入中文 message
Vue.use(VeeValidate)Step Two: Prompt Information
VeeValidate.Validator.localize('zh_CN', {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
},
attributes: { // 给校验的 field 属性名映射中文名称
phone: '手机号',
code: '验证码',
password:'密码',
password1:'确认密码',
isCheck:'协议'
}
})Step Three: Basic Use
<input
placeholder="请输入你的手机号"
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(); //All form validation
//custom validation rules
//The definition agreement must be ticked to agree
VeeValidate.Validator.extend('agree', {
validate: value => {
return value
},
getMessage: field => field + '必须同意'
})Reference registration
Complete the prompt
Replace the structure in the component
The effect is like this, and then replace other form information and modify its data according to this
Validation for other forms is done. And the following tick needs to be customized
Judging that all forms are verified successfully
Then the form validation judgment is completed
Routing lazy loading
Routing lazy loading | Vue Router (vuejs.org)
It means to import on demand
When building apps in packages, JavaScript bundles can become very large, affecting page load. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed, it will be more efficient.
can be simplified
Simplify again
The principle of simplification is the arrow function
Process map files
package npm run build
get it done
After the project is packaged, the code is compressed and encrypted. If an error is reported at runtime, the output error message cannot accurately know where the code reported the error.
With a map, it can be like an unencrypted code, and the exact output is which row and column are wrong.
So this file can be removed if the project does not need it
vue.config.js > configuration
productionSourceMap:false
Go to the configuration file to configure, and then the next time you pack the map file, it will be gone.