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框架呢?等等这些问题,本篇博客将带你学习如 ...
随机推荐
- kettle处理未发现hadoop插件问题
背景:将测试环境的中kettle转换传输到生产环境上出现hadoop插件无法获取的错误 Hadoop File Output 2.0 - ERROR (version 7.1.0.0-12, buil ...
- 使用logstash从Kafka中拉取数据并传输给elasticsearch且创建相应索引的操作
注意事项:默认Kafka传递给elastci的数据是在'data'字段,且不包含其他数据,所以需要使用额外的操作进行处理 logstash配置文件操作 input { kafka { bootstra ...
- “007~ASP 0104~不允许操作”错误的解决方法(图解)
今天测试一个Z-Blog程序的上传文件时发现总提示“ 007~ASP 0104~不允许操作 ”的错误,经过度度上各位朋友的帮忙,终于找到解决方法. 这是windows2003 server对上传文件的 ...
- Ruby 参考教程
Ruby 参考教程 https://www.ruby-lang.org/zh_cn/documentation/ http://ruby-doc.org/docs/ https://ruby-chin ...
- CTF 常见操作总结
一般流程 首先看header, veiwsource, 目录扫描 有登陆, 尝试sql注入&爆破 有数据库, 必然sql注入? 普通sql注入 判断是否存在回显异常 尝试单双引号 查是字符型? ...
- js 操作对象的小技巧
来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.使用...运算符合并对象或数组中的对象 同样使用ES的...运算符可以替代人工 ...
- Spring整合Hessian的使用
该文章转赞自 https://www.cnblogs.com/ontheroad_lee/p/3797239.htm 个人感觉写的非常好,刚学习,先记录下来 1.1 Hessian简介 He ...
- Phoenix设置联合主键
1例如 create table test12(email varchar not null,id integer not null,name varchar not null,age integer ...
- Beta冲刺——星期三
这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 飞猪们 这个作业的目标 剩余任务预估,分配任务(开发,测试等).按要求提交当天冲刺报告. ...
- Django学习系列21:为每一个清单添加唯一URL
现在让我们来解决我们真正的问题,即我们的设计只允许一个全局列表. 我将演示一个关键的TDD技术:如何使用一个渐进的.循序渐进的过程来适应现有的代码,这些过程将您从工作状态转移到工作状态.测试山羊,而不 ...