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

hankkin 发布于2019-08-20 18:19 / 1772人阅读

摘要：的引入既然是插件，那么一定是依赖啦，下载接着，在我们的文件跟对象下添加以下代码的使用这里是一个超级大坑，我在这里跌倒了，费好大劲爬起来。插件到此引入成功都是些小错误，但是网上没有很详细的代码，在此希望帮到大家。贴上这个拖拽插件的链接

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...

idc机房托管私有云 webpack cdn jquery webpack引用jquery vue插件 jquery插件源码jquery

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84338.html

7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0
我在vue-cli+webpack项目开发中遇到的一些问题总结

摘要：最近用了一个月的时间快速开发了一套管理系统，前后端分离的开发模式，前端采用的技术路线，页面是第三方框架。下面总结一下我在开发工程中遇到的一些问题。比如我需要一个弹框插件，而上页没注册。最近用了一个月的时间快速开发了一套管理系统，前后端分离的开发模式，前端采用vue-cli+webpack的技术路线，页面UI是第三方bootstrap框架。下面总结一下我在开发工程中遇到的一些问题。1....

mykurisu 2019-08-22 13:45 评论0 收藏0
webpack 使用指南-绪论

摘要：在讲解之前先回顾一下笔者在项目开发中的工作流变化时代此时工作流大致为结合插件处理视图处理样式等库此时由于依赖少手动引入各种标签结合调试界面时代利用指令服务控制器将逻辑拆分为多个文件利用编译会将分为全局样式和组件样式下载各种依赖此时任需要手动在讲解 webpack 之前先回顾一下笔者在项目开发中的工作流变化. jquery 时代此时工作流大致为 jquery 结合插件处理视图 bo...

Nosee 2019-08-21 17:38 评论0 收藏0
手摸手，带你用vue撸后台系列一(基础篇)

摘要：详细具体的使用可以见文章手摸手，带你优雅的使用。为了加速线上镜像构建的速度，我们利用源进行加速并且将一些常见的依赖打入了基础镜像，避免每次都需要重新下载。完整项目地址：vue-element-admin系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 评论0 收藏0
Vue项目优化

摘要：，组件按需加载这也是可以优化的点。如果大家还有好的优化方案，欢迎大家留言交流在日常的Vue项目开发中，随着业务的日渐复杂，代码量的日益增加，随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。这里大概例举几个在项目中实际用到过的方法，优化后的js大概缩小了50%左右，效果...

NervosNetwork 2019-08-26 10:48 评论0 收藏0