在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>

在这里插入图片描述

成功使用!

总结

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

相关文章

  • Nuxt.js实战和配置详解

    Nuxt.js实战和配置详解

    这篇文章主要介绍了Nuxt.js实战和配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue项目中使用rimraf dev启动时删除dist目录方式

    vue项目中使用rimraf dev启动时删除dist目录方式

    这篇文章主要介绍了vue项目中使用rimraf dev启动时删除dist目录方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Element Dropdown下拉菜单的使用方法

    Element Dropdown下拉菜单的使用方法

    这篇文章主要介绍了Element Dropdown下拉菜单的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue中v-bind与v-model的区别举例详解

    vue中v-bind与v-model的区别举例详解

    这篇文章主要给大家介绍了关于vue中v-bind与v-model区别的相关资料,v-model和v-bind是Vue.js框架中的两个常用指令,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue封装自定义分页器组件与使用方法分享

    vue封装自定义分页器组件与使用方法分享

    这篇文章主要给大家介绍了关于vue封装自定义分页器组件与使用方法的相关资料,非常的好用,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • Vue中router-view和component :is的区别解析

    Vue中router-view和component :is的区别解析

    这篇文章主要介绍了Vue中router-view和component :is的区别解析,router-view用法直接填写跳转路由,路由组件会渲染<router-view></router-view>标签,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • vue获取验证码倒计时组件

    vue获取验证码倒计时组件

    这篇文章主要为大家详细介绍了vue获取验证码倒计时组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • element-ui下拉输入框+resetFields无法回显的问题解决

    element-ui下拉输入框+resetFields无法回显的问题解决

    本文主要介绍了在使用Element UI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的可以了解一下
    2025-01-01
  • vue3+TS reactive设定类型方式

    vue3+TS reactive设定类型方式

    这篇文章主要介绍了vue3+TS reactive设定类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue中的v-model 和 :value 深度解析

    Vue中的v-model 和 :value 深度解析

    本文详细解析了Vue中的v-model和:value两种绑定方式的区别、使用场景以及最佳实践,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,感兴趣的朋友一起看看吧
    2026-01-01

最新评论