uniapp中easycom用法詳解

来源:https://www.cnblogs.com/eminer/archive/2023/03/22/17243506.html
-Advertisement-
Play Games

Uniapp中的easycom是一種組件自動註冊機制,可以讓開發者更加方便地使用和管理組件。本文詳細的介紹了關於easycom使用方法。 ...


Uniapp中的easycom是一種組件自動註冊機制,可以讓開發者更加方便地使用和管理組件。下麵詳細介紹下關於easycom使用方法。

什麼是easycom

easycom是Uniapp框架提供的一種組件自動註冊機制,它可以自動掃描指定目錄下的所有組件,並註冊到全局組件中。這意味著我們無需手動在components中引入組件,也無需在每個頁面中單獨引入組件,只需要在組件的目錄下創建一個index.vue文件,就可以自動註冊組件併在全局中使用了。

如何使用easycom?

使用easycom非常簡單,只需要在項目根目錄下的pages.json中配置easycom屬性即可。例如:

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^cu-": "@/components/cu/"
    }
  }
}

其中,autoscan表示是否啟用自動掃描功能,如果設置為true,則會自動掃描項目中所有符合規則的組件並註冊到全局中。如果設置為false,則需要手動在components中引入組件。

custom是自定義規則,可以根據規則自動註冊組件。例如上面的例子中,以cu-開頭的組件會被自動註冊到@/components/cu/目錄下。

除了在pages.json中配置easycom屬性外,還可以在單個頁面的json文件中配置usingComponents屬性來引用組件。例如:

{
  "usingComponents": {
    "cu-btn": "@/components/cu-btn/index"
  }
}

上面的例子中,cu-btn組件會被自動引入到當前頁面中,無需手動在components中引入。

easycom的規則

easycom支持多種規則,可以自定義組件的目錄和組件名。以下是常見的規則:

  • 目錄規則:將組件放在components目錄下,文件名為index.vue,則組件會自動註冊到全局中。例如:components/my-component/index.vue會被自動註冊為my-component組件。

  • 首碼規則:將組件放在任意目錄下,文件名為index.vue,文件名以指定首碼開頭,例如my-,則組件會自動註冊到全局中。例如:components/my-component/index.vue會被自動註冊為my-component組件。

  • 全路徑規則:將組件放在任意目錄下,文件名為index.vue,則可以在頁面中使用全路徑來引用組件,例如:@/components/my-component/index

easycom的註意事項

雖然easycom提供了方便的組件自動註冊機制,但

在使用easycom時,也有一些需要註意的事項:

  1. 組件命名必須是小寫字母,使用短橫線連接單詞。例如:my-component

  2. 不同平臺的組件可能有不同的實現方式,因此需要在pages.json中配置easycom屬性時,需要根據平臺分別配置。例如:

    {
      "easycom": {
        "nvue": {
          "autoscan": true
        },
        "h5": {
          "autoscan": true
        }
      }
    }

     

  3.  如果有一些組件不需要自動註冊,可以在組件目錄下創建一個.easycomignore文件來忽略該組件的自動註冊。例如:

    # 忽略my-component組件
    my-component/

    如果需要忽略某個目錄下的所有組件,可以在.easycomignore文件中輸入目錄名即可。

  4. 如果需要自定義規則,可以在pages.json中配置custom屬性。例如:
    {
      "easycom": {
        "autoscan": true,
        "custom": {
          "^my-": "@/components/my/"
        }
      }
    }

    上面的例子中,以my-開頭的組件會被自動註冊到@/components/my/目錄下。

  5. 如果需要在某個頁面中引用組件,可以在頁面的json文件中配置usingComponents屬性。例如:
    {
      "usingComponents": {
        "my-component": "@/components/my-component/index"
      }
    }

    上面的例子中,my-component組件會被自動引入到當前頁面中。

  總的來說,easycom是Uniapp框架中非常方便的組件自動註冊機制,可以大大簡化組件的使用和管理。但是在使用時需要註意一些規則和註意事項,以保證組件能夠正常註冊和使用。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 場景:在SQL Server資料庫的SQL優化中,我們有時候會需要找出某個視圖的依賴對象,簡單的視圖倒是很容易一眼就找出依賴對象,一旦遇到一些複雜的視圖,如果我們手動整理的話,就相當麻煩了,因為你要一個對象一個對象的捋一遍。相當的耗時耗力,其實這種機械、重覆、繁雜的事情就應該讓機器(SQL)去處理。 ...
  • 一、單表查詢 庫表student.report,有3個欄位, 姓名、 學科、 成績, 記錄如下, 根據要求完成SQL語句 | Name | Subject | Result | | | | | | 李白 | Math | 95 | | 杜甫 | English | 83 | | 李商隱 | Math ...
  • 二維碼識別技術已廣泛應用在移動支付、實用工具、電商購物、社交通訊等場景。然而,在實際生活中,二維碼容易遇到距離遠、暗光、強光、污損、模糊和大角度傾斜等複雜場景,導致識別困難,掃碼體驗差。華為HMS Core 統一掃碼服務(Scan Kit)為開發者們的APP帶來一站式掃碼解決方案,並且擁有高識別率和 ...
  • 有時候會想,如果chatGPT是人,它會是一個怎樣的人呢?下麵是我的推測過程。 首先,她應該是女人 會推測而不會計算 你問它: 3457 * 43216 = ,它回答 149261912 (這是錯的。正確結果是 149397712)。 之所以結果的 2 是對的,僅僅因為它讀了太多的文字資料以後,隱約 ...
  • SparseArray家族 SparseArray基於鍵值對存儲數據,key為int,value為object,簡單使用如下: //聲明 SparseArray<String> sparseArray= new SparseArray<>(); //增加元素,append方式 sparseArray ...
  • 前言 前面我們簡單的瞭解了 vue 初始化時的一些大概的流程,這裡我們詳細的瞭解下具體的內容; 內容 這一塊主要圍繞init.ts中的initRender進行剖析,參數合併完成之後就開始了初始化生命周期。 initRender initRender位於src/core/instance/render ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前段時間接觸了Three.js後,試著用他載入了一些模型three.js初體驗簡陋的瞭解了一下three.js的相關使用,並且寫下了第一篇文章。但是過後還是對很多一知半解,作為不會建模且目前沒有接觸到相關業務需求的開發,難道沒有模型就什麼 ...
  • 事件匯流排Mitt使用非常簡單,本篇隨筆介紹在Vue3+TypeScript 前端項目中使用的一些場景和思路。我們在Vue 的項目中,經常會通過emits 觸發事件來通知組件或者頁面進行相應的處理,不過我們使用事件匯流排Mitt來操作一些事件的處理,也是非常方便的。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...