1.组件

组件的类别

uni-app支持的组件分为vue组件和小程序自定义组件。日常开发来讲，推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。

如果扩展组件符合uni-app的easycom组件规范，则可以免注册，直接使用。比如uni-ui扩展组件就符合easycom组件规范。

如果组件不符合easycom规范，则需要在代码里手动import和注册组件，然后才能使用。

easycom组件规范

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

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

比如一个uni-rate评分组件，他存放在了目录/components/uni-rate/uni-rate.vue, 同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用。如下:

<template>
        <view>
            <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
        </view>
</template>
<script>
	// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
	export default {
		data() {
			return {
				
			}
		}
	}
</script>

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

easycom是自动开启的，不需要手动开启

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

自定义easycom组件示例

如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径。

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

说明：

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

uniapp组件

1.组件

组件的类别

easycom组件规范