2019-05-07 vue中使用bootstrap，able时ui预设样式失效

今天在做项目的时候遇到一些坑：

如何在vue中使用bootstrap，并且在使用bootstrap的table时ui预设样式失效，使用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，代码仅供参考。

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

Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在这里配置好，脚手架自动使用你的配置覆盖掉默认的配置。
如果你的项目中没有 vue.config.js 文件，请你在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置如下：

const webpack = require("webpack");

module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。
//webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
      }
}

第四步：具体使用范例

我做了一个 tooltip 的示例，鼠标放上去会出现 tooltip 提示

//template


//script

如果 eslint 报误，请设置 .eslintrc.js 文件。

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

本人测试结果如下：

13170229-be5fab2566be49b0.jpg

第五步：使用过程中发现template中的bootstrap对table的预设css失效

可以看动table中的td没有成功的添加border样式

TIM图片20190507141809.png

结果发现问题在于table与tr之前忽略了tbody标签导致 th同理

效果如下：

TIM图片20190507143428.png

第六步：好的，下面说一下letter：spacing的css的问题

TIM图片20190507163815.png

图中可以看到在使用了letter：spacing之后text-align属性失效了。原因在于letter：spacing属性给每个字的右侧增加了一段距离，也就是你设置的属性值。这与text-align对文字的布局冲突了，解决办法的话也比较简单：

TIM图片20190507164136.png

在文字前边加上text-indent属性，属性值与letter：spacing的属性值一致即可。
参考链接： https://www.jianshu.com/p/0d0c1eaeb877