手册版本 V3.0

easycom 介绍 ( 基于 HBuilder X 实现 )

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。
easycom将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构的组件。就可以不用引用、注册，直接在页面中使用。同时打包后会自动剔除没有使用的组件。

graceUI 实现 easycom

1、更新 graceUI 框架 ( 2020-03-05 之后的版本 )
2、在 pages.json 内添加以下代码 : 

{
    ......
    "easycom": {
        "custom": {
            "grace(.*)": "@/graceUI/components/grace$1.vue"
        }
    }
}

具体位置您可以在已下载的 graceUI 文件包内打开 pages.json 参考;
3、在页面中使用组件:

vue 模式 : <grace组件名称></grace组件名称>, 如 : <gracePage></gracePage>
nvue 模式 : <graceNvue组件名称></graceNvue组件名称>, 如 : <graceNvuePage></graceNvuePage>

nuve 模式说明

因插件底层不支持 .nvue 文件, 我们将框架的 .nuve 组件重命名为 .vue  并部署到 graceUI/components/ 文件夹下，编写 easycom 规则实现了 nvue 组件的自动加载！
注意 : 
旧项目编译时控制台会报出 css 错误，可以忽略此错误，不影响项目正常运行。如果想彻底解决误报旧项目请删除所有页面的手动组件引入。

普通模式的使用范例

<template>
	<gracePage headerBG="#F2F2F2" borderWidth="1px" borderColor="#D1D1D1">
		<!-- 自定义头部导航 -->
		<view slot="gHeader" class="grace-header-body">
			<view class="grace-header-content grace-flex-center">自定义头部导航</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<view class="grace-blue">页面主体......</view>
		</view>
	</gracePage>
</template>
<script>
export default {}
</script>
<style>
</style>

nvue 模式的使用范例

<template>
	<graceNvuePage headerBG="#F2F2F2" borderWidth="1px" borderColor="#D1D1D1">
		<!-- 自定义头部导航 -->
		<view slot="gHeader" class="grace-header-body">
			<view class="grace-header-content grace-flex-center">
				<text class="grace-text">自定义头部导航</text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<text class="grace-blue grace-text">页面主体......</text>
		</view>
	</graceNvuePage>
</template>
<script>
export default {}
</script>
<style>
</style>