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