在Vue-cli项目中引入Bootstrap

最新推荐文章于 2022-03-19 13:42:20 发布

转载最新推荐文章于 2022-03-19 13:42:20 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/DM428/p/7258967.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何从Bootstrap官网下载并解压所需文件至项目文件夹，包括如何在main.js中引入bootstrap.min.css及bootstrap.min.js，并指出需先安装jQuery以确保Bootstrap正常运行。

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

（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.min'

引入bootstrap，引入完成之后，就可以在组件中使用bootstrap了。

另外需要注意的是bootstrap依赖于jQuery，需要先安装引入jQuery。

转载于:https://www.cnblogs.com/DM428/p/7258967.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33778778

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在新版本vue cli中引入bootstrap

Cinderella2333的博客

01-08

508

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引入jQuery和bootstrap

vera_LX

04-19

934

首先项目是vue-cli搭建的第一种方法：一、引入jQuery1、cnpm install jquery --save-dev ，先安装jquery2、打开bulid目录下的webpack.base.conf.js// 在开头引入webpack，后面的plugins那里需要 var webpack = require('webpack')在文件最后加上plugins: [ new webp...

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

vue-cli项目中引入bootstrap

qq_43738982的博客

03-15

324

首先，要在终端打开项目文件，并开始下载最新版本的bootstrap npm install bootstrap --save --save-exact –save是将下载的bootstrap包添加到package.json文件中 –save-exact是描述出完整的包版本号然后在main.js中导入就可以愉快的使用bootstrap了 ...

Vue-cli引入bootstrap

Shay_Lau的博客

07-03

1960

第一步 : npm install jquery npm install bootstrap 第二步: build\webpack.base.conf.jsalias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': path.resolve(__dirname, '../src/a...

vue-cli项目引入bootstrap、jq

唯一轩

07-26

411

引入jq：输入 npm install jquery --save-dev 找到build文件夹下的webpack.base.conf.js文件打开，修改配置： var webpack=require('webpack'); 在module.exports里面加入： plugins: [ new webpack.ProvidePlugin({ $:"jquery", ...

vue-cli如何引入bootstrap工具

努力的凹凸曼的博客

03-26

1545

这一批博文是博主由博客园搬移过来的，所以时间上可能存在混乱，希望大家见谅！以下操作以正常安装node环境为前提。1.引入jq：　　在npm控制台中，进入项目目录，然后输入指令npm install jquery --save-dev（npm换成cnpm更好，国内环境下使用cnpm下载速度更快）。2.修改build目录下的webpack.base.conf.js配置文件： 1）加入webpack对...

在vue-cli项目中使用bootstrap的方法示例

12-10

在Vue CLI创建的项目中集成Bootstrap，需要遵循一系列步骤，以确保Bootstrap的样式和JavaScript功能能够在Vue组件中正常工作。以下是一个详细的指南：首先，为了使用Bootstrap，你需要安装必要的依赖。Bootstrap...

vue-cli 引入jQuery，Bootstrap，popper的方法

10-18

在使用Vue-cli创建Vue项目的过程中，引入第三方库如jQuery、Bootstrap和popper.js是一个常见的需求。这些库在Vue组件中可能有特定的用途，例如Bootstrap用于快速界面布局，jQuery用于DOM操作等。本文将介绍如何在...

详解vue-cli快速构建项目以及引入bootstrap、jq

12-12

vue-cli脚手架工具快速构建项目架构：。。首先默认了有已经安装了node。。。 npm install -g vue-cli 全局安装vue-cli vue init webpack cnm 生成项目名为cnm的的项目模板，cnm自定义 npm install 到cnm...

vue-cli如何引入bootstrap工具的方法

08-29

那么，如何在 Vue-cli 中引入 Bootstrap 工具呢？本文将详细介绍 Vue-cli 引入 Bootstrap 工具的方法。为什么需要引入 Bootstrap？ Bootstrap 是一个功能强大且流行的前端框架，提供了许多实用的 UI 组件和工具...

vue-cli中引用bootstrap

qq_41716608的博客

03-14

308

1.下载：npm install --save bootstrap@3.3.7 2.在 main.js中添加 import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'

vuejs 使用vue-cli引入bootstrap

weixin_30505225的博客

03-19

146

　　前言：对于刚刚进入vuejs的队伍中的小白来讲，很多都是模糊的，js操作dom节点的思想萦绕，还不能自由切换在二者之间。　　解决之道：想要在vue中引入bootstrap，引入的时候需要按照如下的步骤进行。 1、引入jquery2、引入bootstrap 阅读本文前，应该能够搭建环境，使用vue-cli进行项目的创建，可以参考文章：http://blog.csdn.n...

Vue：在vue-cli中使用Bootstrap

weixin_30594001的博客

01-15

917

一、安装jQuery Bootstrap需要依赖jQuery，所以引用Bootstrap之前要先引用jQuery，使用下面的命令引用jQuery： npm install jquery --save 注意：如果想查看npm上jquery有哪些版本，可以执行命令： npm view jquery versions 二、引入Bootstrap 1、使用命令安装可以...

在vue-cli项目中引入jQuery和bootstrap

xuefeng11111的博客

05-06

1691

最近想用vue+jquery+bootstrap做一个项目，刚开始不知道怎么引入jQuery和bootstrap，弄了小半天，终于弄好了，特此记载一下过程 1、首先，安装jQuery npm install jquery --save 2、然后在build/webpack.base.config.js中添加以下代码 ...

vue cli 引入安装bootstrap插件

s_y_f_的博客

05-28

567

安装cli详细步骤请看之前文章呦安装bootstrap必装插件安装bootstrap必须要先安装jQuery 安装jQuery的方法在npm窗口中输入指令: npm install jquery --save-dev 安装完成以后开始安装bootstrap 指令:npm install bootstrap -D 可选插件 bootstarp依赖插件(看需求是否安装)指令:popper.js:npm install popper.js -D ..

在vue-cli脚手架项目中使用bootstrap框架

qq_39784865的博客

06-07

4164

一、在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

vuecli@3如何引入bootstrap

m0_63498341的博客

03-19

797

1、首先第一步npm下载(使用bootstrap需要借助jquery) cnpm i jquery cnpm i bootsrtrap 2、在package.json同级创建vue.config.js文件 /* *Vue-CLI项目的核心配置文件 */ const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.Pr

Vue cli3 中引入 bootstrap

qq_58640495的博客

12-04

1038

下载安装 npm install bootstrap --save-dev npm install jquery --save-dev npm install popper.js --save-dev 引入在 mian.js 页面，写以下代码 // 引入jQuery、bootstrap import jquery from 'jquery' // 引入bootstrap样式 import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/

vue-cli项目中单文件组件引入bootstrap.js异常的解决方案

weixin_30568715的博客

03-31

189

0.修改webpack.base.conf.js 1 var webpack = require ("webpack") //add 2 3 //... 4 5 module.exports = { 6 resolve: { 7 extensions: ['.js', '.vue', '.json'], 8 alias: { ...

vue-cli 引入bootstrap

08-15

在Vue项目中使用Vue CLI来引入Bootstrap，可以按照以下步骤进行： 1. 首先，确保你已经安装了Vue CLI。如果没有安装，可以使用下面的命令进行安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目。在...