「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」。
前言
最近在公司自己开发了一个 vue2 的小项目，在样式上面偷懒用了 element-ui 的部分组件，第一次打包部署到线上的时候，由于没有按需引入，是直接按照官方文档上面的完整引入，导致打包部署到线上的文件过大，现在回过头来修改引入方式，改为按需引入。
element-ui按需导入
一、安装组件
首先，关于 element-ui 我使用的导入方式是 npm 安装，最开始的引入方式也是官方文档上的全部引入，在这里就不多说了，接下去多说说按需引入时碰到的问题，以及我是怎么解决我的问题的。
按照文档上的按需引入需要先安装 babel-plugin-component：
npm install babel-plugin-component -D
然后是将.babelrc 文件进行修改，这里我一直找不到这个文件在哪，最后直接修改了 babel.config.js 也是能实现按需引入的。
要注意的是这个文档当中本来就有的配置不要去改动，直接在后面加上官方文档上的配置， 这是我配置之前的文档：
配置之后：
然后这个配置在后面运行时会报错： Cannot find module 'babel-preset-es2015'
解决方法： 先安装 babel-preset-es2015 到项目的部署环境中：
npm install babel-preset-es2015 -D
然后将 babel.config.js 的 "es2015" 修改成 "@babel/preset-env"，修改过后重新启动就可以了
二、引入需要的组件
首先按照官方文档说的，在 main.js 里面引入部分组件，具体要引入什么怎么引入官方文档里都有说明( 组件 | Element )
如果嫌写太多 use 太难看，它是支持链式调用的，比如：
Vue.use(Button).use(Select);
1. 引入踩的第一个坑
按需引入的时候，并不是按照你使用的组件去按需引入，而是看你用了多少它的标签，每一个使用的标签都需要去引入，不然没办法解析。
比如说我用了 Dropdown 下拉菜单组件中的 click激活：
那这里你用到的每一个标签，你都要去引入。 <el-row> <el-col> <el-dropdown>
<el-dropdown-menu> <el-dropdown-item> 都需要去引入，在按需引入的官方文档上都能找的到这些标签：
import {
Row,
Col,
Dropdown,
DropdownMenu,
DropdownItem
} from 'element-ui';
Vue.use(Row).use(Col).use(Dropdown).use(DropdownMenu).use(DropdownItem);
所以说具体不是看你用了什么组件，而是看你用了什么标签。
2. 引入踩的第二个坑
要注意，部分标签的引入方式不是通过 use 而是直接在 Vue 的原型上绑定，比如说 Message :
Vue.prototype.$message = Message
这里官方文档也有说明，具体就是要仔细看
还有就是这种绑定在原型上的就不要去在写一次 use 不然可能会造成无缘无故的 bug
总结
按照使用的组件暂时就碰到这么多问题，之后碰到更多问题的时候再来进行更新这一个专题的内容。
引用部分外部文章内容链接：
blog.csdn.net/heyNewbie/a… blog.csdn.net/l_XIANA/art…
