1. 程式人生 > 實用技巧 >【uni-app】easycom模式(自動引入元件)

【uni-app】easycom模式(自動引入元件)

傳統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打包後會自動剔除沒有使用的元件,對元件庫的使用尤為友好。

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