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了

如何引入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了

vue-cli3项目中引入jquery 以及如何引进bootstrap的更多相关文章

  1. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  2. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  3. vue-cli3.0以上项目中引入jquery的方法

    这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...

  4. web项目中引入jquery easyui

    jQuery easyui是一个基于jquery的用户界面插件集合,可以做出各种炫酷页面效果,大中型项目都可以使用些框架,非常好用,而且它有中文网,提供了大量的demo.下面我们看怎么将它引入到项目中 ...

  5. Angular项目中引入jQuery

    npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...

  6. vue cli3项目中使用qrcodejs2生成二维码

    组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...

  7. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  8. vue系列---vue项目(已安装vuex)中引入jquery

    vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...

  9. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

随机推荐

  1. Boot-crm管理系统开发教程(总结)

    这个Boot-crm管理系统我花了大概两周写完,因为是刚学完SSM框架,所以立马开始了这个项目,项目初期,运行书本上给的前端代码都报了许多错误,导致这个原因是因为书本给的 设计说明文档 没有看清楚.然 ...

  2. 并不对劲的复健训练-bzoj5301:loj2534:p4462 [CQOI2018]异或序列

    题目大意 给出一个序列\(a_1,...,a_n\)(\(a,n\leq 10^5\)),一个数\(k\)(\(k\leq 10^5\)),\(m\)(\(m\leq10^5\))次询问,每次询问给\ ...

  3. Kafka网络模型

    摘要:很多人喜欢把RocketMQ与Kafka做对比,其实这两款消息队列的网络通信层还是比较相似的,本文就为大家简要地介绍下Kafka的NIO网络通信模型,通过对Kafka源码的分析来简述其React ...

  4. vs2013nuget版本更新

    记录记录. NuGet 程序包还原失败: “Newtonsoft.Json 12.0.1”程序包需要 NuGet 客户端版本“2.12”或更高版本,但当前的 NuGet 版本为“2.7.40911.2 ...

  5. 异常-Throwable的几个常见方法

    package cn.itcast_04; import java.text.ParseException; import java.text.SimpleDateFormat; import jav ...

  6. C++ STL用法总结(持续更新)

    Vector 动态数组 https://www.cnblogs.com/zhonghuasong/p/5975979.html lower_bound&&upper_bound htt ...

  7. Oracle连接字符串总结(转)

    Oracle XE 标准连接 Oracle XE(或者"Oracle Database 10g Express Edition")是一个简单免费发布的版本. 以下是语法格式: Dr ...

  8. opencv 一些函数的耗时计算

    Release 模式 -------------------------------------------------- smooth gaussian : 2 cvtColor CV_BGR2La ...

  9. Linux之用户相关操作

    1. 创建用户 useradd -m wolf #即创建一个用户并且创建同名的家目录 2. 设置密码 passwd wolf

  10. Shiro学习笔记总结,附加" 身份认证 "源码案例(一)

    Shiro学习笔记总结 内容介绍: 一.Shiro介绍 二.subject认证主体 三.身份认证流程 四.Realm & JDBC reaml介绍 五.Shiro.ini配置介绍 六.源码案例 ...