vue中按需引入element-ui，关于版本和配置的那点事儿~
读前说明版本介绍开始配置01020304 相关资料读前说明
众所周知，
在前端领域内，一个插件的小小版本号，都可能让一个大项目瞬间崩溃。
由于vue在不断升级，而ele有点小小的跟不上节奏，
导致很多人在使用中出现了各种问题，碰了不少壁。
而在@vue/cli3版本前后，配置方法是非常不一样的。
所以，本次就以常见版本为基础，梳理一下完整的配置。
版本介绍
本次使用版本：
vue: ^2.6.11@vue/cli : 4.5element-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组件：
相关资料
快速上手：/#/zh-CN/component/quickstartvue-cli-plugin-element ：/ElementUI/vue-cli-plugin-element配置好的：/guozia007/vue-handbookover~
