从0开始Vue2集成Bootstrap4（1）

满大街的复制粘贴腻歪了，就来看看最精简实用的吧！

我并非专业前端，如果有错误请大家指点~

本文使用yarn安装vue和依赖，npm自行使用。

一、安装Vue

二、安装jquery，bootstrap, popper.js，node-sass和sass-loader

bootstrap依赖 jquery和 popper.js。
由于集成到 Vue，所以不使用 script标签引入 bootstrap.bundle.js，因此需要安装 popper.js。

由于我习惯使用SCSS引入bootstrap的css样式，所以需要安装node-sass和sass-loader。如果是引入编译后的css，可以不安装。

sass-loader对于其他博客说的，需要配置webpack，但是我发现，根本不用配置什么，vue也会识别scss，build后也会解析。知道原因的可以跟我讲解一下。

BS源码浅读

源码bsvue/node_modules/bootstrap/js/src/index.js中

import $ from 'jquery'
import Alert from './alert'
...

由此可见，boostrap自动引入了jquery

编译后的bsvue/node_modules/bootstrap/dist/js/bootstrap.js中

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('popper.js')) :
  typeof define === 'function' && define.amd ? define(['exports', 'jquery', 'popper.js'], factory) :
  (factory((global.bootstrap = {}),global.jQuery,global.Popper));
}...

这段代码，整体意思我一个非专业人士就不懂了。但是可以根据源码看出，这是引入了jquery和popper.js。
既然jquery会判断并且自动加载，那么接下来就简单了：

运行项目

npm run dev

bsvue/src/App.vue引入bootstrap样式，这里不加scoped属性，是为了全局使用。

添加示例代码

修改bsvue/src/components/HelloWorld.vue文件，先加入几个不需要js的组件进来看看样式是否有了

效果：

接下来加入需要js的组件试试
首先bsvue/src/main.js引入bootstrap

import 'bootstrap'

bsvue/src/components/HelloWorld.vue加入轮播图组件

效果：

完美运行~~

不足请指出
转载请留出处~谢谢~