vue引入JQ的方法
在vue中引入jq
用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法:
1.首先在package.json里的
dependencies加入"jquery" : "^3.2.1",

2.在终端里输入
npm install jquery --save-dev

3.找到build文件夹下的webpack.base.conf.js文件,打开,添加:
var webpack=require('webpack')

在module.exports里输入:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
],

4.在入口文件main.js中输入:
import $ from 'jquery'

5.在终端输入
npm run dev

6.验证方法 在APP.vue里进行验证 看图:


希望可以帮到你!
vue引入JQ的方法的更多相关文章
- VUE引入jq bootstrap 之终极解决方案(测试)
初入VUE遇见的一些问题,在网上找了些方法,再根据自己的实际项目解决的问题写得此文,,希望对你有所帮助. vue-cli快速构建项目以及引入boostrap.jq各种插件配置 vue-cli脚手架工具 ...
- vue里面引入jq的方法
1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改. dependenc ...
- vue引入jquery的方法
1.局部引入 通过命令下载jquery npm install jquery --save-dev 在需要引入jquery的组件中通过import $ from 'jquery'引入即可 2.全局 ...
- webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理
今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm ...
- vue的常用组件方法应用
项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...
- [转]vue跨域解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
- Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
- vue 与jq 的对比
vue.react和angular,众所周知,他们是前端框架的3个大佬.这篇主要想对比一下用vue和用jq的区别,至于和其他框架的对比,我想vue的官网说的更为详细. 我算是独自用vue写过一个小型项 ...
- vue-cli中引入jquery的方法
vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...
随机推荐
- Module 3 - Azure - Web Apps
Module 3 - 微软云 Azure - Web Apps 1. Create new Web application in the Azure Portal Azure Portal -> ...
- Azure基础(二)- 核心云服务 - Azure简介
Azure fundamentals - Core Cloud Services - Introduction to Azure Learn what Microsoft Azure is and h ...
- MATLAB多项式运算
序言 none 正文 1. 多项式的表示 在Matlab中,多项式用一个行向量表示, 行向量的元素值为多项式系数按幂次的降序排列, 如p(x)=x3-2x-5用P=[1,0,-2,-5]表示. 2. ...
- CDI services--Decorators(装饰器)
1.Decorators装饰器综述 拦截器是一种强大的方法在应用程序捕捉运行方法和解耦.拦截器可以拦截任何java类型的调用. 这使得拦截器适合解决事务管理,安全性,以及日记记录. 本质上说,拦截器并 ...
- springMVC--XML解析
一 springMVC 入口 web.xml; DispatcherServlet二 初始化过程 1.寻找init(); 查看DispatcherServlet时候时,继承自servlet,肯定有初始 ...
- 北京大学Cousera学习笔记--4-计算导论与C语言基础--计算机的基本原理-程序运行的基本原理
已知:电路能完成计算 怎么计算:设计好很多个原子电路,需要的时候就把他们临时组装在一起--ENIAC 升级:冯诺依曼-EDVAC(现在的计算机都是) 1.通过某种命令来控制计算机.让计算机按照这种命令 ...
- docker容器的实践——综合项目一
Docker 综合实验 实验拓扑: [调度器] Keepalived + nginx 一.Keepalived服务的安装配置: 关闭LVS服务器的ipv4代理和 ...
- IIS部署Angular2
因為Angular無刷新的特性,所以瀏覽器地址欄上的網址其實不會真實映射到磁盤的特定位置,所以我們需要安裝.Rewrite Module, 如下: Web.config 如下: <?xml ve ...
- 201903<<高效15法则>>
高效15法则,这本书作为时间管理的入门书籍,易读易理解,结构清晰,但是中间的某些篇幅内容过于拖沓....
- gvim keil 快捷跳转至出现错误(警告)行
开发环境 win7系统中:用keil 对工程进行编译链接,用gvim编辑查看源文件. 实现效果 一键跳转到出现警告或者错误的源码. 实现原理 gvim 调用外部shell脚本,对keil编译生成的lo ...