「这是我参与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…