vue cli 引入安装bootstrap插件

最新推荐文章于 2024-08-20 11:29:48 发布
最新推荐文章于 2024-08-20 11:29:48 发布
阅读量492 收藏
点赞数
分类专栏： vue.js vue cli bootstrap 文章标签： bootstrap jquery vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_y_f_/article/details/117336656
版权
本文介绍了在Vue CLI项目中如何安装和配置Bootstrap，包括必须安装jQuery，然后通过npm安装Bootstrap和可选的popper.js及zico插件。在安装完成后，需要在vue.config.js和src/main.js中进行相应的配置。
摘要由CSDN通过智能技术生成

安装cli详细步骤请看之前文章呦

  

安装bootstrap必装插件

  1. 安装bootstrap必须要先安装jQuery
  2. 安装jQuery的方法在npm窗口中输入指令: npm install jquery --save-dev
  3. 安装完成以后开始安装bootstrap 指令:npm install bootstrap -D

可选插件

  1. bootstarp依赖插件(看需求是否安装)指令:popper.js:npm install popper.js -D
  2. 可以安装zico这个插件与bootstrap搭配使用(看个人需求是否安装)指令:npm install zico -D

. 安装完成以后配置插件

在vue.config中修改

const webpack = require("webpack");
 
      module.exports={
最低0.47元/天 解锁文章
地中海真帅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue安装/使用boostrap-vue 插件
阿威的博客
07-15 230
1安装 详细可看boostrap-vue官网 npm install boostrap-vue --save 2main.js引用boostrap-vue import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' //我这里是按需引用 import { BootstrapVue,Button } from 'bootstrap-vue' Vue.use( BootstrapVue,Bu
在Vue-cli项目中引入Bootstrap
weixin_33778778的博客
07-30 158
（1）到bootstrap官网下载所需版本的bootstrap.zip文件。 （2）将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹，另外还需要将fonts字体文件夹解压到src文件夹下面。 （3）在main.js文件中通过 　　 import './assets/bootstrap.min.css' import './assets/...
BootStrap在Vue中的安装使用详细教程
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
09-05 2781
bootstrap的安装依赖jquery、需要提前安装jquery。
vue-cli添加bootstrap
qq_43510643的博客
10-26 391
vue-cli添加bootstrap 如何引入bootstrap npm install --save-dev bootstrap 在main.js中引入 import ‘bootstrap/dist/css/bootstrap.min.css’; import ‘bootstrap/dist/js/bootstrap.min.js’; 然后运行，结果按照提示让执行这样的命令 npm install --save popper.js 然后，再运行 就能成功使用bootstrap了 转载于:https://
vue安装bootstrap
employerboos的博客
10-15 993
Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说，他们依赖的是 jQuery、Popper.js 以及我们自己开发的 JavaScript 插件。所以在安装Bootstrap之前必须安装jQuery。 安装jQuery https://editor.csdn.net/md/?articleId=109090271 安装Bootstrap cnpm install bootstrap –save-dev 指定版本号 cnpm install bootstrap@3.3.
windows下vue-cli导入bootstrap样式
08-30
首先，你需要确保已经安装了Vue CLI。如果还没安装，可以通过npm（Node.js包管理器）进行安装： ``` npm install -g @vue/cli ``` 安装完成后，创建一个新的Vue CLI项目： ``` vue create my-bootstrap-...
vue-cli 引入jQuery，Bootstrap，popper的方法
10-18
在使用Vue-cli创建Vue项目的过程中，引入第三方库如jQuery、Bootstrap和popper.js是一个常见的需求。这些库在Vue组件中可能有特定的用途，例如Bootstrap用于快速界面布局，jQuery用于DOM操作等。本文将介绍如何在...
vue中如何引入jQuery和Bootstrap
10-20
对于Bootstrap的JavaScript部分，需要在webpack配置文件中设置别名，以便于引入Bootstrap源代码文件。首先，修改webpack.base.conf.js文件中的resolve属性，加入以下配置： ```javascript resolve: { extensions: ...
在vue-cli项目中使用bootstrap的方法示例
12-10
总结起来，要在Vue CLI项目中使用Bootstrap，你需要安装jQuery、Bootstrap和Popper.js，配置Webpack的`ProvidePlugin`，并在`main.js`中导入这些库。之后，你就可以在Vue组件中利用Bootstrap的样式和组件来构建用户...
vue-cli-plugin-bootstrap-vue：vue-cli 3插件以添加bootstrap-vue
01-30
vue-cli-plugin-bootstrap-vue 适用于Bootstrap-Vue插件 安装 如果尚未安装vue-cli，请先按照此处的安装说明进行操作： : 使用vue-cli生成项目 vue create my-app 在安装bootstrap-vue插件之前，请确保提交或隐藏所做的更改，以防您需要还原 要安装bootstrap-vue插件... cd my-app vue add bootstrap-vue
vue 引入 bootstrap(二)
weixin_39975379的博客
02-27 2152
这篇文章直接写不借助任何的工具直接安装bootstrap。 Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。 vue 引入jquery的方法请点击这里vue 引入jquery的步骤 进入正文，步骤写起来 第一步：安装bootstrap 命令行工具，进入项目文件夹，执行：  npm install boo...
在新版本vue cli中引入bootstrap
Cinderella2333的博客
01-08 452
1.安装jQuery bootstrap是基于jQuery的，因此我们要先安装一下jQuery包 cnpm install jquery -S 手动新建vue.config.js文件，注意要和package.json文件同级，在新建的vue.config.js文件中添加以下代码 /* *Vue-CLI项目的核心配置文件 */ const webpack = require("webpa...
vue-cli下bootstrap配置
听闻青春丶
09-15 635
vue-cli安装bootstrap 网址：http://blog.csdn.net/ansu2009/article/details/53305134 总结： 1、下载Bootstrap文件包，然后把css、js、fonts三个文件夹复制到vue项目的src\assets目录下 2、 cnpm install jquery --save-dev cnpm install style-
vue-cli如何引入bootstrap工具
努力的凹凸曼的博客
03-26 1498
这一批博文是博主由博客园搬移过来的，所以时间上可能存在混乱，希望大家见谅！以下操作以正常安装node环境为前提。1.引入jq：　　在npm控制台中，进入项目目录，然后输入指令npm install jquery --save-dev（npm换成cnpm更好，国内环境下使用cnpm下载速度更快）。2.修改build目录下的webpack.base.conf.js配置文件：  1）加入webpack对...
在vue-cli脚手架项目中使用bootstrap框架
qq_39784865的博客
06-07 4050
一、在vue-cli脚手架项目中使用bootstrap3框架的步骤 1、先在项目中安装bootstrap和jquery npm i jquery bootstrap@3 -S 2、在main.js中引入bootstrap import 'bootstrap/dist/js/bootstrap.js' import 'bootstrap/dist/css/bootstrap.css' 3、在项目的根目录新建一个配置文件vue.config.js,输入以下代码 const webpack = requir
windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
huang100qi的专栏
03-24 890
http://blog.csdn.net/ansu2009/article/details/53305134
vue-cli快速构建项目以及引入bootstrap、jq
热门推荐
知识库
04-03 4万+
vue-cli快速构建项目以及引入boostrap、jq各种插件配置；
在vue-cli中使用Bootstrap-Vue
qq_41200374的博客
05-20 637
1、安装bootstrap-vue、bootstrap @4.x版本 npm install bootstrap-vue npm install bootstrap@4.6.0 --save --save-exact 2、main.js中引入 //此处省略引入vue import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' import { BootstrapVue, IconsPlugi
avue-crud 自定义搜索项 插槽
最新发布
qq_31683775的博客
08-20 326
加上 -search 就可以自定义查询项了。
vue-cli 引入bootstrap
08-15
在Vue项目中使用Vue CLI来引入Bootstrap，可以按照以下步骤进行： 1. 首先，确保你已经安装了Vue CLI。如果没有安装，可以使用下面的命令进行安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目。在命令行中执行以下命令： ``` vue create my-project ``` 这里的`my-project`是你想要创建的项目名称，可以根据实际情况进行修改。 3. 进入到项目目录。在命令行中执行以下命令： ``` cd my-project ``` 4. 安装Bootstrap的npm包。在命令行中执行以下命令： ``` npm install bootstrap ``` 5. 在Vue项目中引入Bootstrap的样式和脚本。打开`src/main.js`文件，在文件的顶部添加以下代码： ```javascript import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.js' ``` 6. 在Vue组件中使用Bootstrap的样式和组件即可。 现在，你已经成功地将Bootstrap引入到Vue项目中了，并可以在Vue组件中使用Bootstrap提供的样式和组件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值