vue-cli3项目中引入jquery 以及如何引进bootstrap
1、安装jquery
npm install jquery --save
2、或则在package.json中指定版本号,然后运行npm install命令
"dependencies": {
"axios": "^0.18.0",
"core-js": "^2.6.5",
"jquery": "^3.4.1",
"vue": "^2.6.10",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
3、在vue.config.js里面配置
const webpack = require('webpack');
const path = require('path');
// vue.config.js
module.exports = {
// 选项...
devServer: {
port: 8089,
// proxy:{
// '/': {
// target: 'http://192.168.0.125:3000/',
// changeOrigin: true,
// pathRewrite: {}
// },
// }
},
configureWebpack: {//引入jquery
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
},
}
然后在页面里就可以愉快的使用jquery了
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了
vue-cli3项目中引入jquery 以及如何引进bootstrap的更多相关文章
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
- vue-cli3.0以上项目中引入jquery的方法
这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...
- web项目中引入jquery easyui
jQuery easyui是一个基于jquery的用户界面插件集合,可以做出各种炫酷页面效果,大中型项目都可以使用些框架,非常好用,而且它有中文网,提供了大量的demo.下面我们看怎么将它引入到项目中 ...
- Angular项目中引入jQuery
npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...
- vue cli3项目中使用qrcodejs2生成二维码
组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...
- 让webstorm 识别vue cli3项目中的@路径别名
在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...
- vue系列---vue项目(已安装vuex)中引入jquery
vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...
- vue-cli项目中引入第三方插件
前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...
随机推荐
- 北电之死:谁谋杀了华为的对手?——银湖资本(Silver Lake)董事总经理爱德华·詹德出任CEO,既不了解华为,也不重视中国,直截了当地否决了收购华为
作者:戴老板:微信公众号:饭统戴老板(ID: worldofboss) 2003年5月,北京SARS疫情紧张,摩托罗拉集团总裁迈克·扎菲罗夫斯基(Mike Zafirovski)却准备不走寻常路,决定 ...
- 项目实践 hrm项目的设计过程
人事管理系统的设计过程 一.数据库表和持久化类 1.1 进行需求分析,根据功能模块设计数据库表 1.2 设计持久化实体 面向对象分析,即根据系统需求提取出应用中的对象,将这些对象抽象成类,再抽 ...
- Java 代码运行顺序
1.静态代码块,只执行一次,从上到下,先父类后子类 2.父类构造代码块,从上到下,然后父类构造方法,执行次数与实例化次数相关 3.子类构造代码块,从上到下,然后子类构造方法,执行次数与实例化次数相关
- HashMap的四种遍历方式
package com.xt.map; import java.util.HashMap; import java.util.Iterator; import java.util.Map; impor ...
- 详解CSS居中布局技巧
本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...
- spring AOP的相关术语
连接点:Joinpoint 其实业务层接口的方法 切入点:Pointcut 被增强的是切入点,没被增强是永远都是连接点.连接点不一定是切入点,切入点一定是连接点 通知:Advice 就是指要增强的 ...
- 【Git的基本操作十】远程库分支操作
远程库分支操作 1. 推送分支 在本地库新建分支 git branch [新分支名] 如创建一个develop分支: git branch develop 推送分支(将新分支发布在github上) g ...
- JavaMaven【七、插件使用】
配置pom.xml 配置在那个周期的那个阶段执行该插件的功能 上图是配置了使用插件source3.0.1,该插件的功能是打包源码 并配置了在package阶段后执行打包源码的操作jar-no-fork ...
- Windows 7上QTP11破解及java等插件破解方法
QTP11破解方法: 1.准备文件 注册机mgn-mqt82.exe 2.安装QTP11 3.运行注册机mgn-mqt82.exe 如果运行mgn-mqt82.exe 没有反应-,请注意关掉暂时关掉杀 ...
- (六)buildroot使用详解
为什么要使用buildroot? (文件系统搭建,强烈建议直接用buildroot,官网[http://buildroot.uclibc.org/]上有使用教程非常详细)文件系统通常要包含很多第三方软 ...