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.jsoneasycom节点进行个性化设置,如关闭自动扫描,或自定义扫描匹配组件的策略。

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

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

猜你喜欢

转载自blog.csdn.net/m0_64401231/article/details/126024208