uniapp中的easyCom是什么

uniapp中的easyCom是一种组件自动注册机制，可以让开发者更加方便地使用和管理组件。它能够自动扫描指定目录下的所有组件，并注册到全局组件中，这意味着无需手动在components中引入组件，也无需在每个页面中单独引入组件，只需要在组件的目录下创建一个index.vue文件，就可以自动注册组件并在全局中使用。

使用easyCom非常简单，只需要在项目根目录下的pages.json中配置easyCom属性即可。例如

JSON复制

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^cu-": "@/components/cu/"
    }
  }
}

其中，autoscan表示是否启用自动扫描功能，如果设置为true，则会自动扫描项目中所有符合规则的组件并注册到全局中。如果设置为false，则需要手动在components中引入组件。custom是自定义规则，可以根据规则自动注册组件。例如上面的例子中，以cu-开头的组件会被自动注册到@/components/cu/目录下。

除了在pages.json中配置easyCom属性外，还可以在单个页面的json文件中配置usingComponents属性来引用组件。例如：

JSON复制

{
  "usingComponents": {
    "cu-btn": "@/components/cu-btn/index"
  }
}

上面的例子中，cu-btn组件会被自动引入到当前页面中，无需手动在components中引入。

如果有一些组件不需要自动注册，可以在组件目录下创建一个.easycomignore文件来忽略该组件的自动注册。例如：

复制

# 忽略my-component组件
my-component/

如果需要忽略某个目录下的所有组件，可以在.easycomignore文件中输入目录名即可。

如果需要自定义规则，可以在pages.json中配置custom属性。例如：

JSON复制

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^my-": "@/components/my/"
    }
  }
}

上面的例子中，以my-开头的组件会被自动注册到@/components/my/目录下。

需要注意的是，uni-app为了调试性能的原因，修改easyCom规则不会实时生效，配置完后，需要重启HBuilderX。

uniapp中的easyCom是什么-CSDN博客

二

传统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>

使用步骤：

1. 在pages.json配置以下参数

2、组件引入符合命名规则

3、在页面会自动引入

使用easycom的好处

1、简化组件的使用，提高开发效率

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

说明
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

官网：https://uniapp.dcloud.io/collocation/pages?id=easycom

                        
原文链接：https://blog.csdn.net/cdgogo/article/details/111031766

三  使用uniapp，引入uView遇到的问题(easycom无效解决方法）

在HBuilderX通过npm安装uView时，按照官网文档配置easycom无效

官网为：

4. 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

温馨提示

1. uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
2. 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

这样配置后并没有出现相应的uVIew组件

解决方法：

//page.json
{
    "easycom": {
		"autoscan": true,
		"custom": {
		 /* uView按需引入 */
			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
		}
	},
    // 此为本身已有的内容
	"pages": [
		// ......
	]
}

原文链接：https://blog.csdn.net/qq_62015542/article/details/134993089