BootStrap在Vue中的安装使用详细教程

bootstrap的安装依赖jquery、需要提前安装jquery

1、安装jquery(Bootstrap依赖jquery)

npm install jquery --save
1

2、引入BootStrap

npm install bootstrap -- save
1

3、下载BootStrap包，并将文件放入src/assets目录下

4、配置使用jQuery

在build/webpack.base.conf.js中添加如下配置

4.1 添加Webpack

const webpack=require("webpack")
1

4.2 添加插件配置

// 配置全局使用 jquery
plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
})]
1
2
3
4
5
6
7
8

5、在main.js中引入

//引入jquery
import $ from "jquery"
//引入bootstrap
import "./assets/bootstrap-3.4.1-dist/css/bootstrap.css"
import "./assets/bootstrap-3.4.1-dist/js/bootstrap.js"
1
2
3
4
5

6、测试

 <div class="container" style="background-color: pink;">
		<div class="row">
			<div class="col-md-6" style="background-color: pink;">6列</div>
			<div class="col-md-6" style="background-color: yellow;">6列</div>
		</div>

		<div class="row">
			<div class="col-md-4" style="background-color: red;">4列</div>
			<div class="col-md-8" style="background-color: deeppink;">8列</div>
		</div>

	</div>
1
2
3
4
5
6
7
8
9
10
11
12

7、测试效果