样板 Vuejs 项目中的 BootstrapVue

Question

我正在尝试使用他们的 CLI 设置样板 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');

我研究了使用 vue.config.js 文件更改其 webpack 配置的方法，但在查看 vue inspect 的输出后，webpack 配置似乎已准备好使用 css-loader 和vue-style-loader。一切都编译但我的输出看起来像 Bootstrap css 文件的 none 正在加载。

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

很简单。很惊讶我没有早点发现它。

样板 Vuejs 项目中的 BootstrapVue

BootstrapVue in boilerplate Vuejs project

vuejs2

bootstrap-vue