博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue 中使用 jQuery
阅读量:5130 次
发布时间:2019-06-13

本文共 1247 字,大约阅读时间需要 4 分钟。

题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决。

编译报错:$ is undefined or no-undef '$' is not defined

假设你已经使用vue-cli搭建好了开发的脚手架,接下来,看下面。。。

  1. NPM 安装 jQuery,项目根目录下运行以下代码
npm install jquery --save
  1. webpack配置
    在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用,
var webpack = require('webpack')

然后在module.exports中添加一段代码,

// 原有代码resolve: {  extensions: ['.js', '.vue', '.json'],  alias: {    'vue$': 'vue/dist/vue.esm.js',    '@': resolve('src')  }},// 添加代码plugins: [  new webpack.ProvidePlugin({    $: "jquery",    jQuery: "jquery",    jquery: "jquery",    "window.jQuery": "jquery"  })],// 原有代码module: {  rules: [    // ......  ]}

然后许多其他解决办法到此就说在main.js里导入就可以了,然而题主照着做了。

main.js里导入jQuery

import 'jquery'

在Vue组件里使用 $ or jQuery 写了操作dom的代码

接着启动项目

npm run dev

但是编译却报错了:

http://eslint.org/docs/rules/no-undef '$' is not defined orhttp://eslint.org/docs/rules/no-undef 'jQuery' is not defined

咋回事呢???

  1. eslint 检查
    机智的朋友肯定想到跟eslint有关,没错,这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了,在改文件的module.exports中,为env添加一个键值对 jquery: true 就可以了,也就是:
env: {  // 原有  browser: true,  // 添加  jquery: true}

再次 npm run dev ,OK了,没报错,赶紧去组件里试一下吧,console.log($('选择器')) ,你会发现成功使用jQuery获取到了DOM。

转载于:https://www.cnblogs.com/Yann001/p/6850698.html

你可能感兴趣的文章
(not) in 和 (not) exists区别
查看>>
我要开始学习计算机的基础知识
查看>>
JAR文件包及jar命令详解
查看>>
android 自定义动画4 RotateAnimation源码分析
查看>>
递归--放苹果
查看>>
scss组件定制的一些学习
查看>>
jquery淡入淡出
查看>>
Python基础-封装与扩展、静态方法和类方法
查看>>
启动Docker后台容器,测试运行Hello-world
查看>>
Redis的持久化
查看>>
Power BI Desktop 安装环境
查看>>
1055. 集体照 (25)
查看>>
C#飞行棋总结
查看>>
[转载]介绍一个JSONP 跨域访问代理API-yahooapis
查看>>
treeview 点击时选中节点
查看>>
[转载]WCF 几种常见错误
查看>>
svn使用方法以及使用教程
查看>>
15 个使用 jQuery Masonry 进行布局的网站
查看>>
qTip2 精致的jQuery提示信息插件
查看>>
bzoj3992
查看>>