vue-cli3 使用 jQuery 2019-11-10

2019-11-10  本文已影响0人  Kawing_Zhang

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");

上一篇 下一篇

猜你喜欢

热点阅读