前端vue引入boostrap3

废话不多说，直接上干货！

第一步先安装jquery

① 在终端输入

npm install jquery --save-dev

② 在build文件夹中的webpack.config.js 添加以下内容（如果有就不用加）

const webpack = require("webpack");

如图:

然后在module.exports里添加

plugins: [

        new webpack.ProvidePlugin({

            jQuery: 'jquery',

            $: 'jquery'

        })

    ]

如图:

③ 在入口文件main.js 里面添加：

import $ from 'jquery' ;

如图:

④ 然后在components文件夹中里新建一个vue,添加代码测试jq引入是否成功

<template>
  <div>
    <p>Hello World</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
$(function() { 
  $("p").click(function() {
    alert("Welcome to zhengzhou");
  });
});
</script>
<style scoped>

</style>

点击HelloWorld弹出Welcome to zhengzhou即为引入成功
如图:

第二步安装Popper.js!

一定要先安装好Popper.js才能进行下一步安装boostrap，要不然会出错，这一步非常重要，我就是因为先安装了boostrap，后来在网上找了半天才解决了这个错，浪费了很长开发时间。如果没安装Popper.js的话f12可能会出现这样的报错:

具体安装如下：

方案1：直接引用popper.js

就是直接引用别人的popper.js库，如下：（建议npm安装，这个可能没有用）

<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

方案2：npm安装

在直接工程目录下使用npm安装：

npm install --save popper.js

然后你就可以在node_modules下找到你的Popper.js文件，如图：

第三步:安装Bootstrap

最后一步才是安装Boostrap
① 在终端输入

npm install --save-dev bootstrap

② 在入口文件main.js里添加以下代码,引入bootstrap的css和js

import'./node_modules/bootstrap/dist/css/bootstrap.min.css';

import './node_modules/bootstrap/dist/js/bootstrap.min.js';

如图:

③ 刚刚创建的vue组件中添加一段Bootstrap代码

<div class="btn-group" role="group" aria-label="...">  
      <button type="button" class="btn btn-default">Left</button>  
      <button type="button" class="btn btn-default">Middle</button>  
      <button type="button" class="btn btn-default">Right</button>  
</div> 

运行，查看效果 这些按钮已经变成Bootstrap按钮组了

如图:

如果有效果的话，恭喜你已经成功引入了boostrap！

最后，你也可以到boostrap中文文档里面进行下一步学习~