由于项目需求要使用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()
...
}

mrceel.cn

如何在vue-cli 3.x中使用jquery的更多相关文章

  1. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  2. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  3. 如何在 vue 项目里正确地引用 jquery

    转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...

  4. Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

  5. [Vue CLI 3] 插件开发中的 genCacheConfig 细节研究

    在 @vue/cli-plugin-babel/index.js 中: api.genCacheConfig('babel-loader', {}, []) 我们看一下 api.genCacheCon ...

  6. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

  7. vue cli web pack 全局引入jquery

    之前 装过,装 npm i —save  jquery  然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...

  8. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  9. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

  10. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

随机推荐

  1. Typora数学公式

    LaTeX编辑数学公式基本语法元素 LaTeX中的数学模式有两种形式: inline 和 display. 前者是指在正文插入行间数学公式,后者独立排列,可以有或没有编号. 行间公式(inline) ...

  2. Ubuntu:一个部署好的tomcat应用(war包)怎么用Nginx实现动静分离?

    今天想把之前的一个demo用Nginx把资源分离开来,在网上看了一天,整整弄了一天,硬是没弄出来. 要么全是同样的内容的,要么就是环境跟我这里不一样的.再加上对Nginx没接触过,给我都整哭了差点. ...

  3. Python Multiprocessing 多进程,使用多核CPU计算 并使用tqdm显示进度条

    1.背景   在python运行一些,计算复杂度比较高的函数时,服务器端单核CPU的情况比较耗时,因此需要多CPU使用多进程加快速度 2.函数要求  笔者使用的是:pathos.multiproces ...

  4. Linux网络编程综合运用之MiniFtp实现(九)

    上次中实现了FTP命令的映射来避免很多if....else的判断,这次主要是开始实现目录列表的传输,先看一下目前实现的: 数据连接创建好之后则开始进行目录列表的传输了,而要传输目录列表,首先要将目录列 ...

  5. P2P system:How Chord tackles failures

    若有peer failures 怎么办 接上面的例子,如果N32 fail掉了,但是N80的finger table还没有更新,这样query到了N16,它找不到N32,只有N80,这样query就会 ...

  6. pandas 4

    参考资料:https://mp.weixin.qq.com/s/QnxaOrvlWJn6Dr42Ic1CcQ 1  #只选取housing,loan,contac和poutcometest_data[ ...

  7. Java位运算总结:位运算用途广泛

    前天几天研究了下JDK的Collection接口,本来准备接着研究Map接口,可是一查看HashMap类源码傻眼咯,到处是位运算实现,所以我觉得还是有必要先补补位运算知识,不然代码看起来有点费力.今天 ...

  8. python - django (cookie)

    # """ Cookile: # 因为 HTTP 请求是没有状态的,每一次请求都是独立的 Cookile 的存储: # 保存在浏览器上的 键值对. # 服务器控制着响应, ...

  9. CSP-S 2019 第二轮 退役记

    Day 0 复习数论,复习网络流,复习动态DP,复习ac自动机,复习后缀自动机- Day 1 进考场,得到解压密码,跟时事热点没有什么关系. 感觉键盘有点难受,右半部分包括退格.方向键.回车都比较黏. ...

  10. 自定义starter

    https://github.com/deadzq/spring-boot-starter-hello 父子项目 子项目引用父项目中的依赖和配置参数