VUE引入bootstrap3
废话不多说,直接上干货!
第一步先安装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中文文档里面进行下一步学习~