vue中使用bootstrap框架

本是古典何须时尚 2021-12-19 01:19 825阅读 0赞

### vue中使用bootstrap框架 ###

*  基本介绍
 *   *  第一步，引入jQuery。
     *  第二步 引入bootstrap框架

# 基本介绍 #

bootstrap框架基于jQuery，要想使用bootstrap框架，就得先引入jQuery。

## 第一步，引入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”  
> \}) \],

添加后的结果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd6YWlfMTIyNQ_size_16_color_FFFFFF_t_70]  
然后在mainjs中引入jQuery

> import $ from ‘jquery’

## 第二步 引入bootstrap框架 ##

在项目的根目录下，输入命令：

> npm install bootstrap3 -S

然后在main.js文件中引入bootstrap  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd6YWlfMTIyNQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd6YWlfMTIyNQ_size_16_color_FFFFFF_t_70]: /images/20211219/5685e7aba9ef44329cc1fed4a85ffb47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd6YWlfMTIyNQ_size_16_color_FFFFFF_t_70 1]: /images/20211219/5654b19d760f467e917a5d868445b558.png

发表评论取消回复

表情：

评论列表（有 0 条评论，825人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap框架

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

àì夳堔傛蜴生んèń/ 2024年04月05日 05:43/ 0 赞/ 61 阅读

相关 vue引用BootStrap以及引用bootStrap-vue.js

1.先引入jquery 1.先使用指令: > npm install jquery --save-dev 2.在webpack.base.conf.js（

淩亂°似流年/ 2023年10月18日 15:09/ 0 赞/ 136 阅读

相关 Bootstrap前端框架

Bootstrap 前端小白，关于前端的都学学，有砖轻拍~ > Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是一个基于 HT

青旅半醒/ 2022年06月13日 14:21/ 0 赞/ 295 阅读

相关 vue中引入bootstrap

前面发了几篇关于vue引入第三方插件的，自己也练习很多，没想到今天引入bootstrap的时候又犯了低级错误。引入bootstrap步骤也很简单，首先需要修改bu

ゞ浴缸里的玫瑰/ 2022年06月12日 00:17/ 0 赞/ 305 阅读

相关 Bootstrap框架介绍

BootStrap框架介绍什么是相应式页面or自适应页面？ 1.Bootstrap使用方法

雨点打透心脏的1/2处/ 2022年05月18日 09:35/ 0 赞/ 232 阅读

相关如何使用bootstrap框架

使用bootstrap框架第一步就是引入bootstarp的两个必要的文件，一个是CSS文件，而另一个就是JS文件，bootstrap里面的组件和样式都是基于这两个文件才生

r囧r小猫/ 2022年05月03日 14:58/ 0 赞/ 173 阅读

相关 vue项目中使用swiper框架

第一步：安装swiper 在项目目录下打开命令窗口输入命令:npm install swiper 第二步：引入js文件 ![在这里插入图片描述][watermark_

超、凢脫俗/ 2022年02月13日 09:49/ 0 赞/ 266 阅读

相关 vue中使用bootstrap框架

vue中使用bootstrap框架基本介绍第一步，引入jQuery。第二步引入bootstrap框架基本介绍 boots

本是古典何须时尚/ 2021年12月19日 01:19/ 0 赞/ 826 阅读

相关 eclipse中使用bootstrap

1.先在WebContent中导入以下三个文件（自行去官网下载：[bootstrap][] ，[jQuery][]） ![2019061210223233.png][] 2

喜欢ヅ旅行/ 2021年09月20日 01:04/ 0 赞/ 359 阅读

相关 vue项目中引入Bootstrap,Jquery

转载于 [https://blog.csdn.net/Take\_up/article/details/77711848][https_blog.csdn.net_Take_

Love The Way You Lie/ 2021年09月17日 21:16/ 0 赞/ 558 阅读