uni-app：关于自定义组件、easycom规范、uni_modules等问题

1. 结论：使用uni-app框架时，如何创建自定义组件？

官方推荐新建符合easycom规范的组件，不推荐手动引入组件。方法：

1.根目录下新建components目录，右键新建组件，然后在对应的组件名称/组件名称.vue文件里编写代码。

2.根目录下新建uni_modules目录（选择uni ui项目模板，会自动生成uni_modules目录），右键新建uni_modules插件，然后在对应的components/组件名称/组件名称.vue文件里编写代码。

 

2. 前置：

官方推荐在HBuilderX新建项目时，直接选择uni ui项目模板，然后在代码里直接敲u，所有组件都拉出来，不用引用、不用注册，直接就用。

这时项目目录下会有一个uni_modules文件夹，即是存放uni ui插件的文件夹。

为什么这些组件不用引用、不用注册，直接就能用？因为有easycom。

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。uni-app的easycom将其精简为一步。

3. easycom组件规范：

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

注意：并不是必须在项目的components目录新建自定义组件，也可以在uni_modules目录下新建自定义uni_modules插件，然后在对应的components/组件名称/组件名称.vue文件里编写代码。

easycom是自动开启的，不需要手动开启。有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。

如果你的组件名称或路径不符合easycom的默认规范，可以在pages.json的easycom节点进行个性化设置，自定义匹配组件的策略

4. 说明

• easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
• easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
• 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
• 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
• easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
• nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom。

5.相关官方文档：

uni-app官网https://uniapp.dcloud.io/collocation/pages.html#easycom组件使用的入门教程 | uni-app官网https://uniapp.dcloud.io/component/#uni-module%E8%A7%84%E8%8C%83

uni_modules | uni-app官网https://uniapp.dcloud.io/plugin/uni_modules.html