Vue按需引入element-ui组件库

首先我们已经安装好了Vue以及脚手架vue-cli，并创建了一个项目ullitest。那么我们来到element-ui官网来引用我们所需要的组件，本文章以Button和Select为例。

官网:Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

第一步：全局安装element-ui组件库：npm i element-ui -S

第二步： 选择按需引入的方式，安装需要的工具包：npm install babel-plugin-component -D

第三步：重点来了，以我们目前使用的脚手架版本4. 5.15为例

官网让我们修改.babelrc文件

可是我们的项目中按照element-ui官网的说明，是无法找到.babelrc文件的。但是可以看到名称里有babel的文件名叫babel.config.js，所以就来改这个文件好了。

改好之后npm  run serve启动项目，提示错误信息： Cannot find module 'babel-preset-es2015'

目前版本的解决办法就是红色框里的这一句：

下面附送的是代码段：

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

修改好之后重启项目：

🆗，正常启动没问题。接下来配置main.js文件：

接下来就可以使用了，从官网找到我们想要的样式：

把这段代码复制到我们需要用的位置直接使用即可：

看下网页效果，果然和官网一模一样，同理可以引用Selec。

 以上就是element-ui按需引用的所有步骤。