vue-cli3.0引入jQuery

1.终端

 npm install jquery --save  //安装jquery 

2.一般安装成功后在package.json文件内的dependencies项中会有"jquery": "^1.12.4",如果没有可以手动添加。
3.打开.eslintrc.js 文件,找到env ,在里面 添加 jquery:true,默认应该是只有node:true,如果都没有,那就加上env呗
4.main.js引入

import $ from 'jquery'

5.创建vue.config.js 文件

const webpack = require('webpack')
module.exports = {
 configureWebpack: {
  plugins: [
     new webpack.ProvidePlugin({
     $:"jquery",
      jQuery:"jquery",
      "windows.jQuery":"jquery"
     })
      ]
     }
}

6.重新运行项目

使用

</ul>
      <ul id="list">
        <li><input type="checkbox" name="#" id=""> 刘宇</li>
        <li><input type="checkbox" name="#" id=""> 刘宇</li>
        <li><input type="checkbox" name="#" id=""> 刘宇</li>
        <li><input type="checkbox" name="#" id=""> 刘宇</li>
        <li><input type="checkbox" name="#" id=""> 刘宇</li>
        <li><input type="checkbox" name="#" id=""> 刘宇</li>
        <li><input type="checkbox" name="#" id=""> 刘宇</li>
        <li><input type="checkbox" name="#" id=""> 刘宇</li>

    </ul>
    <input type="checkbox" name="" id="select_input">全选
__________________________________________
mounted(){
  $("#select_input").click(function(){
          // alert($(this).prop('checked'));
          $("#list input").prop('checked',$(this).prop('checked'));
      })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 41,525评论 3 14
  • vue-cli3项目搭建配置以及性能优化 在之前的开发中主要用的是vue-cli2,最近空闲时间比较多,接下来有新...
    bayi_lzp阅读 19,498评论 16 68
  • 注:vue-cli3.0 没有了webpack.config.js 配置文件,取而代之的是集合在vue.confi...
    阿咕阿菇阅读 1,940评论 0 50
  • 好久没有写日记了。。。今天我专心学习webpack,跟着网上的文章请练完这16个webpack小例子翻译阮一峰大神...
    还有谁叫李狗蛋阅读 5,118评论 1 6
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,322评论 4 31