vue2.x 如何引入bootstrap

最新推荐文章于 2025-05-30 14:13:03 发布

转载最新推荐文章于 2025-05-30 14:13:03 发布 · 826 阅读

vue 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用cnpm来安装Bootstrap和jQuery，并在项目中正确配置和使用它们。首先，通过cnpm安装所需的Bootstrap和jQuery包；其次，在webpack配置文件中加入jQuery的全局引用；最后，在main.js中导入Bootstrap，确保项目可以正常使用这两个库。

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

1.通过cnpm安装bootstrap和jquery

cnpm install bootstrap jquery --save

2.要使用bootstrap必须先引入jQuery

找到build文件夹下的webpack.prod.conf.js文件打开，新增配置：

plugins: [
    new webpack.ProvidePlugin({  
        $: "jquery",  
        jQuery: "jquery",  
        "windows.jQuery": "jquery"  
    })
]

3.在main.js里导入Bootstrap

import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CatEatApple

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue实现分页功能(BootStrap5.x + vue2.x)

ravi's blog

09-30

1488

0.前置知识 SpringBoot基础 Vue2.x 尚硅谷Vue视频前三十集内容 BootStrap会看文档，懂点英文 1.需求实现注意第一页的前一页功能为disabled 同理第四页的后一页功能为disabled 中间页 2.后端接口假如我们拥有这样一个接口： @GetMapping("patients/{pageNum}/{pageSize}") public R getPatientsList(@PathVariable String pageNum, @P

用Vue2实现的Bootstrap3组件

08-09

用Vue2实现的Bootstrap3组件

1 条评论您还未登录，请先登录后发表或查看评论

Vue2引入BootstrapVue

豪先生的博客

04-12

3619

Bootstrap官网:Bootstrap中文网 (bootcss.com) BootstrapVue官网:BootstrapVue-基于VueJS的Bootstrap框架 · 全球最流行的 HTML、CSS 和 JS 工具库。 (z01.com) 1、安装(vuecli3安装BootstrapVue) npm install bootstrap-vue 2、引入 (1)在main.js里面添加下面代码 import BootstrapVue from 'bootstrap-vue' i..

Vue2与Bootstrap构建的购物后台管理系统实战

最新发布

weixin_36149538的博客

05-30

973

Vue.js是一个渐进式的JavaScript框架，旨在通过尽可能简单的API实现响应式数据绑定和组合的视图组件。它被设计为可以自底向上增量开发的应用程序，通过组件的组合使得应用程序可以迅速迭代和模块化。Bootstrap是一款流行的前端框架，它由Twitter开发，目的是为了提升网页的开发效率和维护性。Bootstrap的设计哲学是响应式、移动优先，这意味着它能够在不同屏幕尺寸的设备上提供一致的用户体验。

Vue2项目中的Bootstrap如何使用

2301_80224944的博客

07-09

1084

vue2项目中Bootstrap使用方法

vue2项目中使用 bootstrap

没有从今天开始

03-10

3322

vue2项目中使用 bootstrap 1.安装相关依赖这里我使用的是bootstrap 3，默认安装最新版 #使用cnpm或者yarn也行 npm i bootstrap@3 -S npm i jquery -S npm i popper.js -S 2.注册在main.js中注册，复制下面这段代码即可 // 引入jQuery、bootstrap import $ from 'jquery' import 'bootstrap' // 引入bootstrap样式 import 'bootstra

vue2中如何引入bootstrap

weixin_44747173的博客

07-26

708

vue中如何引入bootstrap

Vue 2.x用Bootstrap风格的模态组件介绍

资源摘要信息:"vue2-bootstrap-modal是一个为Vue.js框架的2.x版本设计的模态组件，该组件以Bootstrap风格为主题。用户可以利用这个组件创建模态对话框，来提升用户界面的交互体验。该组件的更新版本不再包含...

基于Java和Vue2.x的Spring Boot快速开发平台设计源码

05-27

该平台的设计目标是开发迅速、学习简单、轻量级、易扩展，并使用了Spring Boot、Shiro、MyBatis、Redis、Bootstrap、Vue2.x等框架。平台包含功能如用户列表、角色管理、菜单管理、定时任务、参数管理、代码生成器、...

vue-pagination-bootstrap-具有基于Bootstrap的模板的Vue.js（1.x和2.x）服务器端分页组件-Vue.js开发

05-27

vue-pagination-bootstrap vue中的服务器端分页组件，基于引导Vue.js的模板（已通过2.x测试）Bootstrap CSS（已进行4.x测试）ins vue-pagination-bootstrap vue中的服务器端分页组件，基于引导Vue.js的模板（已通过2...

利用纯Vue.js构建Bootstrap组件

10-21

对于Bootstrap的CSS，则需要3.x.x版本，文章中使用的是3.3.5版本进行测试。开发者通过npm或bower安装VueStrap后，可以直接在Vue实例中注册VueStrap组件，并在模板中使用。例如，要使用VueStrap的alert组件，开发者...

VUE项目导入bootstrap

LizequaNNN的博客

07-10

2056

进来踩坑吧

Vue 2.x的Bootstrap模式组件

cuk5340的博客

07-25

402

vue2-bootstrap-modal (vue2-bootstrap-modal) Bootstrap Modal Component for Vue 2.x. Vue 2.x的Bootstrap模式组件。 Updated package to exclude bootstrap css and js, you need to install bootstrap-loader. 更新了...

vue2.0引用bootstrap

liyang_nash的专栏

07-12

1047

1. 安装依赖cnpm i bootstrap --save2.配置依赖在package.json中添加"bootstrap": "^4.1.1",3. 在main.js用引用依赖import 'bootstrap/dist/css/bootstrap.css'

vue(二)、vue引入bootstrap

qq_34300892的博客

10-26

650

注:想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstrap 1、引入 jquery npm install jquery --save-dev 2、修改 webpack.base.conf.js 添加： var webpack = require('webpack') plugins: [ new webpack.Pro...

vue2.0+bootstrap实战（一）

weixin_34185364的博客

01-09

2360

俗话说，纸上学来终觉浅，绝知此事要躬行，最近两天学习了下Vue2.0,想做个项目练下手，顺便写个文章方便复习回顾~ 1.使用cue-cli创建vue项目进入指定目录，右击Git Bash Here打开git命令行，vue init webpack 项目名称，创建基于webpack的vue项目根据命令行的提示，选择是否安装vue-ro...

vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

weixin_33753003的博客

12-06

213

要使用vue-cli脚手架搭建项目，首先需要安装node.js Node.js官网：https://nodejs.org/en/download/ 选择你对应的系统即可下载，下载完成后傻瓜式安装即可。安装完成之后打开cmd，输入node -v 出现版本号即安装成功接下来便可使用脚手架快速构建你的项目了： npm install -g vue-cli ...

vue-cli2中引入Bootstrap和jQuery

得意小门生的博客

08-20

504

引入jQuery 1、引入jquery npm install jquery --save-dev 2、在项目根目录下的build目录下找到 webpack.base.conf.js 文件，在开头使用以下代码: const webpack = require('webpack') 然后在module.exports中添加一段代码： plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery",