1.安装依赖
cnpm install bootstrap3 --save
cnpm install jquery --save
cnpm install popper.js --save
2.配置
在webpack构建的项目目录结构下,在webpack.base.conf.js配置文件下配置:
//在顶部添加
const webpack = require('webpack')
//在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
在webpack-simple构建的项目结构下,在webpack.config.js配置文件中增加如下配置。
module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': 'jquery'
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
],
...
}
并且如果在Vue-cli v3的版本中需要使用下面的方法:
在根目录中添加文件vue.config.js,然后写入下面配置
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
}
3、引入相关依赖
在项目的main.js中添加:
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
接下来就可以直接在组件中使用jquery和bootstrap了。
4、测试
测试jquery:
//在vue文件中添加测试代码
<script>
$(function () {
alert('234')
})
export default {
name: 'App'
}
</script>
测试bootstrap:
<template>
<div class="container">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary">测试按钮</button>
</div>
</div>
</div>
</template>