Vue の Element-ui はオンデマンドでインポートします

序文

Vue を使用してプロジェクトを開発する場合、通常、Element-ui を選択します。これは、このライブラリが Vue に基づいており、使用できる既製のコンポーネントが多数あるためです。公式ドキュメントに従って main.js に直接導入することもできますが、最終プロジェクト開発完了後にパッケージング量が膨大になるため、使用しないコンポーネントもあるのでオンデマンドでインポートすることを推奨します。 。

オンデマンドでインポート

1.babel-plugin-componentプラグインをインストールする

yarn add babel-plugin-component -D

• -D: -save の略称で、モジュールとバージョン番号を依存関係に自動的に追加します。(生産環境に依存します)
• -S: はい --save-dev は、モジュールとバージョン番号を devdependency に自動的に追加します。(開発環境に依存します)

2. babel.config.js の設定

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

3. 要素ファイルの作成

srcディレクトリの下に という名前のフォルダーを作成しelement、elementそのフォルダーの下にファイルを作成しますindex.js。

// src/element/index.js
import {
    
     Button, Input, Card } from 'element-ui'
const element = {
    
    
    install: function (Vue) {
    
    
        Vue.use(Button)
        Vue.use(Card)
    }
}
Vue.prototype.$message = message;
export default element

4. main.jsの設定

import 'element-ui/lib/theme-chalk/index.css'; // 引入 element 样式
import element from './element/index.js' 
Vue.use(element)

5. 要素コンポーネントを使用する

インポートしたコンポーネントを作成したファイルで直接.vue使用しますsrc/element/index.js

// src/view/login/index.vue
<template>
    <Button />
</template>