vue-cli中如何引入jquery

前言

　　雖然vue不推薦直接操作DOM，而且也提供了操作DOM的方式。但是在某些時候還是要用到jquery(囧)，那么如何在使用vue-cli的時候引入jquery呢？

安裝

　　國內鏡像 cnpm 安裝

cnpm install jquery --save-dev

配置

　　webpack有providePlugin插件，可以自動引入模塊。所以需要在項目工程的webpack.base.config.js中添加以下配置：

const webpack = require('webpack')

  plugins: [
    new webpack.ProvidePlugin({  //引入Jquery
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery':'jquery'
    })
  ]

 

解決報錯

　　加入以上配置之后，再項目文件中使用'$'，發現還是會報錯 ---  eslint報錯

　　eslint認為沒有聲明，需要在eslintrc.js中加入globals配置

  globals: { 
    '$': false,
    'jquery': false
  }

　　這樣就可以正常調用‘$’了

注意

　　修改配置后要停掉項目，重新啟動才會生效。