資訊專欄INFORMATION COLUMN
摘要：寫在前面日前，在學(xué)習(xí)使用開發(fā)新的項(xiàng)目。然而目前用實(shí)現(xiàn)的框架里面，尚未出現(xiàn)具有像一樣統(tǒng)治力的框架。最后這里只舉了和的例子，同理其他插件也是可用同樣的方法引入。雖以上皆經(jīng)過實(shí)戰(zhàn)檢驗(yàn)，但若有錯誤歡迎指正。
寫在前面
日前，在學(xué)習(xí)使用Vue2.0開發(fā)新的項(xiàng)目。然而目前用Vue實(shí)現(xiàn)的UI框架里面，尚未出現(xiàn)具有像bootstrap一樣統(tǒng)治力的框架。一番糾結(jié)后，老夫抄起家伙就是一梭...
那么問題來了，在Vue中如何引入jQuery和swiper呢？
經(jīng)歷半天搜索、比對、嘗試之后，得出了下面的結(jié)論，單用 webpack 時設(shè)置同理。
引入jQuery這個問度娘就有很多方案，我這里選取的是將jQuery暴露到全局的方式，這樣就不用每個用到的地方都要import一次安裝 jQuery
npm i -S jQuery //等同于 npm install --save jQuery設(shè)置 webpack.config.js
var webpack = require("webpack")
const ProvidePlugin = new webpack.ProvidePlugin({//引入外部類庫
$: "jquery",
jQuery: "jquery",
});
module.exports = {
...
plugins: [
ProvidePlugin,
],
...
}
至此，可全局使用熟悉的$符號了。
更多辦法使用 exports-loader（按照官方例子實(shí)測，配置簡單成謎，然而無效，求指點(diǎn)）
設(shè)置 externals（詳情參考推薦答案）
普通 import（也就是接下來要說的辦法）
引入swiper插件本來設(shè)置externals后再在index.html中引用的辦法也是挺好的，但在我的項(xiàng)目中只有一個頁面用到，而且externals方式不知如何設(shè)置css（還望高人指點(diǎn)），故選擇普通import的方式。簡單粗暴importvue-awesome-swiper的使用可以參考 這篇文章
此法無需在index.html引用其JS或CSS，但每個用到的頁面都需要import一次，jQuery也可用此法引入。
在 script 中 import 其js文件
import Swiper from "../assets/lib/swiper-3.4.2.min.js"
在 style 中 @import 其css文件
@import "../assets/lib/swiper-3.4.2.min.css";
至此，可以像往常一樣使用又愛又恨的swiper了。
最后這里只舉了jq和swiper的例子，同理其他插件也是可用同樣的方法引入。雖以上皆經(jīng)過實(shí)戰(zhàn)檢驗(yàn)，但若有錯誤歡迎指正。如果對你有幫助，那就點(diǎn)個贊唄。逃。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83817.html
摘要：使用構(gòu)建的項(xiàng)目，的配置文件是分散在很多地方的，而我們需要修改的是，修改兩處的代碼在開頭引入，后面的那里需要其他代碼使用，如果是自行下載的如果使用安裝的增加一個其他代碼這樣就可以正確的使用了，比如我要引入，我們在的入口文件開頭加入使用這樣就 使用vue-cli構(gòu)建的vue項(xiàng)目，webpack的配置文件是分散在很多地方的，而我們需要修改的是build/webpack.base.conf.j...
摘要：神一樣的存在。所以呢，就利用兩天時間，參考了一些他人的文章，查閱了一些官方的配置，就在此先稍微記錄一下。這份配置解析是基于最新版本的。不過，我非常建議，先別看我的文章，自己一句一句的通讀一遍。和中的配置含義相似。 webpack--神一樣的存在。無論寫了多少次，再次相見，仍是初見。有的時候開發(fā)vue項(xiàng)目，對尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的東西，真的很不想折...
摘要：和類似的預(yù)處理器還有等。的用處非常多，包括給自動加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會成為預(yù)處理器的最終贏家。 webpack實(shí)戰(zhàn) 查看所有文檔頁面：全棧開發(fā)，獲取更多信息?？祚R加鞭，加班加點(diǎn)，終于把這個文檔整理出來了，順便深入地學(xué)習(xí)一番，鞏固知識，就是太累人，影響睡眠時間和質(zhì)量。極客就是想要把事情做到極致，開始了就必須到達(dá)終點(diǎn)。 原文鏈接：webpack實(shí)戰(zhàn)，原...
摘要：最近用了一個月的時間快速開發(fā)了一套管理系統(tǒng)，前后端分離的開發(fā)模式，前端采用的技術(shù)路線，頁面是第三方框架。下面總結(jié)一下我在開發(fā)工程中遇到的一些問題。比如我需要一個彈框插件，而上頁沒注冊。 最近用了一個月的時間快速開發(fā)了一套管理系統(tǒng)，前后端分離的開發(fā)模式，前端采用vue-cli+webpack的技術(shù)路線，頁面UI是第三方bootstrap框架。下面總結(jié)一下我在開發(fā)工程中遇到的一些問題。1....
閱讀 2598·2023-04-25 17:37
閱讀 1263·2021-11-24 10:29
閱讀 3791·2021-09-09 11:57
閱讀 772·2021-08-10 09:41
閱讀 2305·2019-08-30 15:55
閱讀 2875·2019-08-30 15:54
閱讀 2018·2019-08-30 15:53
閱讀 967·2019-08-30 15:43
