一、打包組件
可以建立一個打包工具類,將所有的需要全局掛載的自定義組件進行打包封裝,避免main.js過於雜亂。
import gbInput from '../components/gbInput/gbInput' //... //自定義組件打包安裝類,引入main.js後全局掛載,避免每個用到的頁面重複引入 const pack = { install:function(Vue) { Vue.component('gb-input', gbInput) //... } } export default pack;
通過import引入自定義組件,在vue的install方法中進行全局註冊。
該方法可以添加的類型如下:
export default { install(Vue,option){ 組件 指令 混入 掛載vue原型 } }
通過Vue.component('gb-input', gbInput)來進行掛載。
二、引入使用
在main.js中引入打包的工具類,並進行使用:
import pack from "./utils/pack";
Vue.use(pack)
這樣就可以直接在頁面中通過掛載時定義的組件名稱gb-input來使用gbInput組件了,無需每個頁面都import並在component中定義。