在vue中使用bootstrap5

在vue中如何使用bootstrap5

创建项目

vue create vue_use_bootstrap

然后安装bootstrap

npm install bootstrap

默认会装最新的 我装的是5.1.3版本

打开vue 的mian.js文件 添加上bootstrap的引用

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css' //引用bootstrap的样式
import 'bootstrap/dist/js/bootstrap.min.js' //引用bootstrap的js
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

最后在 HelloWorld.vue里面使用看看效果

效果出来了就说明引用成功了

也可以查看页面的head 标签里面是否有引用到css样式

总结一下，bootstrap5的使用方式比原来之前的版本更加方便快捷了，也不用再去担心安装jquery的依赖了，愉快的开发使用，放上bootstrap5的官方文档链接 v5.bootcss.com/

本人vue初学者，希望能继续交流