在Vue中引入bootstrap框架_在vue3项目中引入bootstrap框架-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44232533/article/details/89601590

本文详细介绍了如何在项目中引入并使用jQuery和Bootstrap框架。首先，通过npm安装jQuery，并在webpack配置文件中进行设置，确保jQuery全局可用。接着，引入Bootstrap，实现网页的快速美化与响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本介绍：

都知道，bootstrap框架基于jQuery，因此，想要使用bootstrap框架，就得先引入jQuery...

1.第一步，引入jQuery。

npm install jQuery -s

打开项目下的文件夹build中的webpack.base.conf.js文件，在文件开头添以下代码：

var webpack = require('webpack')

然后在webpack.base.conf.js文件中，找到 module.exports={}，在其中插入以下代码：

plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],

在这里插入图片描述注意：图片的第一行require(“webpack”);

然后在main.js中，引入jQuery

import $ from 'jquery'

然后就可以在app.vue文件中验证jQuery是否安装好。

$(function(){
	alert("我是：jQuery")
})；

2.第二步，引入bootstrap框架：

npm install bootstrap -S

注意：可以引入其他版本。

然后在main.js文件中引入bootstrap：

import "bootstrap/dist/css/bootstrap.css"
import "bootstrap/dist/js/bootstrap.js"

在这里插入图片描述
好了可以愉快的使用bootstrap了…