在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 路由组件向app.vue主文件传值的方式(两种常见方式)

    Vue 路由组件向app.vue主文件传值的方式(两种常见方式)

    在Vue.js中,可以使用路由传参的方式向App.vue主页面传递数据,有多种方法可以实现这一目标,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • VUE实现可随意拖动的弹窗组件

    VUE实现可随意拖动的弹窗组件

    今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue.set与this.$set的用法与使用场景介绍

    Vue.set与this.$set的用法与使用场景介绍

    Vue.set()和this.$set()这两个api的实现原理基本一模一样,都是使用了set函数,下面这篇文章主要给大家介绍了关于Vue.set与this.$set的用法与使用场景,需要的朋友可以参考下
    2022-03-03
  • Vue源码分析之虚拟DOM详解

    Vue源码分析之虚拟DOM详解

    所谓虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,若一次操作中有 10 次更新 这篇文章主要给大家介绍了关于Vue源码分析之虚拟DOM的相关资料,需要的朋友可以参考下
    2021-05-05
  • Vue+canvas实现水印功能

    Vue+canvas实现水印功能

    实际项目中偶尔会遇到给项目页面背景加水印的需求,这篇文章主要为大家介绍了Vue使用canvas实现水印功能的示例代码,希望对大家有所帮助
    2023-07-07
  • vue-plugin-hiprint 详细使用

    vue-plugin-hiprint 详细使用

    这篇文章主要介绍了vue-plugin-hiprint 详细使用说明,使用Vue.Draggable库构建可拖拽元素的示例,你可以根据具体需求和技术选型选择适合的库或方法来实现可拖拽元素的功能,需要的朋友可以参考下
    2023-08-08
  • vue3.0响应式函数原理详细

    vue3.0响应式函数原理详细

    这篇文章主要介绍了vue3.0响应式函数原理,Vue3的响应式系统可以监听动态添加的属性还可以监听属性的删除操作,以及数组的索引以及length属性的修改操作。另外Vue3的响应式系统还可以作为模块单独使用。下面更多介绍,需要的小伙伴可以才可以参考一下
    2022-02-02
  • vue axios请求拦截实例代码

    vue axios请求拦截实例代码

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下
    2018-03-03
  • vue+vant实现购物车全选和反选功能

    vue+vant实现购物车全选和反选功能

    这篇文章主要为大家详细介绍了vue+vant实现购物车全选和反选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • element实现合并单元格通用方法

    element实现合并单元格通用方法

    这篇文章主要介绍了element实现合并单元格通用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论