参考原文地址:www.cnblogs.com/fps2tao/p/9…

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

npm install jquery --save
复制代码

2.webpack配置

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

'use strict'
const webpack = require('webpack') //这行是新增的
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
复制代码

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

  //增加一个plugins
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
复制代码

然后在main.js里面引入jquery

import $ from 'jquery'
复制代码

然后重新启动项目,不出意外,编译应该报错,跟下面类似:

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 就可以了,也就是

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    // 这行是新添加的
    jquery: true
  },
复制代码

4.eslint == 报错 [eslint] Expected '===' and instead saw '=='. (eqeqeq)

还是在根目录下.eslintrc.js修改

  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //新增这一行
    "eqeqeq": 'off'
  }
复制代码

转载于:https://juejin.im/post/5d5ca3726fb9a06afe1299e5

Logo

前往低代码交流专区

更多推荐