vue-cli3 使用 jQuery 2019-11-10

vue ui依赖里添加jquery ,或者下面这样添加。

npm install jquery --save

添加完之后,package.json的dependencies里会多出 jquery
找到下面的eslintConfig,在env里添加"jquery":true

 "eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "jquery":true
    },

vue.config.js
顶部先引入webpack

const webpack = require('webpack')

module.exports = {

    configureWebpack: {

       plugins: [

          new webpack.ProvidePlugin({

            $:"jquery",

            jQuery:"jquery",

            "windows.jQuery":"jquery"

          })

        ]

    }

}

如果同时还是用了vux的话,原来就是会这样的

configureWebpack: config => {
   require('vux-loader').merge(config, {
     options: {},
     plugins: ['vux-ui'],
   }),   

这个时候就就应该直接push上去

configureWebpack: config => {
    require('vux-loader').merge(config, {
      options: {},
      plugins: ['vux-ui'],
    }),
    config.plugins.push(new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    }))
    
  },

最后直接在main.js里引用

import $ from 'jquery';

直接在页面的methods:{}使用就好了

//点击左边的人名
    changeHandler(label) {
      const a = label.a;
      const b = label.b;
      $(".cube-index-list-content ul li").removeClass("dianjilezhege");
      $(".cube-index-list-content ul>li:nth-child("+a+")>ul>li:nth-child("+b+")").addClass("dianjilezhege");

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

推荐阅读更多精彩内容