今天在做項目的時候遇到一些坑：

如何在vue中使用bootstrap，并且在使用bootstrap的table時ui預(yù)設(shè)樣式失效，使用letter-spacing屬性后text-align：center;屬性失效。

第一步：安裝 jQuery、 Bootstrap、popper.js依賴。

其中popper.js 用于在 Bootstrap 中顯示彈窗、提示、下拉菜單，所以需要引入

npm install jquery bootstrap@3 popper.js --save

注意：上面的 bootstrap@3 指的是安裝 Bootstrap 第三版，如果不加 @3 符號，默認安裝第四版。

第二步：配置 main.js

引入 Boostrap 請看配置文件。

//main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在這里引入 bootstrap。默認只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也可以在這里引入 bootstrap.css ;
//import "bootstrap/dist/css/bootstrap.css";

Vue.config.productionTip = false;

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

我的 APP.vue 的配置，只是引入 bootstrap.css，代碼僅供參考。

<style>
// 因為我的 bootstrap 文件經(jīng)過了我自己的調(diào)整，所以單獨放在 assets 文件夾中做單獨引入。
//如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。
@import "./assets/css/bootstrap.css";
</style>

第三步：配置 vue.config.js 文件

Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在這里配置好，腳手架自動使用你的配置覆蓋掉默認的配置。
如果你的項目中沒有 vue.config.js 文件，請你在 package.json 文件的同級目錄新建一個 vue.config.js 文件。文件內(nèi)具體的配置如下：

const webpack = require("webpack");

module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件參數(shù)的地方，你在這里設(shè)置，會新建或者覆蓋 webpack 默認配置。
//webpack ProvidePlugin 的含義是創(chuàng)建一個全局的變量，使這個變量在 webpack 各個模塊內(nèi)都可以使用。這里的配置含義是創(chuàng)建 '$'、'jQuery'、'window.jQuery' 三個變量指向 jquery 依賴，創(chuàng)建 'Popper' 變量指向 popper.js 依賴。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
      }
}

第四步：具體使用范例

我做了一個 tooltip 的示例，鼠標放上去會出現(xiàn) tooltip 提示

//template
<template>
  <div class="content-wrap">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
    <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
  </div>
</template>

//script
<script>
export default {
  name: "componentsTooltips",
  mounted: function() {
    //在頁面加載完畢后初始化 tooltip， 相當于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }
    $('[data-toggle="tooltip"]').tooltip();
  }
};
</script>

如果 eslint 報誤，請設(shè)置 .eslintrc.js 文件。

module.exports = {
  env: {
    node: true,
    jquery: true
  }
};

本人測試結(jié)果如下：

13170229-be5fab2566be49b0.jpg

第五步：使用過程中發(fā)現(xiàn)template中的bootstrap對table的預(yù)設(shè)css失效

<template>
  <div class="content-wrap">
    <table class="table table-hover table-bordered">
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
          <td>1-4</td>
          <td>1-5</td>
        </tr>
        <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
          <td>2-5</td>
        </tr>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
          <td>3-5</td>
        </tr>
    </table>
  </div>
</template>

可以看動table中的td沒有成功的添加border樣式

TIM圖片20190507141809.png

結(jié)果發(fā)現(xiàn)問題在于table與tr之前忽略了tbody標簽導(dǎo)致 th同理

<template>
  <div class="content-wrap">
    <table class="table table-hover table-bordered">
      <tbody>
        <tr>
          <td>1-1</td>
          <td>1-2</td>
          <td>1-3</td>
          <td>1-4</td>
          <td>1-5</td>
        </tr>
        <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
          <td>2-5</td>
        </tr>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
          <td>3-5</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

效果如下：

TIM圖片20190507143428.png

第六步：好的，下面說一下letter：spacing的css的問題

TIM圖片20190507163815.png

TIM圖片20190507164136.png