vue组件自动挂载

简介: https://juejin.cn/post/7101130286800306207 vue组件自动挂载

在vue项目中会遇到总是需要对组件进行引来引去的调用。项目大了的话需要写的太多。那么有没有简便的方法,就类似组件库一样,一次引入全局使用,那么它来了

项目结构

image.png

main.js

const requireComponent = require.context(
  // 其组件目录的相对路径
  '@/components/',
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\.(vue|js)$/
);
requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName);
  // 获取组件的命名
  const componentName = fileName.replace(/^\.\//, '').replace(/\/\index.vue$/, ''); // eslint-disable-line
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的,
    // 那么就会优先使用 `.default`,否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});
结束语:关注我,少走弯路! 创作不易,转载请注明出处!

image.png

相关文章
|
3天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
3天前
|
JavaScript
|
1天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
2天前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
5 1
Vue3组件,注册全局组件和局部组件
Vue3组件,注册全局组件和局部组件
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用,提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板,链接指向了详细的资源。页面中还包含了一张图片,但markdown格式中无法直接显示。简而言之,这是关于一个基于Vue的后台管理界面模板的参考信息。
|
2天前
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
6 0
|
2天前
|
JavaScript
vue知识点
vue知识点
5 0
|
3天前
|
JavaScript
|
3天前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法