vite + vue + ts は、Element Plus コンポーネントをオンデマンドで自動的にインポートします。また、オンデマンド インポート後の ElMessage および ElLoading の問題を解決する方法 (「ElMessage」という名前の問題が見つかりません)。

オンデマンド導入後の ElMessage と ElLoading の問題、「ElMessage」という名前が見つからない問題に対する 2 段階のエレガントな解決策。npm パッケージをインポートしたり、何もダウンロードしたりする必要はなく、たった 5 行のコードだけで済みます。

目次

1.Element Plusコンポーネントライブラリを追加します

1.2. ダウンロード

1.2、自動インポート（公式推奨）

2. オンデマンドでインポートした後の ElMessage および ElLoading の問題

2.1、問題を解決する

2.2、分析の理由は次のとおりです。興味があればご覧ください。

---

1.Element Plusコンポーネントライブラリを追加します

1.1. ダウンロード

 npm

 npm install element-plus --save

  糸 

 yarn add element-plus 

1.2. 要素アイコンのダウンロード

npm install @element-plus/icons-vue

 element-iconも自動でインポートされますが、面倒なので手動でインポートしましょう

手動インポート方法:

import { Grid, RefreshRight } from "@element-plus/icons-vue";

1.3、自動インポート（公式推奨）

まず、これら 2 つのプラグインunplugin-vue-components を インストールする必要がありますunplugin-auto-import

vue3 プロジェクトの作成方法を教えるために vite+vue3+tsから来た場合は  、すでにダウンロードしているので、再度ダウンロードする必要はありません。要素のコメントを含む行を追加するだけです。

npm install -D unplugin-vue-components unplugin-auto-import

 vite.config.ts ファイル

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
//element
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),

    //element按需导入
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
      //element
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //element
      resolvers: [ElementPlusResolver()],
      //默认存放位置
      //dts: "src/components.d.ts",
    }),
  ],

})

2. オンデマンドでインポートした後の ElMessage および ElLoading の問題

2.1、問題を解決する

1. Element-puls.d.ts ファイルを作成します(名前が適切ではないと思われる場合は変更できますが、末尾は.d.tsにする必要があります)。

export {}
declare global {
  const ElMessage:typeof import('element-plus')['ElMessage'] 
  const ElLoading:typeof import('element-plus')['ElLoading'] 
}

 2. 次に、コード行を tsconfig.json ファイルに追加します。

{
    .......
	"include": [
		"src/**/*.ts",
		"src/**/*.d.ts",
		"src/**/*.tsx",
		"src/**/*.vue",
        //添加这行
		"Element-puls.d.ts"
		],
}

これで完了です。効果を確認してください

2.2、分析の理由は次のとおりです。興味があればご覧ください。

理由:通常のラベルコンポーネントとは異なります。どちらもスクリプト上で実行できる API であり、このファイルはグローバル API にもインポートされ、スクリプト内で使用できます。このファイルでは、オンデマンドで自動的にインポートされます。の、

ソース コードのエクスポートを確認するには、node_modules >element-plus>global.d.ts を参照してください。

// すべての内容が表示されるように、**** コメントを無視します。

これを見てみると2種類に分かれていることが分かりますが、

1 つはGlobalComponents (グローバル コンポーネント)、

1 つはComponentCustomProperties (コンポーネントのカスタム プロパティ)です 。

 

ただし、自動インポートでは、 components.d.ts ファイル 内のGlobalComponents (グローバル コンポーネント)のみがインポートされ ます。

ただし、 ComponentCustomProperties (コンポーネントのカスタム プロパティ)はインポートされません。 

*****そして、突然、コンポーネントのカスタム プロパティもインポートしてはどうだろうかと思いました。

それで、なぜ一緒にしないのですか？

       これは、インポート内のコンテンツが解析されて dts に配置されるたびに、vite.config.ts の構成によって src/auto-import.d.ts 内のコードが自動的に更新されるためです。

 

 原因がわかれば、解決することは難しくありません。