バージョンに注意してください！

バージョンなどのコンポーネントの導入条件が明確に見えるので、かなりの遠回りを省くことができます。

ここでは、もともと vite で作成した vue3 フレームワークを削除し、コンポーネントとの互換性を高めるために vue-cli@3 (実際には vue-cli@5) で vue2 を再構築しました。

具体的な導入プロセスについては公式サイトをご参照ください: Element - 世界で最も人気のある Vue UI フレームワーク

基本的には公式サイトを参照し、遭遇した問題と合わせて自分用にメモしておき、少しでもお役に立てれば幸いですので読み進めていただくこともできます。

要素全体を紹介する

main.js に次のように記述します。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

上記のコードでElementの導入は完了です。スタイルファイルは別途インポートする必要があることに注意してください。

私の目的は公式ウェブサイト以上です。 $mount('#app'

私の vue-cli のバージョンが少し高いため、盲目的に推測しています。後で問題があれば調整します。私から学ばないでください。

さらに、初心者が遭遇する可能性のある次のようなトラブルにも特に注意する必要があります。

インストールの完了後にそのようなエラーが発生した場合でも、心配する必要はありません。それは、main.js ファイル内で、element-ui によって導入された位置を調整する必要があるためです。

公式サイトのインストールチュートリアルをここに完全にコピーすることはできません。通常は、../node_modules/ を先頭に追加する必要があります。ここではあまり説明しません。理解できない場合は、自分で検索してください。

オンデマンドでインポート (推奨)

babel-plugin-componentの助けを借りて、プロジェクトのサイズを削減するという目的を達成するために必要なコンポーネントのみを導入できます。

まず、babel-plugin-component をインストールします。

npm install babel-plugin-component -D

次に、.babelrc を次のように変更します。

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

このファイルは見つける必要があります。トラブルが心配な場合は、ローカルフォルダー内で直接検索してみてください。

私はそれをnode_modulesの下のbabel-plugin-dynamic-import-nodeで見つけました。

このファイル内の投稿できないコンテンツはすべてカバーしました。つまり、「これは、airbnbAirbnb JavaScript スタイルガイドで推奨されている Babel プラグインのコレクションであるプリセットで、Airbnb コードスタイルに沿って記述するのに役立ちます」 .JavaScript コード。」

次に、必要なコンポーネントを参照できます。

公式ウェブサイトに記載されている例では、Button と Select を導入しています。

main.js に次のように記述するだけです。

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

上記の説明が間違っている場合は、修正してください

ElementUIの紹介

要素全体を紹介する

オンデマンドでインポート (推奨)

おすすめ