BootstrapVue в стандартном проекте Vuejs

Я пытаюсь создать шаблонный проект Vuejs, используя их интерфейс командной строки. Используя vue create <project-name>, я выбрал vuex, babel и typescript. Я также хочу импортировать Bootstrap-Vue.

После запуска npm install -D boostrap-vue

// main.ts
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App.vue';
import store from './store';

Vue.use(BootstrapVue);

Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

Я изучил способы изменения их конфигурации webpack с помощью файла vue.config.js, но после просмотра вывода vue inspect конфигурация webpack, похоже, готова к работе с css-loader и vue-style-loader. Все компилируется, но мой вывод выглядит так, как будто ни один из файлов Bootstrap css не загружается.

// App.vue
<template>
  <div>
    <b-btn v-b-modal.modal1>Launch demo modal</b-btn>

    <b-modal id="modal1" title="Bootstrap-Vue">
      <p class="my-4">Hello from modal!</p>
    </b-modal>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class AppAuthenticate extends Vue {}
</script>

Изображение приложения: Изображение запущенного компонента приложения

Мне кажется, что мне не хватает чего-то простого, но после нескольких часов возни с разными vue.config.js параметрами я не могу найти, что это такое.


vuejs2 bootstrap-vue
person tgtb    schedule 27.02.2018    source источник
comment
попробуйте переустановить bootsrap-vue без флага -D   -  person Volodymyr Symonenko    schedule 27.02.2018
comment
Пробовал без --save-dev, это на интерфейсе, так что я должен сделать это как минимум с --save. По-прежнему не повезло, результат тот же, что и выше.   -  person tgtb    schedule 27.02.2018

Ответы (1)


arrow_upward
0
arrow_downward

Нашел решение после просмотра старого проекта.

Простым исправлением был импорт соответствующих файлов css в мой файл main.ts:

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App.vue';
import store from './store';

import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'bootstrap/dist/css/bootstrap.css';

Vue.use(BootstrapVue);

Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

Достаточно просто. Удивлен, что не успел уловить это раньше.

person tgtb    schedule 27.02.2018
comment
К сожалению, некоторые плагины / библиотеки должны явно импортировать собственный CSS. Это хорошо для вас. :) - person Dencio; 28.02.2018