如何在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 ... 
随机推荐
- [postman][API 测试]用Postman做RestAPI测试学习笔记
			痛点:最近有个API网关的兼容性测试任务,需要验证API是否可用,返回值符合预期,如果手工复制粘贴curl命令,繁琐且低效 调研时发现了Postman 这个chrom插件,试用了2天后发现使用起来很方 ... 
- windows 数据备份
			xcopy 数据目录 备份目录 /e /c /q /h /r /y at 00:00 /every:M,T,W,Th,F,S,Su d:\批处理文件名 
- Mac OS下安装MongoDB以及配置方法总结【笔记】
			首先打开命令框,输入: brew install mongodb 安装完成后 启动.停止.重启如下 brew services start mongodb brew services stop mo ... 
- CentOS7.x安装nodejs-10.16.3
			Wiki.js 安装 需要用到nodejs,本文介绍下快速安装nodejs 环境: 操作系统:CentOS7.6 nodejs版本:10.16.3 官网:https://nodejs.org/en/ ... 
- QQ龙虎榜数据接口
			1.个股全部上榜日期 strUrl.Format(L"http://stock.finance.qq.com/cgi-bin/sstock/q_lhb_js?t=1&c=%06d&q ... 
- Linux(centos 7)  安装nginx
			在安装nginx之前需要安装依赖的包 一. gcc 安装安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum install gcc- ... 
- linux 忘记root密码怎么处理。
			这个是不少人纠结的地方.一台服务器,太久没使用,然后又没有一个文件txt,excel记录那些密码相关的东西.所以导致很多信息忘记了. 参考文章:https://blog.csdn.net/cranky ... 
- 万年历SQL Server中实现
			参照C#版万年历实现而做 http://www.cnblogs.com/txw1958/archive/2013/01/27/csharp-calendar.html 在sql server中实现公历 ... 
- luogu 3919
			主席树 #include <iostream> #include <cstdio> #include <algorithm> #include <cmath& ... 
- mvn ssm 异常 org.springframework.beans.factory.BeanCreationException:Error creating bean with name 'multipartResolver'
			解决方案: 添加 commons-fileupload-1.2.jar <!-- https://mvnrepository.com/artifact/commons-fileupload/co ... 
