Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day12

图片懒加载

使用Vue-Lazyload插件

首先安装插件：
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" />

表单验证

使用插件vee-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) {
    //原来的逻辑放这里面
  }
}

路由懒加载

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

打包上线

npm run build

打包完之后会有js.map文件，是什么

项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确定位

有了 map 就可以像未加密的代码一样，准确定位报错

所以如果项目不需要是可以删掉map的

也可以在配置文件时添加productionSourceMap:true，这样打包后就没有map文件

2022.10.15项目完结撒花！！！