vue 导入组件,自定义vue组件分三个步骤

　　本文主要介绍vue3.0公共组件自动导入的相关信息。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

一、前提

　　我们使用require.context方法来导入。如果我们在vite创建的项目中使用它，我们将报告错误‘require not found’，因此我们必须用webpack创建项目。或者可以说说vite如何解决这个问题。

二、规则

　　我使用的注册规则是：搜索src/components/path下的所有目录和子目录，搜索文件名为 index.vue 的文件，以上级目录的名称作为组件名注册。其结构如下：

　　只注册index.vue，不注册其他名称的组件。

三、注册

　　由于vue3.0没有从vue导入“Vue”，我们需要使用app注册，所以只能在main.js中找到

　　入口文件注册

　　//src/main.js

　　从“vue”导入{ createApp }

　　const app=createApp(App)

　　//动态注册公共组件

　　const require component=require . context(

　　//其组件目录的相对路径

　　@/组件，

　　//查询其子目录？

　　没错，

　　//与基础组件的文件名匹配的正则表达式

　　/index.vue$/

　　)

　　常量郭解=requireComponent.keys()。过滤器((item:any)=true)

　　jieguo.forEach((item:any)={

　　const component config=require component(项目)

　　const name=item.split(/)[1]

　　app.component(名称，组件配置.默认值组件配置)

　　})

　　//报名结束

　　app . mount(# app)

　　当我们创建、删除、重命名公共组件等时。我们在注册时不需要任何操作。重启项目，就喝一口水。

总结

　　关于vue3.0公共组件自动导入的这篇文章到此为止。更多相关vue3.0公共组件导入内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。