vue+webpack與jquery插件的那些淺坑

hankkin 發(fā)布于2019-08-20 18:19 / 1939人閱讀

摘要：的引入既然是插件，那么一定是依賴?yán)?，下載接著，在我們的文件跟對(duì)象下添加以下代碼的使用這里是一個(gè)超級(jí)大坑，我在這里跌倒了，費(fèi)好大勁爬起來。插件到此引入成功都是些小錯(cuò)誤，但是網(wǎng)上沒有很詳細(xì)的代碼，在此希望幫到大家。貼上這個(gè)拖拽插件的鏈接

jquery的引入

既然是jquery插件，那么一定是依賴JQuery啦，下載jquery

npm install --save jquery

接著，在我們的webpack.base.config文件跟對(duì)象下添加以下代碼

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

jquery-ui的使用

jquery-ui這里是一個(gè)超級(jí)大坑，我在這里跌倒了，費(fèi)好大勁爬起來。
我們把包下載下來

 npm install --save jquery-ui

我們先試試這樣寫，引入我們的jquery-ui

import "jquery-ui"

然后我們重新運(yùn)行項(xiàng)目

我有一個(gè)依托于jquery-ui的插件，因?yàn)闆]找到j(luò)query-ui,它不開心，給我們報(bào)了好多錯(cuò)誤，還要我下載jquery-ui，明明已經(jīng)下好了，那么是引入哪里出了問題！把import刪掉，在webpack.base.config中更改一下代碼、

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

重新運(yùn)行下我們的項(xiàng)目

成功了！警告我們先不去管他~同事的鍋。

普通插件的引入

我這次用的jquery插件是gridstack,正常引入npmbao都是import "gridstack"或者require(gridstack),文件讓webpack自己去找嘛，我都設(shè)置好了,我用親身經(jīng)歷告訴你：不行?。?！把所有插件放進(jìn)一個(gè)plug-ui的文件夾吧，然后手動(dòng)填寫路徑。

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

插件到此引入成功！都是些小錯(cuò)誤，但是網(wǎng)上沒有很詳細(xì)的代碼，在此希望幫到大家。
貼上這個(gè)拖拽插件的鏈接：https://github.com/troolee/gr...

GPU云服務(wù)器云服務(wù)器 webpack cdn jquery webpack引用jquery vue插件 jquery插件源碼jquery

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84338.html

相關(guān)文章

7月份前端資源分享

摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實(shí)現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個(gè)變態(tài)題解析上個(gè)變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達(dá)式聊一聊前端存儲(chǔ)那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 評(píng)論0 收藏0
我在vue-cli+webpack項(xiàng)目開發(fā)中遇到的一些問題總結(jié)

摘要：最近用了一個(gè)月的時(shí)間快速開發(fā)了一套管理系統(tǒng)，前后端分離的開發(fā)模式，前端采用的技術(shù)路線，頁面是第三方框架。下面總結(jié)一下我在開發(fā)工程中遇到的一些問題。比如我需要一個(gè)彈框插件，而上頁沒注冊(cè)。最近用了一個(gè)月的時(shí)間快速開發(fā)了一套管理系統(tǒng)，前后端分離的開發(fā)模式，前端采用vue-cli+webpack的技術(shù)路線，頁面UI是第三方bootstrap框架。下面總結(jié)一下我在開發(fā)工程中遇到的一些問題。1....

mykurisu 2019-08-22 13:45 評(píng)論0 收藏0
webpack 使用指南-緒論

摘要：在講解之前先回顧一下筆者在項(xiàng)目開發(fā)中的工作流變化時(shí)代此時(shí)工作流大致為結(jié)合插件處理視圖處理樣式等庫(kù)此時(shí)由于依賴少手動(dòng)引入各種標(biāo)簽結(jié)合調(diào)試界面時(shí)代利用指令服務(wù)控制器將邏輯拆分為多個(gè)文件利用編譯會(huì)將分為全局樣式和組件樣式下載各種依賴此時(shí)任需要手動(dòng) 在講解 webpack 之前先回顧一下筆者在項(xiàng)目開發(fā)中的工作流變化. jquery 時(shí)代此時(shí)工作流大致為 jquery 結(jié)合插件處理視圖 bo...

Nosee 2019-08-21 17:38 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)

摘要：詳細(xì)具體的使用可以見文章手摸手，帶你優(yōu)雅的使用。為了加速線上鏡像構(gòu)建的速度，我們利用源進(jìn)行加速并且將一些常見的依賴打入了基礎(chǔ)鏡像，避免每次都需要重新下載。完整項(xiàng)目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 評(píng)論0 收藏0
Vue項(xiàng)目?jī)?yōu)化

摘要：，組件按需加載這也是可以優(yōu)化的點(diǎn)。如果大家還有好的優(yōu)化方案，歡迎大家留言交流在日常的Vue項(xiàng)目開發(fā)中，隨著業(yè)務(wù)的日漸復(fù)雜，代碼量的日益增加，隨之帶來的問題就是打包后的vendor.js體積過大，導(dǎo)致加載時(shí)空白頁時(shí)間過長(zhǎng)，給用戶的體驗(yàn)太差。為此我們需要減少vendor.js的體積，從本質(zhì)上來解決這種問題。這里大概例舉幾個(gè)在項(xiàng)目中實(shí)際用到過的方法，優(yōu)化后的js大概縮小了50%左右，效果...

NervosNetwork 2019-08-26 10:48 評(píng)論0 收藏0