在uniapp目录下的uni_module中创建自定义组件

一、前言

  在使用 uni-app 框架时，可能里面的内置组件和扩展组件都不是我们想要的，或者不能满足我们的需求，这时就必须得创建自定义组件了，在低版本的 HbuilderX 中所有的组件或插件都是直接放在 components 目录中的，创建自定义组件时直接在这个目录创建就行，引用的时候也是直接引用（easycom 规范），但是在 HbuilderX 高版本中你可能看不到 components 这个组件，反而多了个 uni_module 目录文件，其实官方已经将所有的组件或插件都放在这个目录中了，可以说它相当于 components 目录文件，但是我们直接在 uni_module 目录文件中创建自定义组件然后直接引用。

 

 二、创建自定义组件

1. 在项目根目录下新建 components 目录，右键新建组件，填写自定义组件的名称，选择开发中使用的样式或语法模板，然后在对应的组件名称/组件名称 .vue文件里编写代码。

2. 在根目录下的 uni_modules 目录右键新建 uni_modules 插件，填写相应的组件信息后直接创建即可。

注意：自定义组件的内容在 components 目录下 组件名称/组件名称 .vue中编写，在页面中引用的时候的直接使用创建组件的名称引用就行，无需导入注册（easycom 规范）。自定义组件中的示例代码如下：

<template>
	<view>
		这是一个自定义组件
	</view>
</template>
<script>

export default {

//自定义组件的名称

name: "my-search",

data() {

return {
		};
	}
}

</script>
<style lang="scss">

//样式使用的是 scss 模板
</style>

 

三、easycom 组件规范

1. 只要组件安装在项目 uni_modules 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用导入、注册，直接在页面中使用，去除传统的 Vue 组件使用方式。
 注意：并不是必须在项目的 components 目录新建自定义组件，也可以在 uni_modules 目录下新建自定义 uni_modules 插件，然后在对应的 components/组件名称/组件名称.vue 文件里编写代码。
2. easycom 是自动开启的，不需要手动开启。有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。
3. 如果你的组件名称或路径不符合 easycom 的默认规范，可以在 pages.json的easycom 节点进行个性化设置，自定义匹配组件的策略。
4. easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用5. easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。
6. 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
7. 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
8. easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
9. nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom。

 

关于 uni_modlue 更多信息：https://uniapp.dcloud.net.cn/plugin/uni_modules.html