vue 引入 bootstrap(二)

这篇文章直接写不借助任何的工具直接安装bootstrap。

Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。

vue 引入jquery的方法请点击这里vue 引入jquery的步骤

进入正文，步骤写起来

第一步：安装bootstrap

命令行工具，进入项目文件夹，执行： npm install bootstrap--save

第二步：确认安装成功

提示安装成功后，在package.json 文件内的 "dependencies"中检查是否有 "bootstrap": "^4.3.1", （如没有则需手动添加）如图

vue 引入 bootstrap(二)

第三步：在main.js文件中引入css样式

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

第四步：测试

重新启动vue-cli，页面组件中加如下测试代码：

<template>
  <div class="container-fluid">
    <h1>看板</h1>
    <div class="row">
      <div class="block col-md-4">.col-md-4</div>
      <div class="block col-md-4">.col-md-4</div>
      <div class="block col-md-4">.col-md-4</div>
    </div>
  </div>
</template>

<style scoped>
.block{
  height: 200px;
  background-color: #9efa74;
}

</style>

结果图：

vue 引入 bootstrap(二)

成功！！！

遇到的问题：

在使用的过程中发现col-md-offset-4这个栅格偏移的方法不生效，根源在于我装的是bootstrap4，将版本换成3就好了。

想看第二种引入方法点击这里使用vue+bootstrap的方式引入bootstrap