在vue3中安装使用bootstrap过程
作者:小杨闯关之情迷代码
这篇文章主要介绍了在vue3中安装使用bootstrap过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、安装
在 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>
成功使用!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。