图片懒加载
使用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项目完结撒花！！！