在vue3中安装使用bootstrap过程

 更新时间:2023年10月26日 09:28:29   作者:小杨闯关之情迷代码  
这篇文章主要介绍了在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>

在这里插入图片描述

成功使用!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue之版本升级后不兼容的问题及解决过程

    Vue之版本升级后不兼容的问题及解决过程

    本文将探讨 Vue 版本升级后常见的不兼容问题,并提供相应的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • Vue学习笔记进阶篇之vue-cli安装及介绍

    Vue学习笔记进阶篇之vue-cli安装及介绍

    这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • VantUI封装自定义Tabbar路由跳转的实现

    VantUI封装自定义Tabbar路由跳转的实现

    本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 浅谈Vue页面级缓存解决方案feb-alive (下)

    浅谈Vue页面级缓存解决方案feb-alive (下)

    这篇文章主要介绍了浅谈Vue页面级缓存解决方案feb-alive(下),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Electron+vue3项目使用SQLite3数据库详细步骤(超详细)

    Electron+vue3项目使用SQLite3数据库详细步骤(超详细)

    Electron是一个基于vue.js的新框架,它可以构建桌面应用,这篇文章主要给大家介绍了关于Electron+vue3项目使用SQLite3数据库的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • vue项目下npm或yarn下安装echarts多个版本方式

    vue项目下npm或yarn下安装echarts多个版本方式

    这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Antd form表单的使用、设值、取值、清空值方式

    Antd form表单的使用、设值、取值、清空值方式

    这篇文章主要介绍了Antd form表单的使用、设值、取值、清空值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue常见报错整理大全(从此报错不害怕)

    Vue常见报错整理大全(从此报错不害怕)

    写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛,这篇文章主要给大家介绍了关于Vue常见报错整理的相关资料,需要的朋友可以参考下
    2022-08-08
  • 浅谈Vue3的几个优势

    浅谈Vue3的几个优势

    这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧
    2021-10-10
  • vue+elementUI实现动态合并数据相同的单元格(可指定合并列)

    vue+elementUI实现动态合并数据相同的单元格(可指定合并列)

    这篇文章主要介绍了vue+elementUI如何实现动态合并数据相同的单元格,文中有详细的代码实例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-07-07

最新评论