可能你的許多元件只是包裹了乙個輸入框或按鈕之類的元素,是相對通用的。我們有時候會把它們稱為基礎元件,它們會在各個元件中被頻繁的用到。
幸好如果你使用了 webpack (或在內部使用了 webpack 的 vue cli 3+),那麼就可以使用require.context
只全域性註冊這些非常通用的基礎元件。這裡有乙份可以讓你在應用入口檔案 (比如src/main.js
) 中全域性匯入基礎元件的示例**:
import vue from 'vue'
import upperfirst from 'lodash/upperfirst'
import camelcase from 'lodash/camelcase'
const requirecomponent = require.context(
// 其元件目錄的相對路徑
'./components',
// 是否查詢其子目錄
false,
// 匹配基礎元件檔名的正規表示式
/base[a-z]\w+\.(vue|js)$/
)requirecomponent.keys().foreach(filename => )
vue元件劃分注意點
如何實現元件化 基礎元件主要指那些本身不包含任何業務邏輯 可以被輕鬆復用的元件,例如 picker timepicker toast dialog actionsheet 等等.基礎元件的通訊基本就是往元件傳入 prop,並監聽元件 emit 的事件。業務元件主要指那些包含業務邏輯,包括一些與後端介...
Vue官方文件學習 動態元件和非同步元件
當在多個元件之間進行切換 如選項卡 的時候,為了避免重複渲染導致的效能問題,可能會想對元件進行快取。比如在某個選項卡中選擇了某個選單閱讀某篇長文章,切換選項卡再切換回來,如果沒有保持元件狀態,選單將回到初始選中狀態。v bind is currenttabcomponent component 在切...
Vue 關於vue官方文件的個人小結
vue cli service暴露了inspect命令用於審查解析好的 webpack 配置。1.將其輸出重定向到乙個檔案以便進行查閱 vue inspect output.js 2.通過指定乙個路徑來審查配置的一小部分 vue inspect module.rules.0 只審查第一條規則 3.指...