從CDN庫動態加載Vue組件

Question

我正在嘗試使用vue動態加載外部庫。 在這種情況下，那些庫具有我要使用的vue組件。 我當前的設置如下：

從CDN以編程方式加載腳本：

// The src CDN can change.
const src = 'https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js';
const newScript = document.createElement('script');
newScript.src = src;
newScript.async = false;
newScript.type = 'text/javascript';
document.body.appendChild(newScript);

稍后在代碼中，我想在組件加載完成后動態使用它：

<component :is="dynamicComponent" v-bind="componentProperties">
   <!-- More things inside -->
</component>

其中dynamicComponent是可以更改的數據屬性，並且將其設置為VBtn （也嘗試過v-btn ）。

但是，此方法不起作用，因為尚未在全球范圍內注冊組件。 我收到以下錯誤： Unknown custom element: <VBtn> 。 我也試圖做Vue.use(window.Veutify)后window.Vuetify可用，問題仍然存在。

我也嘗試過等待組件可用

waitFor(() => Vue.options.components[dynamicComponent]).then(...)

但是，它永遠不會進入then函數。 有趣的是，當我將Vue.options.components['VBtn']放入控制台時，我確實將組件取回。

我已經為此苦苦掙扎了一段時間。 任何建議，文檔，參考資料或其他方法都將不勝感激，請注意我需要依靠動態加載庫以及動態加載其組件。

提前致謝。

Answer 1

以下是按順序使用Vuetify的重要步驟：

加載vuetify.min.css （通常在<head> ）
加載Material Icons字體（如果需要）
加載vue.js
加載vuetify.js
初始化您的應用程序。

最重要的是：在初始化應用程序之前， vuetify.js需要加載vue.js和vuetify.js 。

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-content> <v-btn>Hello world</v-btn> </v-content> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="application/javascript"> Vue.config.devtools = false; Vue.config.productionTip = false; </script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> <script type="application/javascript"> window.onload = new Vue({ el: '#app' }); </script>

如果您確實希望/必須動態加載腳本，則可以將它們包裝成可以解決onload promise。 這是一個例子：

 const loadScript = source => new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = source; script.type = 'text/javascript'; script.onload = () => resolve(); script.onerror = event => reject(`${event.target.src} failed to load. ¯\\\\_(ツ)_/¯`); document.body.appendChild(script); }); Promise.all([ loadScript('https://cdn.jsdelivr.net/npm/vue/dist/vue.js').then(() => { Vue.config.devtools = false; Vue.config.productionTip = false; }), loadScript('https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js') ]).then( () => new Vue({ el: '#app' }), error => console.log(error), );

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-content> <v-btn>Hello world</v-btn> </v-content> </v-app> </div>

從CDN庫動態加載Vue組件

問題描述

1 個解決方案

解決方案1
0 2019-03-09 20:36:07

從CDN庫動態加載Vue組件

問題描述

1 個解決方案

解決方案1 0 2019-03-09 20:36:07

解決方案1
0 2019-03-09 20:36:07