画像の遅延読み込み
画像の遅延読み込みとは、画像の遅延読み込みを意味します。ページの表示領域にのみ画像をロードし、ページの下部までスクロールすると、対応するビューポートに画像をロードします。vue には
プラグインがあります
vue-lazyload - npm (npmjs.com)
npm i vue-lazyload 
これを使用するには、ここで画像を導入し、プラグインの設定で遅延読み込みのデフォルト画像を次のように設定します。
それが彼をセットアップする方法です
すると、画像が読み込まれていないことが判明したので、ドキュメントを確認しました。このバージョンをダウンロードしているようです
npm i [email protected]そしてそれはうまくいきました
画像が読み込まれていない場合、デフォルトではこのように表示されます
次に、画像の遅延読み込みの原理について説明します。
カスタムプラグイン
プラグインを作成して使用する
次に、2 つのパラメータが渡されます。1 つ目は vue、2 つ目は渡された値です。
この要素は Web ページのタグの構造です。 params は受信パラメータです。
次に、小文字を大文字に変更する機能を実装しました。
vee-validate を使用したフォーム検証
vee-validate の基本的な使用法
vee-validate - npm (npmjs.com)
ステップ 1: プラグインのインストールと導入
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)ステップ 2: プロンプト情報
VeeValidate.Validator.localize('zh_CN', {
messages: {
...zh_CN.messages,
is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
},
attributes: { // 给校验的 field 属性名映射中文名称
phone: '手机号',
code: '验证码',
password:'密码',
password1:'确认密码',
isCheck:'协议'
}
})ステップ 3: 基本的な使用方法
<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 success = await this.$validator.validateAll(); //すべてのフォーム検証
//カスタム検証ルール
// 同意するには、定義の同意にチェックを入れる必要があります
VeeValidate.Validator.extend('agree', {
validate: value => {
return value
},
getMessage: field => field + '必须同意'
})リファレンス登録
プロンプトを完了します
コンポーネント内の構造を置き換えます
効果は次のようになります。次に、他のフォーム情報を置き換え、これに従ってデータを変更します。
他のフォームの検証が行われます。そして、次のティックをカスタマイズする必要があります
すべてのフォームの認証が成功したと判断
以上でフォームバリデーションの判定が完了します
ルーティングの遅延読み込み
ルーティングの遅延読み込み | Vue Router (vuejs.org)
オンデマンドでインポートすることを意味します
パッケージでアプリを構築する場合、JavaScript バンドルが非常に大きくなり、ページの読み込みに影響を与える可能性があります。異なるルートに対応するコンポーネントを異なるコード ブロックに分割し、ルートにアクセスするときに対応するコンポーネントを読み込むことができれば、より効率的になります。
簡略化できる
もう一度簡略化します
単純化の原理はアロー関数です
プロセスマップファイル
パッケージ npm ビルドを実行する
終わらせる
プロジェクトがパッケージ化された後、コードは圧縮および暗号化されます。実行時にエラーが報告された場合、出力エラー メッセージでは、コードがエラーを報告した場所を正確に知ることができません。
マップの場合、暗号化されていないコードのようなものになる可能性があり、正確な出力はどの行と列が間違っているかということになります。
したがって、プロジェクトに必要がない場合は、このファイルを削除できます。
vue.config.js > 設定
ProductionSourceMap:false
構成ファイルに移動して構成すると、次回マップ ファイルをパックすると、そのマップ ファイルは失われます。