Imagen de carga diferida
Carga diferida de imágenes significa carga diferida de imágenes. Solo cargue las imágenes en el área visible de la página y luego cargue las imágenes en la ventana gráfica correspondiente al desplazarse hasta la parte inferior de la página. Hay
un complemento en vue
vue-lazyload - npm (npmjs.com)
npm i vue-lazyload 
Para usarlo, aquí introducimos una imagen, y luego en la configuración del complemento, configure la imagen predeterminada de carga diferida como esta
Y así es como configurarlo
Luego descubrimos que la imagen no estaba cargada, así que revisé el documento. Parece estar descargando esta versión.
npm i [email protected]Y funcionó
Cuando la imagen no está cargada, se mostrará así de forma predeterminada
Luego hable sobre el principio de carga diferida de imágenes.
complemento personalizado
Escribe un complemento y úsalo.
Luego, los dos parámetros pasados, el primero es vue, y el segundo es el valor pasado en
Este elemento es la estructura de la etiqueta de la página web params es el parámetro entrante
Luego implementamos una función para modificar caracteres en minúsculas a caracteres en mayúsculas
validación de formulario vee-validate usando
Uso básico de vee-validate
Paso 1: instalación e introducción del complemento
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)Paso dos: información rápida
VeeValidate.Validator.localize('zh_CN', {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
},
attributes: { // 给校验的 field 属性名映射中文名称
phone: '手机号',
code: '验证码',
password:'密码',
password1:'确认密码',
isCheck:'协议'
}
})Paso tres: uso básico
<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 exito = esperar esto.$validator.validateAll(); //Validación de todos los formularios
//reglas de validación personalizadas
//El acuerdo de definición debe estar marcado para estar de acuerdo
VeeValidate.Validator.extend('agree', {
validate: value => {
return value
},
getMessage: field => field + '必须同意'
})Registro de referencia
Completa el aviso
Reemplazar la estructura en el componente.
El efecto es así, y luego reemplaza otra información del formulario y modifica sus datos de acuerdo con esto
Se realiza la validación para otros formularios. Y la siguiente marca debe personalizarse
Juzgar que todos los formularios se verifican con éxito
Luego se completa el juicio de validación del formulario.
Enrutamiento de carga diferida
Enrutamiento de carga diferida | Vue Router (vuejs.org)
Significa importar a pedido
Al compilar aplicaciones en paquetes, los paquetes de JavaScript pueden volverse muy grandes y afectar la carga de la página. Si podemos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código y luego cargar los componentes correspondientes cuando se accede a la ruta, será más eficiente.
se puede simplificar
simplificar de nuevo
El principio de simplificación es la función flecha.
Procesar archivos de mapa
paquete npm ejecutar compilación
hazlo
Después de empaquetar el proyecto, el código se comprime y cifra.Si se informa un error en tiempo de ejecución, el mensaje de error de salida no puede saber con precisión dónde el código informó el error.
Con un mapa, puede ser como un código sin cifrar, y el resultado exacto es qué fila y columna son incorrectas.
Entonces este archivo se puede eliminar si el proyecto no lo necesita.
vue.config.js > configuración
producciónSourceMap: falso
Vaya al archivo de configuración para configurar, y luego, la próxima vez que empaque el archivo de mapa, desaparecerá.