如何在vue-cli 3.x中使用jquery
由于项目需求要使用jquery,结果各种引用都不济于事。
最后在网上找到了答案,现把它记录一下,给有需要者。
首先下载 jquery。
cnpm install jquery --save-dev
方案一:
然后在main.js中引入jquery。
import Vue from 'vue'
import $ from 'jquery' //加上这句话
import App from './App.vue' Vue.config.productionTip = false
Vue.prototype.$ = $; // 当然还有这句话 给vue原型上添加 $
new Vue({
render: h => h(App),
}).$mount('#app')
在使用的时候
mounted() {
console.log(this.$('#wrapper'));
}
这样使用的时候会有一些麻烦,比如在一个函数内部使用的时候,this的指向是个问题。
方案二:
这个就比较简单粗暴了,直接在需要使用jquery的组建中
<script>
import $ from 'jquery'
export default {
// $("nav").click()
...
}
如何在vue-cli 3.x中使用jquery的更多相关文章
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
- 如何在 vue 项目里正确地引用 jquery
转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...
- Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)
1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...
- [Vue CLI 3] 插件开发中的 genCacheConfig 细节研究
在 @vue/cli-plugin-babel/index.js 中: api.genCacheConfig('babel-loader', {}, []) 我们看一下 api.genCacheCon ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
- vue cli web pack 全局引入jquery
之前 装过,装 npm i —save jquery 然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- (转)大厂常问到的14个Java面试题
1. synchronized和reentrantlock异同 相同点 都实现了多线程同步和内存可见性语义 都是可重入锁 不同点 实现机制不同 synchronized通过java对象头锁标记和Mon ...
- 科大讯飞语音识别Demo创建
1.下载官方SDK https://www.xfyun.cn/sdk/dispatcher 2.打开AS,选择import project 3.导入mscV5PlusDemo 4.解决ERROR: ...
- MySQL进阶12-- 数据类型介绍: 数值型/字符型/日期型-- 正负溢出保护/枚举型/set型/时间戳
/*进阶12 SQL 数据类型介绍 数值型: 整数: Tinyint(1b) < mediumint(3b)<smallint(2b) <int(4b) <bigint(8b) ...
- 胡搞-强化版的light oj-1055-的思路-AI版的6重暴力For循环的BFS
新题目大意: 三个棋子按照先后顺序,可以随意方向合法地走到空位置上(而不是像原题light oj-1055中的一样三个棋子每次走的方向都一致),当三个棋子全部走进目标地点,就结束:求需要指挥的最少次数 ...
- python学习之flask接口开发,环境变量扩展,网络编程requests
python基础 flask之mock接口 所谓mock接口,其实就是我们在正式接口还没联调或者是测试接口没有正式使用时,自己创建一个模拟接口,来供项目暂时打通功能或者测试流程梳理的桥梁,而我们这儿使 ...
- 【noi2017】 整数 线段树or模拟
ORZYYB 题目大意:你需要维护一个有$3\times 10^7$个二进制位的数,有一种修改方式和一种询问方式 对这个数加上$a\times2^b$,其中$|a|≤10^9$,$b≤3\times ...
- Redis的下载、安装及启动
一.下载Redis 1. redis 的下载路径 https://pan.baidu.com/s/1tdMzOlcTlFC7Z3a3I_59hQ 提取码:5tgy 二.安装Redis cd到当前解压目 ...
- jquery统计输入文字的个数并对其进行判断
<textarea placeholder="该产品满足你的期待吗?说说你的使用心得,分享给 同样看中的他们吧"></textarea> <span ...
- Linux 理解 %iowait (%wio)
理解 %iowait (%wio) 2016/02/25 %iowait 是 “sar -u” 等工具检查CPU使用率时显示的一个指标,在Linux上显示为 %iowait,在有的Unix版本上显示为 ...
- bzoj 4240: 有趣的家庭菜园 树状数组+贪心
有一个小性质:就是一个下标排列的最小移动次数就是逆序对数. 我们发现最终形态一定是一个波峰. 那么我们求的就是形成波峰的下标最少逆序对数. 考虑将元素从小到大依次插入. 那么,对于第 $i$ 个元素, ...