vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3安装使用bootstrap

在vue3中安装使用bootstrap过程

作者:小杨闯关之情迷代码

这篇文章主要介绍了在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>

在这里插入图片描述

成功使用!

总结

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

您可能感兴趣的文章:
阅读全文