1、在工程项目下安装Bootstrap5依赖包
npm install bootstrap@5.3.0-alpha1 或者 yarn add npm install bootstrap@5.3.0-alpha1
2、安装安装jquery
Bootstrap有js函数,必须先引入jquery
npm install jquery --save
3、在vue.config.js配置 jQuery 插件的参数
点击查看代码
const webpack = require("webpack") module.exports = { outputDir: 'dist', //publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/' // 配置插件参数 configureWebpack: { plugins: [ // 配置 jQuery 插件的参数 new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] } };
4、在项目的 src/main.js 文件中,引入并使用 Bootstrap5(全局引入)
点击查看代码
// 引入jquer,使用bootstrap的js必须先引入jquery // 全局注册 $ import $ from 'jquery' Vue.prototype.$ = $ // 引入bootstrap样式 import 'bootstrap/dist/js/bootstrap.bundle' import 'bootstrap/dist/css/bootstrap.min.css'
5、可通过package.json查看安装依赖版本号,bootstrap已经按照指定版本安装,jquery未指定,自动匹配版本
6、接下来可以直接使用bootstrap样式,可参考bootstrap5中文文档https://v5.bootcss.com/docs/getting-started/introduction/,随便找个例子贴到自己的vue组件中
7、运行后查看效果,样式已生效
8、由于中文文档大部分还是英文,不方便浏览可以参考菜鸟教程(比较粗略)https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html
需要仔细研究建议查看官网
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 历时 8 年,我冲上开源榜前 8 了!
· 物流快递公司核心技术能力-海量大数据处理技术
· 四大AI编程工具组合测评
· 关于能否用DeepSeek做危险的事情,DeepSeek本身给出了答案
· 如何在 Github 上获得 1000 star?