ElementUI引入

注意版本！

注意版本！

注意版本！

看清楚引入组件的条件，比如版本，能让我们少走很多弯路！

 我这里就删除了原本使用vite创建的vue3框架，重新使用vue-cli@3（其实是vue-cli@5）重新搭建了vue2，以便于更好的兼容组件。

具体引入过程可以参考官网：Element - The world's most popular Vue UI framework

也可以接着往下看，因为基本都是参照官网的，在结合自身遇到的问题给自己记个笔记，也希望可以给同样小白的你一点帮助

引入整个 Element

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

我的结尾处比官网多个.$mount('#app'

盲猜是因为我的vue-cli版本高了点，后面出问题再调整吧，不要学我哈

另外还需要特别注意，新手可能会遇到的一个麻烦：

安装完成后如果遇到这样的报错，不用担心，只是因为main.js文件中，element-ui引入的位置需要调整

这里不能完全复制官网的安装教程，通常还需要在前面加../node_modules/，这里不做过多解释，还不懂可以自己搜搜看。

按需引入（推荐）

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

这个文件需要找一下，怕麻烦可以试试直接再本地文件夹里搜索；

我是在node_modules下的babel-plugin-dynamic-import-node里找到的

这个文件里员额不能的内容，我是全部覆盖了的，意思是：“这里使用了airbnb预设，它是Airbnb JavaScript风格指南所推荐的一组Babel插件的集合，可以帮助您编写符合Airbnb代码风格的JavaScript代码。”

接下来，你需要什么组件就引用什么组件就可以了。

官网给到的例子是引入 Button 和 Select

只需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

如果上述描述有误，欢迎大佬指正