在样板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和{{ 1}}。一切都编译但我的输出看起来没有加载任何Bootstrap css文件。

vue-style-loader

应用图片

我觉得我错过了一些简单的东西，但经过几个小时摆弄不同的// 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> 参数后，我似乎无法找到它。

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

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