注意:
1.本教程将使用 cnpm 命令进行
2.在安装 bootstrap 之前,我们需要先安装 jQuery
一、安装jquery
1.安装命令
cnpm install jquery --save --save-exact # 安装jquery的命令
--save 表示保存到 package.json 文件中
--save-exact 去掉 > 精确版本
2.修改 build文件夹下的webpack.base.conf.js 文件
在头部插入
//..........
const webpack = require("webpack") //新加
//..........
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
//下面这段为新增代码
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery",
Popper: ['popper.js', 'default'], //这一句是安装 bootstrap 和 bootstrap 的 popper.js 之后再添加进来
})
],
3.在入口文件main.js中加入代码:
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css' //安装 bootstrap 之后添加
import 'bootstrap/dist/js/bootstrap.min.js' //安装 bootstrap 之后添加
二、安装 bootstrap 和 bootstrap的popper.js
1.安装命令
cnpm install bootstrap --save --save-exact # bootstrap的命令
cnpm install --save popper.js # bootstrap的popper.sj命令
2.再将上面那些在 bootstrap 安装完之后添加的代码加入对应地方即可
三、测试是否成功
1.在App.vue文件中加入
<template>
<div id="app">
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
</div>
</template>
<script>
$(function () {
alert('jquery引入成功!')
})
export default {
name: 'App'
}
</script>
2.运行 cnpm run dev 之后访问项目,看到提示则引用成功