vue中按需引入element-ui，关于版本和配置的那点事儿~

---

读前说明

众所周知，

在前端领域内，一个插件的小小版本号，都可能让一个大项目瞬间崩溃。

由于vue在不断升级，而ele有点小小的跟不上节奏，

导致很多人在使用中出现了各种问题，碰了不少壁。

而在@vue/cli3版本前后，配置方法是非常不一样的。

所以，本次就以常见版本为基础，梳理一下完整的配置。

---

版本介绍

本次使用版本：

vue: ^2.6.11
@vue/cli : 4.5
element-ui: 2.15.7

---

开始配置

01

进入vue项目文件夹，使用命令：

vue add element ， 把ele加载到vue中。

他会自动给安装一个插件vue-cli-plugin-element

然后，会出现两次选择，第一次是：

How do you want to import Element?

意思是，你想怎么引入element-ui？

一个是全部，一个是按需(Import on demand)，毫无疑问，选择按需加载。
（这里是用键盘的上下键来选择，选好之后，按回车键即可）

第二次是：

让你选择语言。 看着选就行，zh-CN是中文简体。

---

02

babel7.0版本前后，babel配置文件名字是不一样的。

7.0之后的版本，配置文件名是babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    ['@babel/preset-env',      //添加 babel-preset-env 配置 
      {
        'modules': false
      }
    ]
  ],
  plugins: [        // element官方教程
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}

---

03

这里还有个坑。

因为我们做项目，一般上来就会把vue文件中自带的HelloWorld.vue文件给删掉，

这时候要是运行yanr serve就会报错：

ERROR Failed to compile with 1 error

This relative module was not found:

* ./components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

这时候，不要慌，搜索一下引用HelloWorld组件的地方，都删一下，清理干净即可。

这时候再运行yarn serve，

就可以看到这个成功的页面：

---

04

这时候， 可以发现，准备工作做好后，vue自动给引入了一个按钮做例子，

而我们啥都没做。

所以，回到文件中，我们可以看到这个按需加载是怎么用的：

在main.js中，是这样的：

在App.vue文件中这样使用ui组件：

---

相关资料

• 快速上手：https://element.eleme.cn/#/zh-CN/component/quickstart
• vue-cli-plugin-element ： https://github.com/ElementUI/vue-cli-plugin-element
• 配置好的：https://gitee.com/guozia007/vue-handbook

---

over~