Vue中引入Jquery

1、安装

npm install jquery --save

2、配置

在build中 webpack.base.conf.js中,开头添加以下代码

var webpack = require('webpack')

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

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: {}

main.js里导入jQuery

import 'jquery'

此时可以写console.log($('选择器'))测试以下

npm run dev    //运行

如果发现编译错误,解决方法:
根目录下.eslintrc.js文件了,在改文件的module.exports中

env: {
  // 原有
  browser: true,
  // 添加
  jquery: true
}

这下大功告成啦!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、引入jQuery: 在当前的Vue项目中运行,运行命令npm install jquery –save-dev...
    changlinwang阅读 5,855评论 0 6
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,336评论 7 110
  • 晓寒浅梦阅读 1,176评论 0 2
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,548评论 7 35
  • 嗓子有些喑哑,但还是选择说话,沉默只会让自己孤独,写字的时候亦如是。 每天泡在一个慢慢熟悉的空间,当初的那份新鲜感...
    B612上的小橙子阅读 845评论 0 0