貴州建設(shè)網(wǎng)老網(wǎng)站百度關(guān)鍵詞推廣帝搜軟件
本文主要是面向?qū)懡M件庫的人士,而不是組件庫的使用人士。
出現(xiàn)原因
根本原因是因為組件庫的package.json中
dependencies包含了vue包,然后導(dǎo)致最后打包出來的組件庫也包含vue包
然后和引用這個組件庫的項目中的vue發(fā)生沖突。
舉個例子,project1是vue組件庫,package.json中dependencies包含了"vue":“2.6.1”
project1打包出了"project1":“0.0.1” 這個組件包
然后project2是項目代碼,package.json中dependencies包含了"vue":“2.6.1"和"project1”:“0.0.1”
這樣,在使用project1的組件時就會出現(xiàn)readonly錯誤
預(yù)防方法
這給我們寫組件庫一個啟示,千萬不要在package.json中dependencies包含了"vue"包
特殊場合
但有兩種情況,你會在組件庫中不自覺用到Vue對象
1.利用Vue的templateCompile,即模板編譯器
2.利用Vue.component進行全局組件注冊
首先第一點很簡單,參考一下其他開源Vue庫的實現(xiàn),例如elementUI
發(fā)現(xiàn)引用了@vue/component-compiler-utils包和vue-template-compiler,然后查看用法
這樣就實現(xiàn)了不引入vue包的情況下,使用模板編譯功能
2.如果是需要全局注冊的情況就比較麻煩了,
例如組件庫包含某個函數(shù),需要全局注冊組件
import Vue from "vue";
function test(name,component){Vue.component(name,component)
}
一般是像上面這么寫的因此就不得不引入vue包。
我這的解決方法比較差,但也可以解決這個問題,如果各位看官有更好的方法求指導(dǎo)
我是這么處理的
import config from "./config.js"
function test(name,component){config.Vue.component(name,component)
}
config.js
export default {};
即,通過config.js這個空對象,
然后在引入組件包時,需要先對config.js對象進行vue注入
以下時引用包project1的時候添加config.js
import Vue from 'vue';
import {config}from 'project1';
config.Vue=Vue;
然后main.js
import './config.js';
import project1 from "project1";
當(dāng)然,不清楚有沒有Vue.component單獨使用的vue的util庫,如果有的話求推薦