一. 安装
在 vue 项目中引入 bootstrap,首先要引入依赖:jQuery 和 popper
笔者这里采用cnpm安装:
cnpm install jquery --save-dev
cnpm install @popperjs/core --save-dev
cnpm install bootstrap --save-dev
安装成功后:
// package.json
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@popperjs/core": "^2.11.6",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"bootstrap": "^5.2.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
二. 引入
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
注意: 只有这两行代码 ,不需要全局注册 $ 等语句
三.配置 jQuery
在 vue.config.js 中,写如下代码(如果没有 vue.config.js ,则在 package.json 同级目录下手动新建)
// defineConfig 这里是vue3 的默认代码
const { defineConfig } = require('@vue/cli-service')
const webpack = require("webpack")
module.exports = defineConfig({
// 配置插件参数
configureWebpack: {
plugins: [
// 配置 jQuery 插件的参数
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]
}
})
四.使用插件
<div class="hello">
<button type="button" class="btn btn-primary">Primary</button>
</div>
成功使用!