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

文章目录

• 1、安装jquery(Bootstrap依赖jquery)
• 2、引入BootStrap
• 3、下载BootStrap包，并将文件放入src/assets目录下
• 4、配置使用jQuery
• • 4.1 添加Webpack
  • 4.2 添加插件配置
• 5、在main.js中引入
• 6、测试
• 7、测试效果

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

1、安装jquery(Bootstrap依赖jquery)

npm install jquery --save

2、引入BootStrap

npm install bootstrap -- save

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

4、配置使用jQuery

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

4.1 添加Webpack

const webpack=require("webpack")

4.2 添加插件配置

// 配置全局使用 jquery
plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
})]

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"

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>

7、测试效果