前言:在Vue项目中一般会使用很多个Element的组件且为了省事会直接导入整个ELementUI,这样就会导致一个后期打包的体积过大的问题了,那么这个时候我们就需要按需引入了, 赶时间的朋友直接跳过坑的部分按步骤创建文件复制代码即可,有兴趣看坑是什么的朋友可以了解一下。
1.创建element组件文件
在component里面创建一个名为ElementUI的js文件,叫名字和放在哪全由你,我习惯放在外面的component里面且直接用element来命名好找点。
然后引入的方式如下所示:
import {
Header,
Option,
TabPane,
Submenu,
Notification,
Footer,
RadioButton,
RadioGroup
} from "element-ui";
然后我们引入后需要把他们等于是启动一下,这样我们按需引入就完成一半了
const elementComponents = {
Dialog,
Tooltip,
Popconfirm,
Card,
Timeline,
TimelineItem,
Divider,
Calendar,
Image,
Drawer,
Main,
Aside,
Header,
Option,
TabPane,
Submenu,
Footer,
RadioButton,
RadioGroup // 给上面引入的全给他整在一个对象里头
//我这个不一样是因为太长了,不好弄,我删了一点
};
function install(Vue) { // 然后定义一个启动函数
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
Object.keys(elementComponents).forEach((key) =>
Vue.use(elementComponents[key])
); // 遍历对象里每一个组件把他们一个个启动
}
export default { install }; //然后导出函数
虽然以上的导入直接复制就能用,但是有以下两点坑要注意(小Tips:坑的讲解可能有点长,不想听或者赶时间的朋友可以直接跳到下面的第二步即可):
1. 一般来说某个组件都会有附属组件的,比如说大家最常见的table表格组件,如果要引入他的话不只是需要引入table,还要引入他里面的附属组件TableColumn,不然的话你的table能使用但是里面全是空白且报错,又比如form表单,它里面有个附属组件formItem,熟悉吧,对,它里面有很多这种附属组件。
2. 可以看见,我上面const里的组件里面没有message与messageBox和Notification,为啥呢,因为这三个东西比较独特,他们需要直接刻在Vue的原型中,也就是我上方写的Vue.prototype.$msgbox = MessageBox;这个亚子,如果说不这样的话他就会出BUG且不能用。具体什么BUG有兴趣的朋友可以自行试试看因为messageBox呢有四种使用方式,所以要整他个四次。
以上就是按需引入的主要坑了。
2.创建element组件文件
在main.js里面全局引入,这个时候因为你是在main.js里面引入的是你按需引入的组件,而不是整个element组件库,所以这个时候就可以达到减少项目打包体积的效果了
// 按需引入elementUi
import elementComponents from "./components/elementUi";
Vue.use(elementComponents);
好了,到了这个时候就可以全局使用你按需导入的elementUI组件了。
完结撒花。