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