通知

本文已过时，HBuilderX已发布新的自定义组件方法：uni_modules
本文的/components/xx/xx.vue会在新版uni-app中与原生ui组件冲突。

新方法详见：

【web前端开发】在HBuilderX中自定义组件新方法 - “当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上 at App.vue:4”_Rudon滨海渔村的博客-CSDN博客效果要求HBuilderX 3.1.0 版本以上，需要使用uni_modules开发自定义组件。（旧版本的easycom用不了了，会和项目uni_modules下的组件冲突）（旧版本的自定义组件方法：）uni-app注册全局组件 - 符合easycom_Rudon滨海渔村的博客-CSDN博客效果图环境要求HBuilderX 2.5.5起支持easycom组件模式。uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dclouhttps://rudon.blog.csdn.net/article/details/123004985本文已过时

本文已过时

本文已过时

效果图

环境要求

HBuilderX 2.5.5起支持easycom组件模式。

uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/collocation/pages?id=easycom官方手册 （对新手不友好，菜鸟本尊看得迷糊，照着抄都无法使用全局自定义组件...）

实现步骤

图+文

（ 1 / 7 ）准备好HBuilderX

（ 2 / 7 ）新建/components/文件夹（名字不能改）

（ 3 / 7 ）新建/components/easycom/文件夹（随意，不建二级目录也行，适当调整即可）

（ 4 / 7 ）对着components文件夹右键，新建组件

 

 （ 5 / 7 ）不带前缀也行（最好是文件、文件夹、name都一毛一样），勾选同名目录

 

 （ 6 / 7 ）装修你的组件，其实也就是一个vue，name的话要小写+横杠（驼峰试过不行）

 （ 7 / 7 ）修改pages.json增加easycom的自动扫描，注意路径。
全局注册成功，重启HBuilderX干掉缓存。
在适当页面不用注册，即可享用自建组件。

带前缀的话：

"easycom": {
	"autoscan": true,
	"custom": {
	  "^u-(.*)": "@/components/easycom/u-$1/u-$1.vue"
	}
}

不带前缀的话：

"easycom": {
	"autoscan": true,
	"custom": {
	  "(.*)": "@/components/easycom/$1/$1.vue"
	}
}

重启HBuilderX干掉缓存

重启HBuilderX干掉缓存

重启HBuilderX干掉缓存

 官网手册

https://uniapp.dcloud.io/collocation/pages?id=easycom组件规范

包含手动注册组件。。。