【uni-app】easycom模式（自動按需引入組件）

傳統vue組件，需要安裝、引用、注冊，三個步驟后才能使用組件。easycom將其精簡為一步。 只要組件安裝在項目的components目錄下，並符合components/組件名稱/組件名稱.vue目錄結構。就可以不用引用、注冊，直接在頁面中使用。 如下：

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

<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配置以下參數

"easycom": {
  "autoscan": true, //是否自動掃描組件
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目錄內的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules內的vue文件
  }
}

2、組件引入符合命名規則

3、在頁面會自動引入

使用easycom的好處

1、簡化組件的使用，提高開發效率

2、不論組件目錄下安裝了多少組件，easycom打包后會自動剔除沒有使用的組件，對組件庫的使用尤為友好。

說明

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