VUE—引入bootstrap（图文详情）

最新推荐文章于 2024-08-20 18:28:02 发布
最新推荐文章于 2024-08-20 18:28:02 发布
阅读量3.2k 收藏 5
点赞数 1
分类专栏： VUE 文章标签： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Poppy_LYT/article/details/97621814
版权
本文详细介绍了如何在Vue项目中引入Bootstrap。首先在src/assets/css和js目录下添加bootstrap.css、bootstrap.js及fonts文件，然后在main.js中进行配置。接着创建Nav组件并从Bootstrap官网复制组件代码到Nav.vue，注意所有代码需包含在一个div内。最后在App.vue中使用新组件，运行项目，成功的话将看到Bootstrap导航组件显示在页面上。
摘要由CSDN通过智能技术生成

VUE—引入bootstrap

第一步：在src—assets—新建css和js文件夹，并引入bootstrap.css和bootstrap.js以及bootstrap的fonts文件，不然会报错
在这里插入图片描述
若没有请先行下载哟～
bootstrap.js(百度网盘)
bootstrap.css(百度网盘）
fonts（百度网盘）

第二步：在main.js中输入

import './assets/css/bootstrap.css'
import './assets/js/bootstrap.js'

在这里插入图片描述

第三步：测试是否引入成功
1、在component

最低0.47元/天 解锁文章
Poppy_LYT
关注
专栏目录
【前端之旅】响应式布局及Bootstrap框架
孙不坚1208
10-28 557
一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Ajax、Axios、Bootstrap、Node.js、Vue、小程序开发（Uniapp）以及各种UI组件库、前端框架的学习。
vue项目中引入bootstrap的方法
mm744的博客
02-09 4308
vue项目中引入bootstrap？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 相关教程推荐：《bootstrap教程》 在 vue 项目中引入 bootstrap，首先要引入两个依赖：jQuery 和 popper 第一步、安装 1、npm安装 安装命令如下： 1 2 3 cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --sav
vue引入bootstrap——webpack
热门推荐
archer的技术故事
08-29 5万+
vue引入bootstrap——webpack 想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstrap 阅读本文前，应该能够搭建环境，使用vue-cli进行项目的创建，可以参考文章： http://blog.csdn.net/wild46cat/article/details/76360229 好，
在 Vue.js 项目中使用 Bootstrap
最新发布
qq_45687669的博客
08-20 674
以上三种方法都可以在 Vue 项目中使用 Bootstrap，根据你的需求选择最适合的方法。直接引入 Bootstrap CSS 文件适合简单的项目，使用 BootstrapVue 库可以更方便地使用 Bootstrap 组件，而使用 Bootstrap 模板或主题可以快速应用特定的设计风格。
vue中引入bootstrap
Lingoic的博客
12-21 625
【代码】vue中引入bootstrap。
Vue——引进bootstrap
qq_45997679的博客
08-30 108
引进jQuery。 <1>安装指令： npm install jquery --save-dev <2>在build目录下的webpack.base.conf.js中,在module.exports中找到resolve，在其alias项中添加： 'jquery':'jquery', <3>在module.exports中找到plugins，并添加以下代码 // 增加一个plugins plugins: [ new webpack.optimize.Co.
vue引入bootstrap
遥山的博客
07-18 661
要在index.html中引入 //引入css &lt;link rel="stylesheet" href="./static/bootstrap.css"&gt; &lt;link rel="stylesheet" href="./static/index.css"&gt; //引入js &lt;script type="text/
bootstrapvue中使用swiper图片轮播
qq_50031016的博客
04-25 1084
boottstrapvue中要用图片轮播 前言 尝试过js的走马灯和无缝滚动，这两个只适应电脑端，尝试着修改bootstrapvue中自带的图片轮播，但是出来的是三张三张的一起轮播，这个要证都是三的倍数 一、vue中引入swiper？ 在终端执行： npm install --save swiper npm install --save vue-awesome-swiper 二、使用步骤 1.引入库 在main.js中全局引入 代码如下（示例）： //swiper版本6.0以上使用，我使用的是swiper6
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
11-27
本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细...
VUE—安装并使用jquery（图文详解）
Poppy_LYT的博客
07-29 1079
VUE—安装并使用jquery 第一步： 终止运行项目 点击图片标记处即可关闭 第二步：右键package.json–Open In Terminal 第三步：输入指令cnpm install jquery --save-dev 注意：mac需要在前面加上sudo并输入密码 出现图片所示内容即下载成功 第四步：修改build文件夹中webpack.base.conf.js的内容，双击打开即可...
用Vue2实现的Bootstrap3组件
08-09
用Vue2实现的Bootstrap3组件
bootstrap+vue开发微信公众号界面
12-29
采用bootstrap开发的一组微信公众号界面，采用VUE动态绑定数据。界面美观，并且可以兼容各种版本。
vue中引入Bootstrap
zhu_zhu_xia的博客
09-22 508
一、引入jquery 步骤： 1. 安装jquery $ npm install jquery --save-dev 2.在webpack.config.js 添加内容 const webpack = require("webpack"); module.exports = { entry: './index.js', output: { path: path.join(__dirname, './dist'), publicPath.
vue项目中 引入bootstrap
weixin_45027310的博客
04-23 787
网上查了好多文章，一个简单的引入boostrap都一直出错，试了无数遍之后终于好了。 1.下载包 cd 到项目下 下载bootstrap包和jquery包 cnpm install bootstrap --save-dev cnpm install jquery --save-dev 下载成功 项目的node_modules中会有boostrap的文件夹,可以查看boo...
Vue导入bootstrap
Miku的博客
11-05 305
1、安装插件 npm install jquery --save npm install bootstrap --save 2、在根目录中添加文件vue.config.js，然后进行如下配置（可以跳过这一步） const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery",
vue 引入bootstrap
08-15
要在Vue项目中引入Bootstrap，可以按照以下步骤进行操作： 1. 首先，使用命令行工具进入你的Vue项目目录。 2. 安装Bootstrap的npm包。在命令行中执行以下命令： ``` npm install bootstrap ``` 3. 在Vue项目的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值