vue+webpack与jquery插件的那些浅坑

jquery的引入

既然是jquery插件,那么一定是依赖JQuery啦,下载jquery

npm install --save jquery

接着,在我们的webpack.base.config文件跟对象下添加以下代码

plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]

jquery-ui的使用

jquery-ui这里是一个超级大坑,我在这里跌倒了,费好大劲爬起来。
我们把包下载下来

 npm install --save jquery-ui

我们先试试这样写,引入我们的jquery-ui

import 'jquery-ui'

然后我们重新运行项目
错误!!


我有一个依托于jquery-ui的插件,因为没找到jquery-ui,它不开心,给我们报了好多错误,还要我下载jquery-ui,明明已经下好了,那么是引入哪里出了问题!把import删掉,在webpack.base.config中更改一下代码、

alias: {
            'jquery-ui': path.resolve('./node_modules/jquery-ui/ui'),
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src')
        }

重新运行下我们的项目
图片描述

成功了!警告我们先不去管他~同事的锅。


普通插件的引入

我这次用的jquery插件是gridstack,正常引入npmbao都是import "gridstack"或者require(gridstack),文件让webpack自己去找嘛,我都设置好了,我用亲身经历告诉你:不行!!!把所有插件放进一个plug-ui的文件夹吧,然后手动填写路径。

import utilcss from '../../plug-in/gridstack/dist/gridstack.css'
import util from '../../plug-in/gridstack/dist/gridstack.js'

插件到此引入成功!都是些小错误,但是网上没有很详细的代码,在此希望帮到大家。
贴上这个拖拽插件的链接:https://github.com/troolee/gr...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值