Vuejs .vue里怎麼引入第三方js和css呢比如jquery的輪播插件 要引入js和css？

---

要看你怎麼用vue，如果用webpack的話直接在需要用外部js css的vue組件里引入就可以了。

&
&
&
&
&Slide 1& &Slide 2& &Slide 3& & &
&&

&
&& &&

&
&& & & &
&
import swiper from "path/to/swiper.min.js"
export default {
data () {
return {}
},
ready () {
this.$nextTick(()=&>{
let mySwiper = new Swiper (".swiper-container", {
direction: "vertical",
loop: true,

// 如果需要分頁器
pagination: ".swiper-pagination",

// 如果需要前進後退按鈕
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",

// 如果需要滾動條
scrollbar: ".swiper-scrollbar",
})
})
}
}
&
& @import "path/to/swiper.min.css";
.swiper-container {
width: 600px;
height: 300px;
}
&

最後，一般情況也用不著引入一個大的swiper，前幾天寫了一個vue實現的輪播組件，支持移動端

只需要

npm install vue-slide


import進來就能用啦

上鏈接 GitHub - hilongjw/vue-slide: A lightweight slide component for vue

ps：歡迎加群 Vuejs 364912432

---

iframe

---

GitHub - surmon-china/vue-awesome-swiper: Swiper(slide) component for Vue.js(1.x ~ 2.x)

npm install vue-awesome-swiper


---

3. webpack external 引入外部dist js

2. 一般的三方js庫dist 代碼都是支持amd和cmd引入的，直接require和import就行

1. css引入可以在css預處理模塊sass/less引入，或者在組件里引入

0. 找到源碼，從源碼引入

反正用了打包工具，代碼最後都是要打包的，但是依賴太多也是件麻煩事情，我的用法是如果需要做源碼維護的選0，穩定版本選2，輕量開發選3

---

我的做法是在 index.html 里用 script 標籤引入（這個地方我會另外用 gulp 處理壓縮優化），然後在 Vue 中我會封裝這些外部類庫為 Vue 組件，然後在 Vue 里按照正常組件的用法使用。

這樣等把第三方類庫改用 Vue 實現後，也不影響其它代碼。

---

我猜是想問需要裝 css-loader這個插件，才可以import吧

---

我也遇到了這個問題，我採用了第一個回答者的方法，css能載入上，但是js沒有效果。

我做了一點小小的修改，解決了這個問題。主要看mounted寫法

&
import swiper from "../lib/swiper-3.4.0.jquery.min";
export default {
name:"focusimg",
mounted:function(){
this.$nextTick(function(){
/* 焦點圖 */
var mySwiper = new Swiper (".swiper-container", {
direction: "horizontal",
loop: true,

// 如果需要分頁器
pagination: ".swiper-pagination",

// 如果需要前進後退按鈕
/* nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev", */
grabCursor: true,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500
});
})
}
}
&
& @import "../css/swiper-3.4.0.min.css";
&

---

你可以把vue當作內褲來用

---

推薦閱讀：