vue 高頻元件封裝和使用小技巧

2021-10-18 04:28:22 字數 915 閱讀 4989

今天分享乙個 對於專案中 使用頻率比較高的元件封裝引用的小技巧

大家 都知道在專案中 呼叫元件 有兩種方式

(一) main.js 全域性引用 或者 部分引用

(二) 在使用頁面單獨引用 要先import, 然後在 components 註冊, 最後在template模板中使用

我今天想說的是 第二種在 元件在使用頻率很高的情況下使用 我們可以通過 webpack api的 require.context()方法 把我們常用的元件 統一引到專案中 下面上詳細**

在我專案下 新建幾個頁面

然後新建乙個global.js檔案

// 寫乙個高頻元件管理的demo

import vue from 'vue'

// 首字母大寫

function changestr(str)

// 用到webpack 的api require.context 引入同級目錄下的元件

// 三個引數 目標路徑 是否包括子集 匹配檔案型別 正則

const requirecomponent = require.context('.',false,/\.vue$/);

requirecomponent.keys().foreach(filename=>);

引入完成之後 在我們的main.js檔案中 引入global.js

這麼做的好處是 把常用元件全域性自動引入到main.js中,不用每個頁面單獨在引元件

缺點是 減慢載入速度 所以不要什麼都引進來

Vue元件使用技巧 is屬性

首先,提起vue的元件,大家都不會陌生,使用起來就像使用普通標籤一樣簡單,功能也可以隨意定製,真的是很方便.但是基於html語法,一些特定的標籤,比如,等.在標籤下,只有標籤是有效的,同理表現下只有有效,那麼如果我們想加入自定義的元件該怎麼辦呢.這種方法顯然是不太適合的 my component u...

vue 封裝公共元件 學習 使用

在vue 專案中 會有很多類似的內容 因公司 經常做支付這一塊 像下面的類似的功能還有很多地方要用 因此嘗試 乙個很簡單的小封裝 子元件 sub pay pay left total span div pay amount 實付金額 div div pay right click onpaybtn ...

vue動態使用svg,封裝為元件使用

0.需要安裝的庫 1.在assets檔案下建立icons資料夾 2.在components資料夾下建立svgicon元件 3.vue.config.js檔案的配置項 4.使用 基於vue cli3配置,配置檔案為vue.config.js devdependencies import vue fro...