uniapp初学时建项目公共组件easycom组件规范定义

最新推荐文章于 2025-05-18 10:45:04 发布
原创 最新推荐文章于 2025-05-18 10:45:04 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #uni-app #javascript

本文介绍了在uni-app中创建公共组件的规范，包括组件命名前缀的一致性，如使用'bd-'，以及通过pages.json配置easycom组件，特别是HBuilderX 2.5.5及以上版本对uview-ui的支持。遵循components/组件名称/组件名称.vue的目录结构，组件无需显式引用和注册即可直接在页面中使用。

1.首先新建公共组件前缀要保持一致。比如你公司是百度前缀可以使用bd-在这里插入图片描述

2.找到pages.json文件使用easycom组件规范（HBuilderX 2.5.5起支持） 绝对路径引入配置一下就好。下面是引入的uview-ui
在这里插入图片描述
3.只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。不用像传统vue组件import导入
在这里插入图片描述

uniapp的基本使用（easycom规范和条件编译）和uview组件的安装和使用
chengcheng9876的博客
11-08 3861
easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用。easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）。
uniapp-007-组件的easyCom使用方式
浪漫韫秋
02-14 423
导航栏，这东西就属于布局。我们不能在pages里头写布局。我们要用自定义组件。
uniapp引入公共自定义组件（easycom组件规范）
Xuhai0811的博客
07-13 912
例： /components/demo/demo.vue 目录下。传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。就可以不用引用、注册，直接在页面中使用。只要组件安装在项目的。
基于uniapp的简单自定义公共组件mz-header-tab-tab
在无知中学习，在学习中成长，在成长中学习
02-03 728
基于uniapp的简单自定义公共组件mz-header-tab-tab
uniapp组件的easycom模式
m0_72169432的博客
05-11 598
uniapp组件的easycom模式，符合规范components/组件名称/组件名称 的目录结构，不用注册，直接在页面上使用。
【解决】uniapp的全局公共组件(不用在每个页面引入组件标签)，各平台均可使用！！！！
cv1002420186的博客
07-04 6593
【解决】uniapp的全局公共组件(不用在每个页面引入组件标签)，各平台均可使用！！！！
uniapp—封装多个全局组件,推荐使用easycom
cy1502的博客
03-22 2300
uniapp真机调试vue.use注册自定义组件不生效
uniapp中的easycom工作机制
最新发布
Bruce__taotao的博客
05-18 1984
uni-app 中的 easycom 是一种自动组件注册机制，能够简化组件的使用流程，提升开发效率。通过 easycom，开发者无需在页面中手动引入和注册组件，直接使用组件标签即可。其工作原理是通过自动扫描 components 目录下的 .vue 和 .nvue 文件，将组件名作为标签名进行注册。easycom 在编译阶段生效，支持自定义匹配规则。配置方式是在 pages.json 中设置 easycom 属性，启用自动扫描并定义规则。easycom 的优点包括减少样板代码、提升维护性、支持按需引入等，但
【JavaScript源代码】easycom模式开发UNI-APP组件调用必须掌握的实用技巧.docx
12-28
### JavaScript源代码：Easycom模式开发Uni-App组件调用必须掌握的实用技巧 #### Easycom模式概述 在深入探讨Easycom模式之前，我们需要明确它为何如此重要。Easycom模式是一种用于简化Uni-App（一个基于Vue.js的跨...
uni-app(基础2)
mengmoyong的博客
09-22 530
在 uni-app 中自定义组件的定义与 Vue 组件基本一致，不要参照原生小程序方式来定义组件。扩展组件中的uni-icons内置了许多的图标，在内置的图标不能满足要求时还可以使用自定义图标。
uniapp easycom教程
qq_43402051的博客
12-06 3694
easycom 是 uniapp 的一种组件自动引入的规则，使用这种规则可以使满足规则的组件无需注册直接使用。 接下来我们来看一眼效果 这里可以看到我并没有进行组件注册而是直接使用了组件，这样的效果就是 easycom 的自定义匹配规则。
uni-app入门:组件的基本使用
weixin_43401380的博客
01-06 9168
uniapp实战之组件的基本使用
uniapp自定义组件easycom页面免引入使用(踩坑)
m0_59547707的博客
06-14 2257
uniapp自定义组件easycom页面免引入使用(踩坑)
uniapp使用uview报错没找到该组件或者要求你检查easycom规范
热门推荐
weixin_53935634的博客
02-10 1万+
这都是pagej.soneasycom的错误： 使用Uview-ui组件时，如果是npm安装 需要在page.json中修改easycom配置， 如果是下载安装，则需要有@/ 如果是npm安装 则去掉@/，使用cnpm则无法使用 重新使用npm或者 下载安装 注意：改正后一定重启HBx！！！ ...
npm安装uView流程(配置easycom组件模式)
为千万同胞少走弯路而写文！！！
12-06 1506
如果您的项目是由HBuilderX创建的，相信已经安装scss插件，如果没有，请在HBX菜单的 工具>插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HBX即可。 如果您的项目是由vue-cli创建的，请通过以下命令安装对sass的支持。
uniapp 跨分包自定义组件引用
m0_65894854的博客
04-19 8781
跨分包自定义组件引用
uni-app常用的一些基本视图组件
2302_78065311的博客
05-17 1818
视图容器，类似于HTML中的div。
uni-app中组件的创建与通信（十一）
从入门到放弃
03-17 1058
目录 组件创建 组件的生命周期函数 组件的通讯 在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可 组件创建 创建login组件，在component中创建login目录，然后新建login.vue文件 <template> <view> 这是...
uni-app进阶使用（vuex、组件、api）
zhangxiaobai___的博客
11-30 2151
uni-app uni-ui uview 自定义组件 api
uniapp使用easycom动态加载组件
04-03
### 如何在 UniApp 中通过 EasyCom 实现组件的动态加载 #### 什么是 EasyCom？ EasyCom 是一种由 HBuilderX 提供的支持机制，旨在简化自定义组件的引入过程。从版本 **HBuilderX 2.5.5** 开始支持此功能[^1]。它允许开发人员无需显式导入和注册即可直接使用符合特定命名约定的组件。 #### 配置 `pages.json` 支持 EasyCom 为了启用 EasyCom 模式，在项目的全局配置文件 `manifest.json` 或页面级配置文件 `pages.json` 中设置如下字段： ```json { "easycom": { "autoscan": true, "path": "components" } } ``` 上述配置表示自动扫描位于项目根目录下的 `components` 文件夹中的所有子文件夹，并将其作为可使用的组件[^3]。如果需要更灵活地控制哪些路径被纳入 EasyCom 扫描范围，则可以指定具体的路径列表替代 `"autoscan"` 的布尔值形式。 #### 组件命名规范 要使某个 Vue 单文件组件能够参与 EasyCom 自动化流程，其所在目录名需与该 `.vue` 文件同名。例如，假设存在这样一个结构化的组件： ``` /components/ my-button/ index.vue ``` 那么可以直接在模板中这样调用而不需要额外声明： ```html <template> <view> <!-- 动态加载 --> <my-button></my-button> </view> </template> ``` #### 动态加载的实际应用案例 下面是一个完整的例子展示如何利用 EasyCom 来实现按条件渲染不同类型的按钮组件： ```javascript // pages/example/example.vue <template> <view> <component :is="currentComponent"></component> </view> </template> <script> export default { data() { return { currentComponent: 'my-button' // 可切换为其他已知组件名称字符串 }; }, }; </script> ``` 在此示例中，`:is` 属性绑定到变量 `currentComponent` 上，这使得我们可以轻松更改显示的具体组件实例而不必修改 HTML 结构本身[^2]。 --- #### 注意事项 尽管 EasyCom 极大地提高了工作效率并减少了冗余代码量，但在实际操作过程中仍需要注意以下几点： - 确保所有的目标组件都遵循统一的标准命名方式； - 如果某些特殊场景下无法满足默认规则的要求，可能还需要回退至传统手动注册手段处理例外情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值