码迷,mamicode.com
首页 > 其他好文 > 详细

vue_element_admain中自动注册全局组件

时间:2020-11-02 09:57:26      阅读:23      评论:0      收藏:0      [点我收藏+]

标签:dma   image   解决   很多   main   链接   规范   创建   undle   

业务场景:中后台

虽然封装和使用了很多第三方组件,但还是免不了需要自己封装和使用很多业务组件。每次使用的时候还需要手动引入,过于麻烦

技术图片

 

 

 解决方法:

基于 webpack 的require.context来实现自动加载组件并注册的全局的功能

技术图片

 

 

 我们可以创建一个GlobalComponents文件夹,将你想要注册到全局的组件都放在这个文件夹里,在index.js里面放上如上代码。之后只要在入口文件main.js中引入即可。

//main.js
import ‘./components/Table/index‘ // 自动注册全局业务组件

这样我们可以在模板中直接使用这些全局组建了。不需要再繁琐的手动引入了

<template>
<div>
<user-select/>
<status-button/>
</div>
</template>

当然你也不要为了省事,啥组件都往全局注册,这样会让你初始化页面的时候你的初始init bundle很大。你应该就注册那些你经常使用且体积不大的组件。那些体积大的组件,如编辑器或者图表组件还是按需加载比较合理。而且你最好声明这些全局组件的时候有一个统一的命名规范比如:globel-user-select这样的,指定一个团队规范,不然人家看到你这个全局组件会一脸懵逼,这个组件是哪来的。

文章参考链接:https://juejin.im/post/6844903840626507784

vue_element_admain中自动注册全局组件

标签:dma   image   解决   很多   main   链接   规范   创建   undle   

原文地址:https://www.cnblogs.com/huayang1995/p/13819551.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!