vue+webpack与jquery插件的一些坑浅析-职坐标

vue+webpack与jquery插件的一些坑浅析

沉沙 2018-05-28 来源：阅读 1148 评论 0

摘要：本文讲解了vue+webpack与jquery插件的一些坑，希望阅读本篇文章以后大家有所收获，避免这些错误，加深大家对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'

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端jQuery频道！

jQuery插件怎么学 jQuery插件精通jquery

本文由 @沉沙发布于职坐标。未经许可，禁止转载。