如何在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 ...
随机推荐
- Android笔记(三十五) Android中AsyncTask
AsyncTask<Params,Progress,Result> 是一个抽象类,通常继承这个抽象类需要指定如下几个泛型参数: 1. Params :启动任务时出入参数的类型 2. P ...
- TLS1.3 PPT 整理
1.握手协议的目的是什么 建立共享秘钥(通常使用公钥加密).协商算法和模型以及加密使用的参数,验证身份. 2.记录协议 传输独立的信息,在堆成加密算法下保护数据传输 3.RSA Handshake S ...
- MOOC下载器的文档整理
1.背景 最近学习中国大学MOOC的课程,想把课程的pdf下载下来本地保存并浏览.工具: Setup-Mooc-3.4.0.exe 但是,却发现所下载的文档在不同的文件夹里,浏览很不方便.于是 ...
- Codeforces #503 C. Elections(贪心,逆向
我的参考的博客地址 题目 逆向考虑. 暴力遍历 k(k是1到n/2+1 范围内的),挑出对于每一个k,记对于党派 i,num[ i ]为其票数.num[ i ]小于k-1的就不用改变投票了(这部分是比 ...
- VGG网络的Pytorch实现
1.文章原文地址 Very Deep Convolutional Networks for Large-Scale Image Recognition 2.文章摘要 在这项工作中,我们研究了在大规模的 ...
- Linux网络编程综合运用之MiniFtp实现(四)
从今天开始,正式进入MiniFtp的代码编写阶段了,好兴奋,接下来很长一段时间会将整个实现过程从无到有一点点实现出来,达到综合应用的效果,话不多说正入正题: 这节主要是将基础代码框架搭建好,基于上节介 ...
- 通过 cross apply 实现函数转换成表并与原表进行关联
create table tb_cross_apply ( id int identity, multivalue ) ) insert into tb_cross_apply VALUES ('A| ...
- P1091 合唱队形[单调性+DP]
题目来源:洛谷 题目描述 N位同学站成一排,音乐老师要请其中的(N−K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2,…,K,他们的身高 ...
- Android上执行python脚本-QPython
看书,发现android可以跑python. 尝试了一下. 首先需要在手机上安装python环境,通过安装apk实现,这个apk叫QPython,还有同类的比如SL4A. QPython的官网:htt ...
- 中文日历Calendar
一.层次结构 Object<-----Calendar<-----EastAsianLunisolarCalendar<-----ChineseLunisolarCalendar(农 ...