easycom模式使vue组件无需引入即可使用

2023-11-12

easycom

HBuilderX 2.5.5起支持easycom组件模式。

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。 如下:

<template>
    <view class="container">
        <uni-list>
            <uni-list-item title="第一行"></uni-list-item>
            <uni-list-item title="第二行"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    // 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

不管components目录下安装了多少组件,easycom打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。

组件库批量安装,随意使用,自动按需打包。以官方的uni-ui为例,在HBuilderX新建项目界面选择uni-ui项目模板,只需在页面中敲u,拉出大量组件代码块,直接选择,即可使用。大幅提升开发效率,降低使用门槛。

uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件,均可直接使用。

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

属性 类型 默认值 描述
autoscan Boolean true 是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
custom Object - 以正则方式自定义组件匹配规则。如果autoscan不能满足需求,可以使用custom自定义匹配规则

自定义easycom配置的示例

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

说明

  • easycom方式引入的组件无需在页面内import,也不需要在components内声明,即可在任意页面使用
  • easycom方式引入组件不是全局引入,而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
  • 在组件名完全一致的情况下,easycom引入的优先级低于手动引入(区分连字符形式与驼峰形式)
  • 考虑到编译速度,直接在pages.json内修改easycom不会触发重新编译,需要改动页面内容触发。
  • easycom只处理vue组件,不处理小程序组件。暂不处理后缀为.nvue的组件,建议参考uni ui,使用vue后缀,同时兼容nvue页面。
  • nvue页面里的.vue后缀的组件,同样支持easycom

 

esaycom 自动导入:
一般在组件目录下(components) 目录下按照他的规则 组件文件夹/组件名称.vue 就可以自动导入了 如下图所示 ↓↓↓ 。

å¨è¿éæå¥å¾çæè¿°
esaycom 手动编写规则导入:
一般报错的位置都在这里 写了自动以规则但是无法使用 ,找不到组件 ,非常头疼。
下面是一个示例 请看下方图片 ↓↓↓。

å¨è¿éæå¥å¾çæè¿°

这里官网写的示例 让这么引入

问题 如果我在多加一个文件夹呢? 因为全部的组件都这么放的话,问题会很大。因为组件越来越多,严重影响代码质量,美化等等。

å¨è¿éæå¥å¾çæè¿°

如果把组件的作用不同 单分文件夹的时候 这个 自定义规则应该怎么写呢? 看下图所示↓↓↓↓。
把组件单分到文件夹里面。

那么这个规则就应该这么写。

å¨è¿éæå¥å¾çæè¿°

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

easycom模式使vue组件无需引入即可使用 的相关文章

随机推荐

  • [第16课]统计:诸方差公式

    Start 观看可汗视频 本节课 可汗老师对原始方差公式进行推导 得出如下更简洁的公式 2 i
  • MapReduce基础知识(个人总结)

    声明 1 本文为我的个人复习总结 并非那种从零基础开始普及知识 内容详细全面 言辞官方的文章 2 由于是个人总结 所以用最精简的话语来写文章 3 若有错误不当之处 请指出 Writable类型 Java类型 Hadoop Writable类
  • 构建无服务器 ChatGPT 支持的简历助手 - 基础(二)

    之前我们制作了一个简洁的小命令行工具 可以用来帮助我们构建更好的简历 现在我们将该应用程序部署到云中 我将使用 AWS CDK 因为我喜欢它 而且它使此类事情变得相对简单 如果愿意 您当然可以将这些说明改编为 Terraform 首先让我们
  • CDH6.3修改主机IP

    这里写自定义目录标题 修改ip 停服务 进入mysql修改元数据ip 修改各主机的ip 分别修改各主机的ip 修改所有hadoop集群机器中的cloudera scm agent的配置文件 重启服务 修改ip 开始是在公司使用桥接模式 回到
  • 根据XML文件在原始图片上画矩形框

    根据XML文件在原始图片上画矩形框 输入参数 xml src XML文件路径 img src 原始图片路径 代码 def markImage xml src img src root ET parse xml src getroot cou
  • Eclipse 下载与安装(2022超详细)

    一 下载jdk 去官网可以下载 小编把64位已下载好的放网盘 自行下载 链接 https pan baidu com s 1A0 iWtdvYfwepTXzqXWfMA 提取码 cnqz 1 下载好之后自己选择安装目录安装即可 2 配置环境
  • 留学申请计算机硕士个人陈述,计算机专业“个人陈述”样本

    Computer Science Personal Statement Computing and its applications have always fascinated me and for this reason I have
  • iText官方教程

    如果要导出PDF文件 首选当然是iText 从网上也找了些资料 有很多 也有些乱 自己做了个例子 感觉还是很浅 深入的内容还是研究不透 下载了官方的jar包 本来想看看 里面的Demo 结果只有api文档 资料还真是不好找 今天发现官方还是
  • 第1章 Python概述 课后习题参考答案

    一 单选题 1 以下选项中说法不正确的是 答案为D A 解释是将源代码逐条转换成目标代码并同时运行的过程 B 编译是将源代码转换成目标代码的过程 C Python语言是解释型语言 兼有编译功能 D 静态语言采用解释方式执行 脚本语言采用编译
  • jenkins自动化脚本整理

    发布jar文件 规范化Jenkins 编译服务器编译目录设定为 编译脚本目录 bin 发布脚本目录 deploy 编译代码目录 source 1 项目代码目录 创建source dmmclist txt文件 kc tmplt tmpltsv
  • STM32 电机教程 33 - 无刷电机无感控制快速实现

    前言 上一节 STM32 电机教程 32 基于ST X CUBE SPN7 无刷无感电机库的电机驱动实现 给大家分享了ST的官方的无刷电机无感控制实现方案 基于NUCLEO F103RB和X NUCLEO IHM07M1 3SH开发板 并给
  • R-字符串

    字符串 文本数据存储在字符向量中 或字符数组中 虽然这比较少见 字符向量中的每个元素都是字符串 在R中 字符串 是个常用的非正式术语 因为正式的 字符向量元素 读起来相当拗口 文本的基本单位是字符向量 这意味着大部分字符串处理函数也能用于字
  • jQuery筛选器

    div div ul li li li li ul
  • kotlin协程async await的异常踩坑以及异常处理的正确姿势

    使用Kotlin来做一些异步操作相信大家都非常熟悉了 特别是结合Jetpack的一些组件 使得我们在Android开发中写异步任务非常的方便 但是 关于在使用协程的时候 个人觉得异常处理这一块是相对来讲是需要花时间去了解的地方 因为在使用过
  • 万字深剖 Linux I/O 原理

    目录 传统艺能 梅开二度 当前路径 三大输入输出流 系统文件 I O open open 返回值 close write read 文件描述符fd 对应关系 内存文件 分配规则 重定向 原理 dup2 重定向模拟实现 FILE 的文件描述符
  • IDEA插件开发入门

    转自 https cloud tencent com developer article 1348741 官方文档 https www jetbrains org intellij sdk docs basics getting start
  • 吴恩达机器学习笔记之机器学习系统设计

    确定执行的优先级 误差分析 在设计一个复杂的机器学习系统时 可以先用最简单的算法去快速实现它 然后用交叉验证集来看看自己的算法需要在哪些方面提高 除此之外 还可以进行误差分析 来针对性的提高我们的算法 不对称分类的误差评估 类偏斜情况表现为
  • Mathorcup数学建模竞赛第六届-【妈妈杯】B题:车位分布的优化设计与评价(附一等奖获奖论文、lingo和matlab代码)

    赛题描述 随着现代社会经济的快速发展 房地产成为国家经济发展中重要的经济增长点之一 而小区内汽车停车位的分布对于小区居民的上下班出行影响很大 请建立数学模型 解决下列问题 问题1 分析评判小区汽车停车位分布是否合理的几个关键指标 建立评判车
  • 升级SpringBoot版本导致NoSuchMethodError: redis/clients/jedis/ScanResult.getStringCursor()

    今天在对SpringBoot项目升级的时候 把2 1 8 RELEASE 升级到了 2 3 2 RELEASE 2 3 2 2 4 2区间内的版本是这样 其他的springboot版本 本人没试过 运行后发现 在获取在线用户的时候 报了一个
  • easycom模式使vue组件无需引入即可使用

    easycom HBuilderX 2 5 5起支持easycom组件模式 传统vue组件 需要安装 引用 注册 三个步骤后才能使用组件 easycom将其精简为一步 只要组件安装在项目的components目录下 并符合component