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

矫情吗；* 2023-05-21 13:59 39阅读 0赞

# [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插件市场][uni-app]下载符合`components/组件名称/组件名称.vue`目录结构的组件，均可直接使用。

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

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

**自定义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 就可以自动导入了 如下图所示 ↓↓↓ 。`

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

![å¨è¿éæå¥å¾çæè¿°][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70]

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

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

![å¨è¿éæå¥å¾çæè¿°][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]

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

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

![å¨è¿éæå¥å¾çæè¿°][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 2]

[easycom]: https://uniapp.dcloud.io/collocation/pages?id=easycom
[uni-app]: https://ext.dcloud.net.cn/
[20200331105530572.png]: /images/20230521/169169ea470e4d25a5c6f3832a74d4aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70]: /images/20230521/ec655619d73b4163bd75fa885a854200.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 1]: /images/20230521/0822cf905b4e4a4f987c705a0f193202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTc5Mzc5MA_size_16_color_FFFFFF_t_70 2]: /images/20230521/12d9da426dec492eaa8997752e5d404d.png