vue.js怎么用jq


本文摘自PHP中文网,作者coldplay.xixi,侵删。

vue.js使用jq的方法:首先NPM安装jQuery,代码为【npm install jquery --save】;然后配置webpack,代码为【var webpack = require('webpack')】;最后检查eslint。

【相关文章推荐:vue.js】

vue.js使用jq的方法:

1、NPM 安装 jQuery,项目根目录下运行以下代码

1

npm install jquery --save

2、webpack配置

在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用。

1

var webpack = require('webpack')

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 原有代码

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

1

import 'jquery'

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

接着启动项目

1

npm run dev

但是编译却报错了:

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

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

咋回事呢???

3、eslint 检查

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

1

2

3

4

5

6

env: {

 // 原有

 browser: true,

 // 添加

 jquery: true

}

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

相关免费学习推荐:JavaScript(视频)

以上就是vue.js怎么用jq的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

vue.js页面间如何实现传值

15个vue.js高级面试问题

vue.js项目如何编译打包

vue.js怎么改端口号

详解vue.js中的4个级别作用域

vue.js中如何写注释

vue.js是前端框架吗?

vue.js如何使用filter

vue.js怎么引入img

vue.js为什么要镜像

更多相关阅读请进入《vue.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...