vue按需引入elementui组件

### 回答1：
要按需引入Element UI组件，需要使用babel-plugin-component插件。首先，安装插件：

npm install babel-plugin-component -D

然后，在babel配置文件中添加插件：

// .babelrc
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这样配置后，就可以在Vue组件中按需引入Element UI组件了：

<template>
  <el-button>按钮</el-button>
</template>

<script>
import { Button } from 'element-ui'

export default {
  components: {
    'el-button': Button
  }
}
</script>

### 回答2：
Vue是一个流行的前端框架，而elementui是一个常用的UI组件库。在大型项目中，如果引入全部的elementui组件，会导致加载速度变慢，会浪费浏览器资源，增加项目的负担。因此，按需引入elementui组件显得非常重要。

按需引入elementui组件的方法，我们需要使用babel-plugin-component 这个Babel插件，它可以帮助我们只加载项目中实际使用的Element-UI组件。具体步骤如下：

1. 安装babel-plugin-component

在项目中安装babel-plugin-component插件：

npm install babel-plugin-component -D

2. 在.babelrc中配置

在项目的根目录下，可以找到.babelrc文件，若没有，请使用以下命令创建：

touch .babelrc

然后在.babelrc文件中添加配置：

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

这个配置的意思是将element-ui的组件和样式按需引入。

3. 按需加载组件

在编写Vue的单文件组件时，只需导入需要使用的组件即可。

例如，我们只需要使用Button组件：

<template>
  <button type="primary">按钮</button>
</template>

<script>
  import { Button } from 'element-ui'
  export default {
    name: 'MyButton',
    components: {
      Button
    }
  }
</script>

需要注意的是，此时的样式并没有导入，还需要手动导入所需的样式表：

import 'element-ui/lib/theme-chalk/button.css';

这样做的好处在于，我们只加载实际需要使用的组件和样式，减少了浏览器的负担，提高了项目的加载速度。同时，这种方式也降低了项目的复杂度，使得项目的维护变得更加容易。

### 回答3：
ElementUI是一个非常流行的Vue.js组件库，其丰富的组件和优雅的样式使其成为Vue.js中广受欢迎的UI框架之一。在开发过程中，为了避免引入整个ElementUI库，通常需要按需引入Element组件，以减小项目体积并减少加载时间。

要按需引入Element组件，我们需要借助babel-plugin-component插件。这个插件会根据代码中实际使用到的组件，只打包需要的组件库代码，从而减小打包后的文件大小。

下面是按需引入ElementUI组件的步骤：

1. 安装babel-plugin-component插件

npm install babel-plugin-component -D

2. 在.babelrc文件中配置插件

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

其中libraryName指定了需要引入的组件库名称，styleLibraryName指定了默认样式名称。

3. 在需要使用Element组件的文件中，按需引入相应组件

例如，我们需要使用ElementUI中的Button组件，则需要在需要使用该组件的文件中，按以下方式引入：

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.use(Button);

我们先从element-ui库中导入Button组件并注册到Vue实例中，在Vue.use()中可以传递其他组件(比如Table等)，Vue会自动注册这些组件到全局。

当然，我们也可以通过直接在组件内引入的方式来按需引入组件，例如：

import { Button } from 'element-ui';

export default {
  components: {
    'el-button': Button
  },
}

这样就可以按需引入ElementUI中需要的组件了。通过对组件的按需引入，可以大大减少打包体积和加快网页响应速度，提高用户的使用体验。