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

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

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

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的插件，因為沒找到j(luò)query-ui,它不開心，給我們報了好多錯誤，還要我下載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")
        }

重新運行下我們的項目

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

普通插件的引入

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84338.html

相關(guān)文章

7月份前端資源分享

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

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

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

mykurisu 2019-08-22 13:45 評論0 收藏0
webpack 使用指南-緒論

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

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

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

xiaotianyi 2019-08-22 11:03 評論0 收藏0
Vue項目優(yōu)化

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

NervosNetwork 2019-08-26 10:48 評論0 收藏0