Vue2 project actual combat--Silicon Valley at station b--Shangpinhui project--detailed notes--day12

Image lazy loading

use Vue-Lazyloadplugin

首先安装插件：
npm i vue-lazyload@1.3.3

//第三步：引入懒加载图片
import aoteman from '@/assets/aoteman.gif'
//第一步：引入插件
import VueLazyload from 'vue-lazyload'
//第二步：注册插件---use实际调用install方法
Vue.use(VueLazyload, {
    
    
  //懒加载时的默认图
  loading: aoteman
})

全局就多了一个v-lazy指令

在search组件中使用v-lazy指令
<img v-lazy="good.defaultImg" />

form validation

use pluginvee-validate

首先安装插件：
npm i vee-validate@2
//main中东西太多了，src下新建plugins文件夹--validate.js

//表单验证--validate.js
//表单验证
import Vue from 'vue';
import VeeValidate from 'vee-validate';
//中文提示信息
import zh_CN from 'vee-validate/dist/locale/zh_CN'
Vue.use(VeeValidate)

//表单验证
VeeValidate.Validator.localize('zh_CN', {
    
    
    messages: {
    
    
        ...zh_CN.messages,
        is: (field) => `${
      
      field}必须与密码相同`
    },
    attributes: {
    
    
        phone: '手机号',
        code: '验证码',
        password: '密码',
        password1: '确认密码',
        agree: '协议'
    }
})

//引入表单校验插件--main.js
import '@/plugins/validate'

//在注册组件中使用
<label>手机号:</label>
<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>

//下面同理：验证码等
//协议复选框需要特别处理---自定义校验
//自定义校验规则--validate.js
VeeValidate.Validator.extend("agree", {
    
    
    validate: (value) => {
    
    
        return value
    },
    getMessage: (field) => field + "必须同意"
})

<input
  type="checkbox"
  v-model="agree"
  name="agree"
  v-validate="{ required: true, agree: true }"
  :class="{ invalid: errors.has('agree') }"
/>
<span>同意协议并注册《尚品汇用户协议》</span>
<span class="error-msg">{
    
    {
    
     errors.first("agree") }}</span>

//用户注册---register.js
async userRegister() {
    
    
  const success = await this.$validator.validateAll()
  if (success) {
    
    
    //原来的逻辑放这里面
  }
}

Routing lazy loading

//比如举例子--home组件
//路由懒加载意思就是不是一上来就加载，是需要或者用户跳到组件时才加载组件
//传统的引入一上来直接加载
import Home from '@/pages/Home'
//懒加载写成一个函数
{
    
    
    //简写形式，函数只有用户访问的时候执行一次
    path:'/home',
    component:()=>import ('@/pages/home')
}

package online

npm run build

After packaging, there will be js.mapa file, what is it?

After the project is packaged, the code is compressed and encrypted. If an error is reported at runtime, the output error message cannot be accurately located

With mapit, you can accurately locate the error just like the unencrypted code

So if the project is not needed, it can be mapdeleted

It can also be added when configuring the file productionSourceMap:true, so that there is no mapfile after packaging

2022.10.15 The project is over and sprinkle flowers! ! !