Vueで複数の添付ファイルをアップロードする実装例
序文この記事では主に、Vue プロジェクトでの添付ファイルアップロード機能の実装を記録します。これにより、単一/複数の添付ファイルのアップロードを実現し、ファイル形式を識別して異なるアイコンで機能を表示し、編集できるかどうかを制御できます。内容は簡潔で分かりやすいので、必要なときにすぐに取り出すことができます。 完全なコードについてはここをクリックしてください コアコード
<div class="アップロード-flie-btn">
<div class="btn-tips" @click="openFileSelect" v-show="editFlag">添付ファイルをアップロード</div>
<入力
スタイル="表示: なし"
タイプ="ファイル"
ref="ファイル入力"
multiple="複数"
@change="アップロードファイル"
/>
</div>
オープンファイル選択() {
// dispatchEvent は指定されたイベント ターゲットにイベントをディスパッチします。this.$refs.fileInput.dispatchEvent(new MouseEvent('click'));
}
// 複数の添付ファイルをアップロードする async uploadFile() {
_this = this とします。
this.loading = true;
// アップロードされたファイルを取得します。アップロードされるファイルの数を制限したい場合は、 // let files = [...this.$refs.fileInput.files].splice(0,limit); とすることができます。
// ここで、ファイル数が制限を超えたことを示すプロンプトを表示することもできます。let files = [...this.$refs.fileInput.files];
if (!ファイル || !ファイルの長さ) {
戻る;
}
// バックエンドインターフェースアドレス let url = `url`;
// バックエンドインターフェースをまとめてリクエストする Promise.all(
files.slice(0, files.length).map((ファイル) => {
定数データ = 新しい FormData();
data.append('ファイル', ファイル);
request.post(url, data, { を返します。
ヘッダー: {
'コンテンツタイプ': 'multipart/form-data',
},
});
}）私
).then((res) => {
_this.loading = false;
_this.$refs.fileInput.value = null;
})
.catch((エラー) => {
コンソールログ(エラー);
});
}
ファイルはコードの一部を示していますこの部分では、Word、Excel、PPT、PDF、画像、および txt 形式のファイルの表示を処理する vux コンポーネント ライブラリを使用します。その他の種類のファイルは「その他」として表示されます。また、iconfont にあるベクター グラフィックを自分で変更することもできます。トラバースされたデータ フィールドは、独自のデータ形式に応じて変更できます。
<スワイプアウト v-if="files.length">
<template v-for="(item,index) ファイル内">
<スワイプアウトアイテム v-bind:key="item.fileUrl" :disabled="!editFlag">
<div スロット="右メニュー">
<swipeout-button @click.native="deleteItem(item.fileUrl, index)" type="warn">削除</swipeout-button>
</div>
<div スロット="コンテンツ" クラス="デモコンテンツ vux-1px-t">
<div class="ファイルアイテム">
<a :href="item.url" rel="external nofollow" :download="item.fileName" class="file-look">
<!-- 単語 -->
<div
v-if="item.fileName.indexOf('.doc') > 0 || item.fileName.indexOf('.docx') > 0"
クラス="ファイルアイコン"
>
<svg
1601351611486 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1737"
幅="200"
高さ="200"
>
<パス
d="M1024 298.666667V85.333333c0-25.6-17.066667-42.666667-42.666667-42.666666H298.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v213.333334l384 85.333333 384-85.333333z"
塗りつぶし="#41A5EE"
p-id="1738"
/>
<パス
d="M1024 298.666667H256v213.333333l405.333333 85.333333 362.666667-85.333333z"
塗りつぶし="#2B7CD3"
p-id="1739"
/>
<path d="M1024 512H256v213.333333l384 64 384-64z" fill="#185ABD" p-id="1740" />
<パス
d="M1024 725.333333H256v213.333334c0 25.6 17.066667 42.666667 42.666667 42.666666h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666666v-213.333334z"
塗りつぶし="#103F91"
p-id="1741"
/>
<パス
d="M588.8 256H256v597.333333h324.266667c29.866667 0 59.733333-29.866667 59.733333-59.733333V307.2c0-29.866667-21.333333-51.2-51.2-51.2z"
不透明度=".5"
p-id="1742"
/>
<パス
d="M546.133333 810.666667H51.2C21.333333 810.666667 0 789.333333 0 759.466667V264.533333C0 234.666667 21.333333 213.333333 51.2 213.333333h499.2c25.6 0 46.933333 21.333333 46.933333 51.2v499.2c0 25.6-21.333333 46.933333-51.2 46.933334z"
塗りつぶし="#185ABD"
p-id="1743"
/>
<パス
d="M435.2 682.666667H371.2L298.666667 448 226.133333 682.666667H162.133333L93.866667 341.333333h59.733333l46.933333 238.933334 72.533334-230.4h51.2l68.266666 230.4L443.733333 341.333333h59.733334l-68.266667 341.333334z"
塗りつぶし="#FFFFFF"
p-id="1744"
/>
</svg>
</div>
<!-- エクセル -->
<div
v-else-if="item.fileName.indexOf('.xls') > 0 || item.fileName.indexOf('.xlsx') > 0"
クラス="ファイルアイコン"
>
<svg
1602124050240 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン= "1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1102"
幅="200"
高さ="200"
>
<パス
d="M682.666667 42.666667H298.666667c-25.6 0-42.666667 17.066667-42.666667 42.666666v213.333334l426.666667 213.333333 170.666666 64 170.666667-64V298.666667l-341.333333-256z"
塗りつぶし="#21A366"
p-id="1103"
/>
<パス
d="M256 298.666667h426.666667v213.333333H256z"
塗りつぶし="#107C41"
p-id="1104"
/>
<パス
d="M1024 85.333333v213.333334h-341.333333V42.666667h298.666666c21.333333 0 42.666667 21.333333 42.666667 42.666666z"
塗りつぶし="#33C481"
p-id="1105"
/>
<パス
d="M682.666667 512H256v426.666667c0 25.6 17.066667 42.666667 42.666667 42.666666h682.666666c25.6 0 42.666667-17.066667 42.666667-42.666666v-213.333334l-341.333333-213.333333z"
塗りつぶし="#185C37"
p-id="1106"
/>
<パス
d="M588.8 256H256v597.333333h324.266667c29.866667 0 59.733333-29.866667 59.733333-59.733333V307.2c0-29.866667-21.333333-51.2-51.2-51.2z"
不透明度=".5"
p-id="1107"
/>
<パス
d="M546.133333 810.666667H51.2C21.333333 810.666667 0 789.333333 0 759.466667V264.533333C0 234.666667 21.333333 213.333333 51.2 213.333333h499.2c25.6 0 46.933333 21.333333 46.933333 51.2v499.2c0 25.6-21.333333 46.933333-51.2 46.933334z"
塗りつぶし="#107C41"
p-id="1108"
/>
<パス
d="M145.066667 682.666667L256 512 153.6 341.333333h81.066667l55.466666 106.666667c8.533333 12.8 8.533333 21.333333 12.8 25.6l12.8-25.6L375.466667 341.333333h76.8l-102.4 170.666667 106.666666 170.666667h-85.333333l-64-119.466667c0-4.266667-4.266667-8.533333-8.533333-17.066667 0 4.266667-4.266667 8.533333-8.533334 17.066667L226.133333 682.666667H145.066667z"
塗りつぶし="#FFFFFF"
p-id="1109"
/>
<パス
d="M682.666667 512h341.333333v213.333333h-341.333333z"
塗りつぶし="#107C41"
p-id="1110"
/>
</svg>
</div>
<!-- ppt -->
<div
v-else-if="item.fileName.indexOf('.ppt') > 0 || item.fileName.indexOf('.pptx') > 0"
クラス="ファイルアイコン"
>
<svg
1602124175604 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン= "1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1258"
幅="200"
高さ="200"
>
<パス
d="M968.704 135.168h-430.08v752.64h430.08c15.36 0 26.624-12.288 26.624-26.624V162.816c0-15.36-11.264-27.648-26.624-27.648z"
塗りつぶし="#FF8A65"
p-id="1259"
/>
<パス
d="M512 646.144h376.832v53.248H512z m0 107.52h376.832v54.272H512z m161.792-483.328c-89.088 0-161.792 72.704-161.792 161.792C512 521.216 584.704 593.92 673.792 593.92s161.792-72.704 161.792-161.792H673.792V270.336z"
塗りつぶし="#FBE9E7"
p-id="1260"
/>
<パス
d="M727.04 216.064v161.792h161.792c0-89.088-72.704-161.792-161.792-161.792z"
塗りつぶし="#FBE9E7"
p-id="1261"
/>
<パス
d="M592.896 996.352L28.672 888.832V135.168L592.896 27.648z"
塗りつぶし="#E64A19"
p-id="1262"
/>
<パス
D = "M319.488 327.68H192.512V368.64H78.848V569.344H40.96C44.032 0 78.848-11.264 104.448-34.816 25.6-22.528 366.592 409.6 327.68 319.488 327.68Z M-14.336 178.176H-33.792V391.168H33.792C43.008 0 64.512 18.432 64.512 56.32 0
塗りつぶし="#FFFFFF"
p-id="1263"
/>
</svg>
</div>
<!-- pdf -->
<div v-else-if="item.fileName.indexOf('.pdf') > 0" class="ファイルアイコン">
<svg
1602124241991 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1536"
幅="200"
高さ="200"
>
<パス
D = "M877.874285 926.464244A48.742278 48.742278 0 1-48.793478 48.793478H146.432914A48.742278 48.74278 0 4838A48.742278 48.742278 0 0 1 146.432914 0.00256H418.814953A48.742278 48.742278 233564 21.657546 14.182364 34.611114v613.886465z "
塗りつぶし="#EBECF0"
p-id="1537"
/>
<パス
D = "M877.874285 926.464244V48.793478A48.742278 48.742278 0 0 1-48.793478 2278V-48.793478A48.742278 48.742278 0 0 0 48.793478 48.793478H682.647893A48.742278 48.742278 0 0
塗りつぶし="#C1C7D0"
p-id="1538"
/>
<パス
d="M0.15488 536.372419H975.358842v243.813791a48.742278 48.742278 0 0 1-48.742279 48.742278H48.897158a48.742278 48.742278 0 0 1-48.742278-48.742278v-243.813791z"
塗りつぶし="#FF5630"
p-id="1539"
/>
<パス
d="M97.639436 536.372419V438.836663L0.15488 536.372419h97.484556z m780.234849 0l0.972798-97.535756 97.023757 97.535756h-97.996555z"
塗りつぶし="#DE350B"
p-id="1540"
/>
<パス
d="M243.96867 585.165897h84.838188c15.513561-0.767998 30.668723 4.863988 41.932695 15.564761 10.803173 10.854373 16.639958 25.702336 16.07676 40.959898 0.511999 15.308762-5.324787 30.105525-16.07676 40.959897-11.673571 11.059172-27.340732 16.895958-43.417491 16.12796h-48.742278v76.543809h-34.611114v-190.156325z m32.665518 81.919795h43.878291a42.444694 42.444694 0 0 0 25.855935-6.348784 23.91034 23.91034 0 0 0 7.782381-19.96795c0-16.639958-10.905573-24.883138-32.665519-24.883138h-44.851088v51.199872z m134.092465-79.001402h77.004608c22.374344-0.972798 43.92949 8.396779 58.521453 25.343936 15.462361 19.302352 23.244742 43.571091 21.964745 68.24943 1.023997 24.934338-6.297584 49.510276-20.991947 69.734225a71.679821 71.679821 0 0 1-59.494251 28.774329H410.726653v-192.10192z m32.665519 158.924402h44.339089a43.417491 43.417491 0 0 0 36.095909-17.049557c9.420776-13.875165 13.823965-30.566324 12.697569-47.308682a70.707023 70.707023 0 0 0-13.670366-48.742278 48.742278 48.742278 0 0 0-37.529506-16.588758h-41.983895v129.689275z m288.152879-128.204479h-100.914948v45.311887h100.914948v31.231922h-100.914948v81.919795h-32.665518v-190.156325h133.631666v31.692721z"
塗りつぶし="#FFFFFF"
p-id="1541"
/>
<パス
d="M877.874285 312.577779v6.809583h-263.83294a48.742278 48.742278 0 0 1-48.742278-48.742279V0.00256a48.742278 48.742278 0 0 1 34.611113 14.131165l264.293739 263.83294c8.959978 9.215977 13.823965 21.708746 13.670366 34.611114z"
塗りつぶし="#C1C7D0"
p-id="1542"
/>
</svg>
</div>
<!-- 画像 -->
<div
v-else-if="item.fileName.indexOf('.jpg') > 0 || item.fileName.indexOf('.jpeg') > 0 || item.fileName.indexOf('.png') > 0"
クラス="ファイルアイコン"
>
<svg
1602124262555 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="1680"
幅="200"
高さ="200"
>
<パス
D = "M901.565663 926.72A48.617739 48.617739 0 0 1-48.61774 48.662261H170.429663A48.61739 48.6173990 8.617739 48.617739 0 0 1 170.429663 0H418.860521A49.641739 49.641739 0 0 1 34.816 14.336L263.479653 263.7022261A48.973991348.971348.971348.9791348.9391348.9313 -0.534261 613.910261z "
塗りつぶし="#EBECF0"
p-id="1681"
/>
<パス
d="M901.565663 926.72v48.617739a48.617739 48.617739 0 0 1-48.61774 48.617739H170.429663a48.617739 48.617739 0 0 1-48.61774-48.617739v-48.617739a48.617739 48.617739 0 0 0 48.61774 48.617739h682.51826a48.617739 48.617739 0 0 0 48.61774-48.617739z"
塗りつぶし="#C1C7D0"
p-id="1682"
/>
<パス
d="M24.042184 536.576h975.382261v243.712a48.617739 48.617739 0 0 1-48.662261 48.662261H72.659923A48.617739 48.617739 0 0 1 24.042184 780.288v-243.712z"
塗りつぶし="#3EB7FC"
p-id="1683"
/>
<パス
d="M121.856445 536.576V439.296L24.576445 536.576z m779.798261 0l1.024-97.28 97.28 97.28z"
塗りつぶし="#2F9CCC"
p-id="1684"
/>
<パス
d="M905.216445 312.32v6.633739h-264.192a48.617739 48.617739 0 0 1-48.662261-48.617739V0a49.641739 49.641739 0 0 1 34.816 14.336l263.479653 263.702261a48.484174 48.484174 0 0 1 14.336 34.326261z"
塗りつぶし="#C1C7D0"
p-id="1685"
/>
<パス
D = "M354.259923 700.905739A87.930435 87.930435 0 0 1-17.808695 2V-38.912A38.466783 38.466783 0 0 0 24.576 8.192C19.990261 0 29.696-14.870261 29.696-45.056V-116.201739H41.494261Z "
塗りつぶし="#FFFFFF"
p-id="1686"
/>
<パス
d="M438.806706 709.097739v67.584h-41.494261v-193.536h66.56q72.214261 0 72.214261 61.44a57.388522 57.388522 0 0 1-22.038261 47.638261 80.940522 80.940522 0 0 1-54.761739 17.408h-20.48z m0-93.495652v62.330435h17.808696c24.041739 0 36.329739-10.774261 36.329739-31.744s-11.798261-30.72-35.84-30.72z"
塗りつぶし="#FFFFFF"
p-id="1687"
/>
<パス
D = "M723.968445 763.859478A138.729739 138.729739 0 1-69.632 16.384 100.886261 100.886261 98.704696 98.704696 0 0 1 29.206261-74.21774 106.852174 106.852174 0 1 77.289739-28.672 158.764522 158.764522220 107.163826 0 0 0-54.761739-13.356522 60.549565 60.549565 0 0-45.545739 18.432 66.248348 66.248348 0 0-17.408 47.59374 55.162435 55.162435 0 0 0 43.008 16.91826 58.813217 58.813217 0 0 0 26.713044-5.12V-40.158608H-38.912V-33.30261HH-339611796117961796179617961796
塗りつぶし="#FFFFFF"
p-id="1688"
/>
</svg>
</div>
<!-- txt -->
<div v-else-if="item.fileName.indexOf('.txt') > 0" class="ファイルアイコン">
<svg
1602124341675 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4641"
幅= "200"
高さ="200"
>
<パス
d="M901.632 926.72c0 27.136-22.016 48.64-48.64 48.64H170.496c-27.136 0-48.64-22.016-48.64-48.64V48.64C121.856 22.016 143.36 0 170.496 0h418.816c12.8 0 25.6 5.12 34.816 14.336l263.68 263.68c9.216 9.216 14.336 21.504 14.336 34.816l-0.512 613.888z"
塗りつぶし="#EBECF0"
p-id="4642"
/>
<パス
d="M901.632 926.72v48.64c0 27.136-22.016 48.64-48.64 48.64H170.496c-27.136 0-48.64-22.016-48.64-48.64V926.72c0 27.136 22.016 48.64 48.64 48.64h682.496c27.136 0 48.64-22.016 48.64-48.64z"
塗りつぶし="#C1C7D0"
p-id="4643"
/>
<パス
d="M24.064 536.576h975.36v243.712c0 27.136-22.016 48.64-48.64 48.64H72.704c-27.136 0-48.64-22.016-48.64-48.64v-243.712z"
塗りつぶし="#0A84E8"
p-id="4644"
/>
<パス
d="M121.856 536.576v-97.28l-97.28 97.28h97.28z m779.776 0l1.024-97.28 97.28 97.28h-98.304z"
塗りつぶし="#005584"
p-id="4645"
/>
<パス
d="M901.632 312.32v6.656h-263.68c-27.136 0-48.64-22.016-48.64-48.64V0c12.8 0 25.6 5.12 34.816 14.336l264.192 263.68c8.704 9.216 13.824 21.504 13.312 34.304z"
塗りつぶし="#C1C7D0"
p-id="4646"
/>
<パス
d = "M389.12 589.312V27.648H324.608V16984H291.84V-16984H227.328V-27.648H389.12ZM466.432 589.312L46.592 69.6392-46.592-692-6992-69.592-69.592-69.592-69.592-69.592-69.592-69.592 6 95.232 71.168 101.888H-39.424L-50.688-76.288-50.688 76.288H-39.424L70.656-101.888-66.048-95.232H38.4ZM798.20827.2088.208.208.27.27.27.27.27. 984H701.44V-169.984H-64.512V-27.648H161.28Z ""
塗りつぶし="#FFFFFF"
p-id="4647"
/>
</svg>
</div>
<!-- その他 -->
<div v-else class="ファイルアイコン">
<svg
1602124370240 より
クラス="アイコン"
ビューボックス="0 0 1024 1024"
バージョン= "1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="6067"
幅="200"
高さ="200"
>
<パス
d="M688.6 2H120.8c-17.1 0-27.9 12.9-27.9 35.7V1001c0 6.2 14 19.6 27.9 19.6h782.4c17.1 0 27.9-12.9 27.9-19.6V238.3c0-12.9-3.6-16-3.6-19.7L698.9 8.7c0-6.7-3.6-6.7-10.3-6.7z m0 0"
塗りつぶし="#E7EFF8"
p-id="6068"
/>
<パス
d="M93 1010.2c0 5.7 4.7 10.3 10.3 10.3h817.3c5.7 0 10.3-4.7 10.3-10.3V819.6H93v190.6z"
塗りつぶし="#9FA0A3"
p-id="6069"
/>
<パス
D = "M340.8 915.4C0-10.1 3.5-18.5 10.5-25.3 7-6.8 15.8-10.1 26.2-10.1 10.4 0 19.2 3.3 26.5 10 7.2 6.7 10.8 6-10.10.5-15.3-10.5-25.5Z M128.5 0C0-10.2 3.5-18.7 10.5-25.4 7-6.7 15.8-10 26.2-10 10.4 0 19.2 3.4 26.4 10.1 7.2 6.8 10.7 15.2 10.7 25.3 3 0-18.9-3.4-26-10.1S-10.5-15.3-10.5-25.5Z M128.1 0C0-10.4 3.5-18.8 10.5-25.5S15.8-9.9 26.4-9.9C10.7 0 19.6 3.4 26.7 10.1 7.1 6.8 10.6 .8-27 9.8-10.3 0-18.9-3.5-26-10.4S-10.5-15.3-10.5-25z "
塗りつぶし="#FFFFFF"
p-id="6070"
/>
<パス
D = "M533.7 484.6H-66.8V-23.8C0-18 3.3-33.4 9.9-46.2 6.6-12.7 17.6-25.5 33.1-38.3 17.9-14.7 .4-21.3-11.1-37.7-11.1-31.7 0-61.2 11.8-88.6 35.4V-77.9C30.2-16.9 62.5-25.3 96.9-25.3 53.6-8.8 16.4-23.9 33.2-45.3 50.6-18.1 14.3-29.6 25.6-34.5 33.8-5 8.2-7.5 18-7.5 29.5V17.4Z M-33.2 36.9C12.8 0 23.8 4.1 32.9 9.6S513.3 606 500.5 606C-13 0-24-4.2-32.9-12.5-8.9-8.3-13.4-18.2-13.4-29.5 0-11.6 4.5-21.6 13.4-30 9-8.3 20-12.5 32.9-12.5z "
塗りつぶし="#9FA0A3"
p-id="6071"
/>
</svg>
</div>
<div class="ファイル名">{{item.fileName}}</div>
</a>
</div>
</div>
</スワイプアウトアイテム>
</テンプレート>
</スワイプアウト>
上記は、Vue での複数添付ファイルアップロードの実装例の詳細内容です。Vue の複数添付ファイルアップロードの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Dockerのデフォルトネットワークセグメントの正しい変更手順
推薦する
Dockerfile を使用したカスタムイメージの構築の実装
目次序文Dockerfile の紹介Dockerfileはイメージプロセスを構築するDockerfi...
CSS と HTML とフロントエンド テクノロジーのレイヤー図
フロントエンドテクノロジー層 （写真は少し極端ですが、参考までに） Javascript と DOM...
vue3 の setUp とリアクティブ関数の使用方法の詳細な説明
1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...
JavaScript Promise の徹底解説
目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...
Vue でのカスタムディレクティブの基本的な使用方法
目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方（１...
HTML でのフォームとフォーム送信操作に関する情報のコレクション
ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...
CSS でマウスの位置をマッピングし、マウスを動かしてページ要素を制御する (サンプル コード)
マウスの位置をマッピングしたり、ドラッグ効果を実装したりすることは、 JavaScriptで行うこと...
JavaScript イベントバブリング、イベントキャプチャ、イベント委任の詳細な説明
1. イベントバブリング: JavaScript イベント伝播のプロセスでは、要素でイベントがトリガ...
Linux での SELinux を理解する方法
目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...
ES6スプレッド演算子の使用例
目次スプレッド演算子とレスト演算子とは何ですか?配列スプレッド演算子残り演算子（コレクション関数）ス...
複数の無関係なテーブルからデータをクエリし、MySQL でページングする方法
MySQL 複数の無関係なテーブルクエリデータとページング機能要件主キーと外部キーの関連付けがない ...
テーブルリストを破棄するには、標準のdl、dt、ddタグを使用します。
現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...
vscode で Prettier Code プラグインを使用する詳細なチュートリアル
なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...
Nginx リバース プロキシを使い始める
目次概要リバースプロキシの役割Nginx リバース プロキシ イントラネット侵入 8081 ポートの...
Vueの最初のレンダリングのプロセス全体についての簡単な説明
目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...