vuecli3.0全局引入jquery

约定不等于承诺〃 2023-06-15 09:53 5阅读 0赞

之前使用jquery都是每个组件引入

import $ from 'jquery'

这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引入的方法

# 1.下载jquery #

npm install jquery

# 2.vue.config.js中webpack配置configureWebpack添加jquery插件 #

[vuecli3中修改webpack配置][vuecli3_webpack]

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

# 3.package.json中eslint配置项env中添加"jquery":true #

[eslint配置][eslint]

"eslintConfig": {
        "root": true,
        "env": {
          "node": true,
          "jquery": true //此处配置意思为全局引入jquery，详情可查看文档
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "rules": {
          "no-console": "off"
        },
        "parserOptions": {
          "parser": "babel-eslint"
        }
      },

# 4.最后就可以愉快在项目各个组件中不用import也可以使用jquery了。。 #

[vuecli3_webpack]: https://links.jianshu.com/go?to=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fguide%2Fwebpack.html
[eslint]: https://links.jianshu.com/go?to=https%3A%2F%2Feslint.org%2Fdocs%2Fuser-guide%2Fconfiguring

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery引入----练习

jQuery引入----练习 html <!DOCTYPE html> <html> <head> <title

忘是亡心i/ 2024年03月22日 11:09/ 0 赞/ 46 阅读

相关 vuecli3.0全局引入jquery

之前使用jquery都是每个组件引入 import $ from 'jquery' 这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引

约定不等于承诺〃/ 2023年06月15日 09:53/ 0 赞/ 6 阅读

相关 uniapp全局引入字体

uniapp引入各种字体一.下载字体 ![在这里插入图片描述][20210115093344326.png] 二.在全局设置字体在font-face中说明，

喜欢ヅ旅行/ 2023年01月07日 01:26/ 0 赞/ 241 阅读

相关 vue-cli4中全局引入jquery

先安装依赖 npm install jquery 在src同级目录下新建一个`vue.config.js`文件 ![在这里插入图片描述][watermark_t

墨蓝/ 2023年01月01日 07:52/ 0 赞/ 128 阅读

相关 vue 统一引入全局过滤器

一、在filter/index 文件中实现全局过滤器函数如下所示目录 ![20201203180149710.png][] export function

Love The Way You Lie/ 2022年12月26日 08:14/ 0 赞/ 182 阅读

相关快速部署vuecli3 vuecli搭建 vuecli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2022年12月22日 11:07/ 0 赞/ 323 阅读

相关 uni-app引入全局样式

<style> /每个页面公共css / / App.vue 引入全局公共样式 / / 1.引入样式库 / / uni

「爱情、让人受尽委屈。」/ 2022年11月15日 03:55/ 0 赞/ 252 阅读

相关 Vue引入全局过滤器

创建单独的文件 ![在这里插入图片描述][20190516162536954.png] 加上时间过滤函数将formatDate 暴露export 出来

喜欢ヅ旅行/ 2022年01月31日 11:55/ 0 赞/ 339 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 680 阅读

相关 layui引入jQuery

//第一种：主动加载jquery模块 layui.use(['jquery', 'layer'], function(){ var $ = lay

谁借莪１个温暖的怀抱￠/ 2021年09月23日 08:52/ 0 赞/ 642 阅读