プロジェクトのシナリオ:
最近のプロジェクトの要件: 元の vue2 コードを vue3 に切り替える必要がある (理由: 以前のプロジェクトの実行が遅すぎるため、最適化が必要) 解決策: vue3 に基づいてコードをプルし、最近の元の vue2 コードをコピー
する少しずつ入ってください。以下、参考までに私が踏んだ落とし穴を記載します。
問題の説明
1. すべてのプロジェクト処理の依存関係が取り込まれた後、最初に発生する問題はプロジェクトを実行できないことです。そのため、プロジェクトの依存関係が大きくなりすぎないように、エラー プロンプトに従って段階的にプロジェクトをインストールします。
2. インストールの完了後、以前は elememt コンポーネントを使用していましたアイコンvue3 では画像を使用する前に画像を返す必要があるため、この方法を使用して解決しました。
最初の一歩
<el-button type="primary" :icon="icon.circlePlusFilled">登记物品</el-button>
<el-button type="primary" :icon="icon.tools">添加仓库</el-button>
<el-button type="primary" :icon="icon.menu">仓库盘点</el-button>
<el-button type="primary" :icon="icon.uploadFilled">导出报表</el-button>
ステップ2
// 正常的导入
import {
CirclePlusFilled,
Tools,
Menu,
UploadFilled
} from '@element-plus/icons-vue'
第三段階
// 在data里面定义icon属性
data(){
return {
icon:{
circlePlusFilled:CirclePlusFilled,
tools:Tools,
menu:Menu,
uploadFilled:UploadFilled
}
}
}
3. インターフェースは正常に動作しますが、データがリストに表示されません。
1> テンプレート タグが el-table の外側にネストされているかどうか、ネストされている場合は削除します。
2> vue2 をリストします:<template slot-scope="scope"></template>置き換えます。<template #default="scope" ></template>
4. ページングの問題については、次の記述方法に変更するだけです。
// layout里面是控住你展示的东西，箭头标识是分页在页面展示的位置（我写的是右侧）,
<el-pagination
v-model:currentPage="pageNum"
v-model:page-size="pageSize"
small
background
layout="->,total, prev, pager, next , jumper"
:total="total"
@size-change="sizeChange"
@current-change="currentChange"
/>
5.el-dropdown では問題が表示されない
私は el-tree を使用してドロップダウンを記述することに慣れていますが、el-dropdown-item を直接使用することもできます。書くときに注意すること<template #dropdown></template>
6.el-image-viewerが閉じられない（コンポーネントに登録する必要がない）
コンポーネントは v-if を使用して表示と非表示を決定します。on-close はサポートされていないため、直接 @close メソッドに切り替えて、このメソッドで定義したプロパティを閉じます。
<el-image-viewer v-if="showViewer" style="z-index: 9999" @close="closePhotos" :url-list="srcList"></el-image-viewer>
......
closePhotos(){
this.showViewer = false
},
7.監視監視
テスト中に、次のコードのように値が監視できない場合があることがわかり、
インターネット上で多くのブロガーの書き込みを見つけたところ、これは変更できることがわかりました。
watch: {
defaultFile: {
handler(val, oldVal) {
// 1.
// 已上传图片回显
let arr = val
if(arr.length>0){
arr.forEach((item, index, arr) => {
this.fileList.push({
url: item.url,
id: item.id
})
});
}else{
this.fileList = []
}
},
deep: true,
immediate:true,
}
},
説明: 即時は、ハンドラがウォッチに最初にバインドされたときにハンドラを実行するかどうかを示します。値が true の場合は、ハンドラ メソッドがウォッチで宣言されたときにすぐに実行されることを示します。値が false の場合、ハンドラ メソッドは次のように実行されます。通常はデータが変更されたときのみハンドラーが実行されます。
8.el-date-picker 日付ピッカーが正常にエコーを選択できない
主な理由は、value-format="YYYY-MM-DD" 代わりにこれを試してみることです
これは、主にトラブルを避けるために、vue3 プロジェクトにネストされた vue2 のコードです。vue3 の記述方法に切り替えるのが最善です。
遭遇した問題といくつかの警告があります。今日の共有が役立つことを願っています。