画像の遅延読み込み
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 プロジェクトが終了しお花を撒きました！！！