Как использовать Vue 3 и добавить плагин Boostrap-vue?

#javascript #vue.js #vuejs3

#javascript #vue.js #vuejs3

Вопрос:

Я пытаюсь использовать Vue 3, но, похоже, не могу снова использовать Vue.use (exampleplugin).

Я использую команду vue добавить bootstrap-vue после создания проекта vue create. И на плагине bootstrap-vue предупреждение с кодом:

 import Vue from "vue";

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);
  

Терминал вывода предупреждения:

предупреждение в ./src/plugins/bootstrap-vue.js

«экспорт ‘default’ (импортированный как ‘Vue’) не был найден в ‘vue’

предупреждение в ./node_modules/bootstrap-vue/esm/utils/vue.js

«экспорт ‘default’ (импортированный как ‘Vue’) не был найден в ‘vue’

Что в этом плохого? И как мне использовать vue 3 для добавления плагина bootstrap-vue?

Комментарии:

1. Довольно уверен, что BootstrapVue пока не совместим с Vue 3 . Вероятно, вам следует придерживаться Vue 2

2. Вам когда-нибудь удавалось разобраться в этом? У меня та же проблема, но для другой библиотеки. Импортируем его в ‘main.js ’ и привязка a .use к вызову createApp не работает.

Ответ №1:

Bootstrap Vue еще не готов для Vue 3.

Чтобы ответить на часть вашего вопроса, Vue 3 изменяет метод создания экземпляра приложения, включая способ регистрации плагинов.

Например…

 import { createApp } from 'vue';
import Router from './router/Router';

createApp({/* options */}})
  .use(Router)
  .mount('#app');
  

Вы можете прочитать больше об этом в официальных документах.

https://v3.vuejs.org/guide/instance.html

https://v3-migration.vuejs.org

Комментарии:

1. Это все еще так? Является ли bootstrap vue несовместимым с vue 3?

2. Да, Bootstrap-Vue утверждает, что они совместимы с vue 2.6: bootstrap-vue.org

Ответ №2:

Для vue 3 вы можете использовать bootstrap-vue-3 Install: npm i bootstrap-vue-3 Config:

 import { createApp } from "vue";
import App from "./App.vue";
import BootstrapVue3 from "bootstrap-vue-3";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";

const app = createApp(App);
app.use(BootstrapVue3);
app.mount("#app");

  

Комментарии:

1. Имейте в виду, что он еще не готов к производству.