5-2 easycom自动组件导入&集成uni生态插件
easycom 机制
easycom 是 uni-app 的自动组件导入方案。符合命名规范的组件无需手动 import,直接在模板中使用即可。
命名规范
组件文件路径:components/组件名/组件名.vue
例如:
components/my-button/my-button.vue → 自动注册为 <my-button>
components/user-card/user-card.vue → 自动注册为 <user-card>
text
使用示例
<template>
<!-- 无需 import,直接使用 -->
<my-button type="primary">点击</my-button>
</template>
html
自定义 easycom 规则
在 pages.json 中配置:
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
}
json
uni 插件市场
插件市场 有大量现成的组件和模板,可以直接导入到项目中:
- 在插件市场找到需要的插件
- 点击"使用 HBuilderX 导入插件"
- 插件会自动安装到项目的
uni_modules/目录 - 通过 easycom 自动注册,直接使用
↑