Uni-app是基于VUE开发的。通常，首先安装组件，然后在全局或本地引入和注册。今天给大家分享一下在easycom模式下开发UNI-APP组件调用必须掌握的实用技巧。需要朋友就来看看吧。

这篇文章的目的是为了引起更多的注意。具体文档和easycom规范请移至uni-app官网。[portal]easycom模式描述

easycom组件模式介绍

从HBuilderX 2.5.5开始支持Easycom组件模式。如果HBuiderX版本较低，请先检查更新！

Uni-app是基于VUE开发的。通常，首先安装组件，然后在全球或本地引入和注册。然后，您可以使用页面中相应的组件。流程比较复杂，uni-app通过使用easycom组件模式简化了上述三个步骤，使得用户在使用组件时无需参考和注册，直接在页面中使用组件。当然，前提是遵循某些easycom规范。

实际使用效果如下：

模板

视图class=container

单一列表

单一列表项标题=第一行/单一列表项

单一列表项标题=第二行/单一列表项

/uni-list

/查看

/模板

脚本

//这里不需要导入，也不需要在组件中注册uni-list组件。模板可以直接使用。

导出默认值{

data() {

返回{

}

}

}

/脚本

uni-app 默认的easycom规范

要像上面的代码块一样直接在页面中使用组件，在安装或定制组件时需要遵循以下规范：

组件文件必须放在组件目录中。

的。组件对应的vue文件必须放在与组件同名的文件目录中。

描述可能不是很清楚，看看效果图就知道了：

以图中的uni-swipe-action.vue组件为例，其组件路径必须是components/uni-swipe-action/uni-swipe-action . vue。

自定义组件放置目录

Uni-app的默认easycom规范是将组件放在组件目录中。

Uni-app还允许我们修改组件放置的默认目录和匹配规则；

Easycom是自动开启的，不需要手动开启。需要时，可以在pages.json的easycom例程中进行个性化设置，比如关闭自动扫描，或者自定义扫描匹配组件的策略。设置参数如下：

请参考以下官方自定义配置规则：

[匹配node_modules中的vue文件]

easycom :

autoscan: true，

自定义:{

Uni-(。*): @/components/uni-$ 1.vue ，//匹配组件目录中的vue文件。

Vue-file-(。*):包名/路径/到/vue-file-$ 1 . vue //匹配node_modules中的vue文件。

}

}

UVIew配置规则如下：

[在uview/components目录中匹配以u开头的u view/components]

{

//这是要添加的内容。

easycom :

^u-(.*): @/u view/components/u-$ 1/u-$ 1 . vue

},

//这是现有的内容。

pages: [

//.

]

}

使用easycom的好处

简化组件的使用，提高开发效率。

无论组件目录中安装了多少组件，easycom都会在打包后自动移除未使用的组件，对组件库的使用特别友好。

关于在easycom模式下开发UNI-APP组件调用必须掌握的实用技巧，本文到此结束。有关easycom模式下UNI-APP组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！