正しい要素とメッセージ ボックスのスタイルを適用するにはどうすればよいですか?

Question

これは、私が構築した最小限のページでの要素とメッセージ ボックスの外観です。

element-plus ドキュメントにあるものと同じようにしたいと考えています。

私は Vue を vite および ElementPlus とともに使用します。 vite と element plus のドキュメントから設定をコピーしました。他の多くの要素を試してみましたが、それらはすべて正しくレンダリングされました。問題を再現できる最小限の App.vue コンポーネント:

リーリー

Myvite.config.js

リーリー

ページは非常に小さいです:

リーリー

スクリプトについても同様です:

リーリー

ついに私の package.json:

リーリー

Answer 1

「unplugin-auto-import/vite」および「unplugin-vue-components/vite」を使用した場合は必要ありません:

Answer 2

ドキュメントでは十分に説明されていないと思います https://element -plus.org/en-US/guide/quickstart.html

ElMessage または ElMessageBox を使用する場合、そのスタイル を手動でインポートする必要がある場合があります。 クイック スタート/オンデマンドのインポートセクションにはこれについて何も記載されておらず、他のすべての要素はそのまま使用できるため、少し混乱しています。 リーリー