vuejs2 - BootstrapVue 在样板 Vuejs 项目中

Question

我正在尝试使用他们的 CLI 设置样板 Vuejs 项目。使用vue create <project-name>I选择vuex和。我也想导入 Bootstrap-Vue。babeltypescript

运行后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参数后，我似乎找不到那是什么。

Answer 1

在浏览了一个旧项目后找到了解决方案。

简单的修复是在我的 main.ts 文件中导入适当的 css 文件：

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');

很容易。很惊讶我没有早点抓住它。