vue按需引入第三方插件_elementui组件按需引入踩过的坑

在使用 Vue 开发时，按需引入第三方插件是一个比较常见的需求，这样可以减小打包体积、提高网站性能。而 ElementUI 是一个非常流行的组件库，也支持按需引入。

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

1. 安装 babel-plugin-component

npm install babel-plugin-component -D

2. 配置 .babelrc 文件

在 .babelrc 文件中添加以下代码：

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

这里的 libraryName 表示引入的组件库名称，styleLibraryName 表示引入的主题名称。

3. 按需引入组件

接下来就可以按需引入 ElementUI 组件了，例如：

import Vue from 'vue'
import { Button, Select } from 'element-ui'

Vue.use(Button)
Vue.use(Select)

需要注意的是，按需引入时必须使用 {} 来包裹需要引入的组件名称，否则会引入整个 ElementUI 库。

另外，如果使用了 babel-loader 进行编译，还需要在 webpack 配置文件中添加以下代码：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('test'),
    resolve('node_modules/element-ui/src'),
    resolve('node_modules/element-ui/packages')
  ]
}

这里的 include 表示需要进行 babel-loader 处理的文件路径。

希望这个回答能够帮到你，如果还有问题可以继续提问哦~