easycom模式开发UNI-APP组件调用必须掌握的实用技巧
本文旨在抛砖引玉,具体文档和easycom规范请移步uni-app官网。【传送门】easycom模式说明
easycom组件模式介绍
- 自HBuilderX 2.5.5起支持easycom组件模式。若HBuiderX版本较低,请先检查更新!
实际使用效果如下:
uni-app 默认的easycom规范 若要向上述代码块一样直接在页面中使用组件需要在安装组件或者自定义组件时遵循如下规范:
- 组件文件必须放在
components
目录下。 - 组件所对应的.vue文件必须放在组件同名的文件目录下。
- 文字描述可能不是很清楚,直接看效果图:
文章图片
以图中uni-swipe-action.vue组件为例,其组件路径必须是
components/uni-swipe-action/uni-swipe-action.vue
自定义组件放置目录
- uni-app默认的easycom 规范是将组件放置在componnents目录下
- 同时uni-app也允许我们修改组件放置的默认目录和匹配规则;
pages.json
的easycom例程进行个性化设置,如关闭自动扫描,或自定义扫描匹配组件的策略。设置参数如下:文章图片
官方参考自定义配置规则如下:
【匹配node_modules内部的vue文件】
"easycom": {"autoscan": true,"custom": {"uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件"vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件}}
uVIew配置规则如下:
【匹配
uview/components
目录下的以u-
开头的uview组件】{ // 此为需要加入的内容 "easycom": {"^u-(.*)": "@/uview/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [// ...... ]}
使用easycom的好处
- 简化组件的使用,提高开发效率
- 不论组件目录下安装了多少组件,easycom打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。
推荐阅读
- 深入理解Go之generate
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- --木木--|--木木-- 第二课作业#翼丰会(每日一淘6+1实战裂变被动引流# 6+1模式)
- 设计模式-代理模式-Proxy
- 我的软件测试开发工程师书单
- echart|echart 双轴图开发
- NPDP拆书(三)(新产品开发战略(经营与创新战略))
- 芯灵思SinlinxA33开发板Linux内核定时器编程
- 【译】Rails|【译】Rails 5.0正式发布(Action Cable,API模式等)
- 常用git命令总结