資訊專欄INFORMATION COLUMN
摘要：寫在前面日前，在學習使用開發新的項目。然而目前用實現的框架里面，尚未出現具有像一樣統治力的框架。最后這里只舉了和的例子，同理其他插件也是可用同樣的方法引入。雖以上皆經過實戰檢驗，但若有錯誤歡迎指正。
寫在前面
日前，在學習使用Vue2.0開發新的項目。然而目前用Vue實現的UI框架里面，尚未出現具有像bootstrap一樣統治力的框架。一番糾結后，老夫抄起家伙就是一梭...
那么問題來了，在Vue中如何引入jQuery和swiper呢？
經歷半天搜索、比對、嘗試之后，得出了下面的結論，單用 webpack 時設置同理。
引入jQuery這個問度娘就有很多方案，我這里選取的是將jQuery暴露到全局的方式，這樣就不用每個用到的地方都要import一次安裝 jQuery
npm i -S jQuery //等同于 npm install --save jQuery設置 webpack.config.js
var webpack = require("webpack")
const ProvidePlugin = new webpack.ProvidePlugin({//引入外部類庫
$: "jquery",
jQuery: "jquery",
});
module.exports = {
...
plugins: [
ProvidePlugin,
],
...
}
至此，可全局使用熟悉的$符號了。
更多辦法使用 exports-loader（按照官方例子實測，配置簡單成謎，然而無效，求指點）
設置 externals（詳情參考推薦答案）
普通 import（也就是接下來要說的辦法）
引入swiper插件本來設置externals后再在index.html中引用的辦法也是挺好的，但在我的項目中只有一個頁面用到，而且externals方式不知如何設置css（還望高人指點），故選擇普通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的例子，同理其他插件也是可用同樣的方法引入。雖以上皆經過實戰檢驗，但若有錯誤歡迎指正。如果對你有幫助，那就點個贊唄。逃。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83817.html
摘要：使用構建的項目，的配置文件是分散在很多地方的，而我們需要修改的是，修改兩處的代碼在開頭引入，后面的那里需要其他代碼使用，如果是自行下載的如果使用安裝的增加一個其他代碼這樣就可以正確的使用了，比如我要引入，我們在的入口文件開頭加入使用這樣就 使用vue-cli構建的vue項目，webpack的配置文件是分散在很多地方的，而我們需要修改的是build/webpack.base.conf.j...
摘要：神一樣的存在。所以呢，就利用兩天時間，參考了一些他人的文章，查閱了一些官方的配置，就在此先稍微記錄一下。這份配置解析是基于最新版本的。不過，我非常建議，先別看我的文章，自己一句一句的通讀一遍。和中的配置含義相似。 webpack--神一樣的存在。無論寫了多少次，再次相見，仍是初見。有的時候開發vue項目，對尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的東西，真的很不想折...
摘要：最近用了一個月的時間快速開發了一套管理系統，前后端分離的開發模式，前端采用的技術路線，頁面是第三方框架。下面總結一下我在開發工程中遇到的一些問題。比如我需要一個彈框插件，而上頁沒注冊。 最近用了一個月的時間快速開發了一套管理系統，前后端分離的開發模式，前端采用vue-cli+webpack的技術路線，頁面UI是第三方bootstrap框架。下面總結一下我在開發工程中遇到的一些問題。1....
閱讀 2508·2023-04-25 17:37
閱讀 1189·2021-11-24 10:29
閱讀 3696·2021-09-09 11:57
閱讀 692·2021-08-10 09:41
閱讀 2243·2019-08-30 15:55
閱讀 2811·2019-08-30 15:54
閱讀 1942·2019-08-30 15:53
閱讀 895·2019-08-30 15:43
