Vue基礎元件自動化全域性註冊

2021-09-25 02:27:23 字數 893 閱讀 8506

vue中有很多基礎的元件可以自動化註冊使用

在src/components下面建立 basecomponents/basevue.vue

// the vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import vue from 'vue'

import router from './router'

import upperfirst from 'lodash/upperfirst'//應用模組

import camelcase from 'lodash/camelcase'//轉為駝峰命名

vue.config.productiontip = false

/* eslint-disable no-new */

// 全域性匯入元件

const requirecomponent = require.context(

// 其元件目錄的相對路徑

'./components/basecomponents',

// 是否查詢其子目錄

false,

// 匹配基礎元件檔名的正規表示式, 這裡可以匹配的檔名為ba******.vue格式

/base[a-z]\w+\.(vue|js)$/ )

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

new vue()

二、使用的話 直接要在想使用的頁面:

vue 基礎元件的自動化全域性註冊

參考官網 下的 基礎元件的自動化全域性註冊 在日常開發中,有一些元件是比較常用,但是為了避免在開發過程中不停地引入,或者在main.js中註冊,或者每新增乙個元件就需要手動註冊一次。則直接進行自動化全域性註冊。自動化全域性註冊,官網上都詳細的說明,以下是自己官網的說明基礎上進行了乙個demo開發例項...

基礎元件的自動化全域性註冊

require.context是webpack的api,主要用來實現自動化匯入模組,在前端工程中,如果遇到從乙個資料夾引入很多模組的情況,可以使用這個api,它會遍歷資料夾中的指定檔案,然後自動匯入,使得不需要每次顯式的呼叫import匯入模組 例如在main.js中全域性註冊多個元件 基礎元件的自...

元件的自動化全域性註冊

官方位址 在使用vue構建專案的過程中,我們會設定一些通用的元件,他可能只包含了乙個按鈕或者其他的乙個小功能,但是會被我們在不同的元件頁面頻繁呼叫。此時若是每乙個元件頁面都進行引用,將會有很多重複冗雜的 可以改為全域性註冊。具體如下 將這些通用基礎元件放置在同乙個資料夾下 如 components ...