uni-app自动引入多个全局组件“easycom”

布满荆棘的人生 2022-09-12 08:58 2233阅读 0赞

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

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

比如前述举例的[uni-rate组件][uni-rate]，它导入到uni-app项目后，存放在了目录/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`打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件库批量安装，随意使用，自动按需打包。以官方的`uni-ui`为例，在HBuilderX新建项目界面选择`uni-ui`项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

举例说明:

"easycom": {
    		"custom": {
    			"autoscan": true,
    			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
    			"asyi-(.*)": "@/easy-ui/components/asy-$1.vue"
    		}
    	},

创建test.vue

<template>
    	<u-action-sheet :list="list" v-model="show"></u-action-sheet>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				list: [{
    					text: '点赞',
    					color: 'blue',
    					fontSize: 28
    				}, {
    					text: '分享'
    				}, {
    					text: '评论'
    				}],
    				show: true
    			}
    		}
    	}
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6b6R6KGM5aSp5LiL_size_20_color_FFFFFF_t_70_g_se_x_16][]

[uni-rate]: https://ext.dcloud.net.cn/plugin?id=33
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6b6R6KGM5aSp5LiL_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/c989eba28a59435fad300d1bac712a35.png