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

最新推荐文章于 2022-10-12 21:05:13 发布
最新推荐文章于 2022-10-12 21:05:13 发布
阅读量392 收藏
点赞数
文章标签： vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71814235/article/details/127091364
版权
本文介绍了如何在Vue-cli项目中安装和使用Bootstrap框架及jQuery。首先通过npm安装两者，然后在public/index.html引入jQuery，并确保其能正常工作。接着在main.js中导入Bootstrap的CSS和JS文件，以便在项目中应用Bootstrap样式和功能。
摘要由CSDN通过智能技术生成

1、先在项目中安装bootstrap和jquery

npm i jquery bootstrap@3 -S

i是install的简写

安装完毕后，在 package.json文件下查看

2.在public目录的index.html文件中直接引入jquery

你需要事先，把你下载到当前项目中的jquery，复制，拿到public目录中

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

测试：

到组件中，测试，jquery到底能不能正常使用？

cartTotal.vue组件中：

<template>
    <div class="footer">
最低0.47元/天 解锁文章
正在修炼web的小芮
关注
在新版本vue cli中引入bootstrap
Cinderella2333的博客
01-08 455
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框架
qq_39784865的博客
06-07 4065
一、在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
在Vue项目里正确地引用jQuery插件
热门推荐
HeliumLau的博客
04-20 3万+
正文1.安装jquery依赖npm install jquery --save2.修改两处配置文件module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], a
在 Vue脚手架中 使用 bootstrap框架
m0_45043105的博客
11-22 1508
基本介绍： 都知道，bootstrap框架基于jQuery，因此，想使用bootstrap框架，就得先引入jQuery。 第一步，引入jQuery。 在项目的根目录下，使用命令： npm install jquery -S 打开项目下的文件夹build中的webpack.base.conf.js文件，在文件开头添加以下代码： var webpack = require('webpack') 然...
VUE脚手架引入jQuery和Bootstrap
专注 专业 专心
09-03 581
引入jQuery 1、用webstorm打开项目后，点击下方的Terminal，出现下面的界面： 在里面输入： npm install jquery --save -dev 安装最新版的jQuery。 出现： 说明jQuery已经安装成功。 2、安装成功后，点击：build ->webpack.base.conf.js进行配置。 （1）在function resolve (dir){…...
nodejs 在vue-cli脚手架项目中使用bootstrap框架
最新发布
qq_64981698的博客
10-12 497
nodejs 在vue-cli脚手架项目中使用bootstrap框架
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
11-27
本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细...
详解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+webpack在生成的项目中使用bootstrap实例代码
12-12
在html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。 那么在一个用vue-vli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下。 脚手架生成项目 执行命令用webpack...
springboot bootstrap vue 前后端管理脚手架
11-28
基于springboot bootstrap mybatis,vue ,mysql 前后端管理脚手架，已有菜单管理，权限管理，角色管理，用户管理，字典管理，文件管理,任务管理,websocket通信。
vue-cli如何引入bootstrap工具的方法
01-21
本文介绍了vue-cli如何引入bootstrap工具的方法，分享给大家，也给自己留个笔记。 以下操作以正常安装node环境为前提。 1.引入jq： 在npm控制台中，进入项目目录，然后输入指令npm install jquery –save-dev（npm换成cnpm更好，国内环境下使用cnpm下载速度更快）。 2.修改build目录下的webpack.base.conf.js配置文件：   1）加入webpack对象：var webpack=require(‘webpack’);   2）在module.exports里面加入以下配置： plugins: [ 　　　　new webp
jquery.plugin:jQuery插件脚手架，有助于快速开发jQuery插件
05-20
jquery.plugin 版本1.0.0 概括 一个jQuery插件脚手架，可帮助快速开发jQuery插件。 这是我用来开始编写新jQuery插件的jQuery插件脚手架。 特征 简单的目录结构 周到的插件支架 基于Grunt的文件观看/缩小 配置测试页以便于开发 作者 Wil Neeley（ / ） 入门 将仓库克隆到目标项目目录中，然后将所有文件复制到项目目录中。 将jquery.plugin.js重命名为项目的名称以及该文件中的project_name变量。 更改package.json ， gruntfile.js和test.html jquery.plugin引用以与您的项目名称相对应。 确保已安装npm。 从项目根目录运行npm install以安装依赖项。 从项目根目录的终端运行grunt来初始化JS文件监视程序。 开始开发！ 变更日志 版本1.0.0
Vue：在vue-cli中使用Bootstrap
weixin_30594001的博客
01-15 875
一、安装jQuery Bootstrap需要依赖jQuery，所以引用Bootstrap之前要先引用jQuery，使用下面的命令引用jQuery： npm install jquery --save 注意：如果想查看npm上jquery有哪些版本，可以执行命令： npm view jquery versions 二、引入Bootstrap 1、使用命令安装 可以...
vue-cli快速构建项目以及引入bootstrap、jq
qq_41727900的博客
04-08 315
    vue-cli快速构建项目以及引入boostrap、jq各种插件配置vue-cli脚手架工具快速构建项目架构：。。首先默认了有已经安装了node。。。     npm install -g vue-cli                   全局安装vue-cli     vue init webpack cnm                  生成项目名为cnm的的项目模板，cnm自定...
Vuecli 如何使用Bootstrap（三步教程）
m0_63498341的博客
11-30 1322
(bootstrap是基于jQuery的，在使用之前我们先安装一下jQuery包) 1、第一步命令行在当前项目下npm下载 下载jquery npm install jquery@1.11.3 --save-dev 下载bootstrap npm install bootstrap@3.3.0 --save-dev 2、第二步配置jquery (在build/webpack.base.conf.js文件中） 将这段代码放在文件开头：const webpack = require('webp
Vue cli3 中引入 bootstrap
qq_58640495的博客
12-04 992
下载安装 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/
Bootstrap（一）脚手架
踟蹰千年的博客
10-19 944
bootstrap脚手架 必须使用HTML5文档类型 Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。 使用前需要引入相关css js 以及jquery &lt;link href="../css/bootstrap.css" rel="stylesheet"/&gt; &lt;script...
在vue-cli项目中使用bootstrap的方法示例
weixin_30565327的博客
03-21 313
在一个html页面中加入bootstrap是很方便，就是一般的将css和js文件通过Link和Script标签就行。 那么在一个用vue-cli生成的前端项目中如何加入？因为框架不一样了，略微要适应一下。 安装插件： npm install jquery --save npm install bootstrap --save npm install popper.js --save ...
Vue-cli中详述jQuery、Bootstrap及Sass/Less CSS集成教程
本文主要讲解如何在Vue CLI项目中集成jQuery和Bootstrap，并使用Sass和Less进行CSS编写。首先，作者强调了由于一些教程缺乏清晰步骤，他们在引入这些库时遇到了困难，因此本文将提供详尽的指导。 一、引入Bootstrap...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值