Element-UIをオンデマンドでvue-cliプロジェクトにロード

方法1：伝統的な引用

1. element-uiをインストールする

npm i element-ui -S

2. babel-plugin-componentをインストールします

npm install babel-plugin-component -D

3. babel.config.jsを変更します（公式Webサイトは.babelrcを変更するように言っており、.babelrcを追加する実際の測定値はbabel.config.jsを直接変更するのと同じです）

最初にvueによって生成されたbabel.config.jsに基づいて、次の変更を行います

{
  "presets": "@vue/cli-plugin-babel/preset",
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

4.ボタンとメッセージをオンデマンドで導入する

import { Button, Message } from 'element-ui'

Vue.component(Button.name, Button)
// 或者 Vue.use(Button)
Vue.prototype.$message = Message

方法2：プラグインリファレンス

要素プラグインを介してelement-uiをすばやく統合できます

vue add element

2番目の項目を選択します

 

概要：実際のプロジェクトでは、オンデマンドロードを実現するためにプラグインメソッドが推奨されています