1.全局变量
在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:
entry.js
window._ = require('lodash')
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..')
}
}
这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.
2.在每个文件中引入
另一个简单的方式是在每一个需要该库的文件中导入:
MyComponent.vue
import _ from 'lodash'
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..')
}
}
一 .引入swiper(全局，局部)
方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet"><script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>12组件中可以直接使用的swiper了
_initSwiper() { const container = this.$refs.swiper const config = {effect: 'coverflow',
slidesPerView: 'auto',
centeredSlides: true,
initialSlide: this.activeIndex,
loop: true,
autoplay: 1000,
speed: 1000,
coverflow: {
rotate: 0,
stretch: -30,
depth: 100,
modifier: 0.7,
slideShadows: false,
},
} this.mySwiper = new Swiper(container, config)
}1234567891011121314151617181920
2.方法二：main.js 中
import '../node_modules/swiper/dist/css/swiper.min.css'import 'swiper'12执行上面的_initSwiper()的方法 即可
3.方法三：局部的引入的，有时只想的单个组件中使用某一个的库，方法如下
<section ref="swiper" class="swiper-container"><div class="swiper-wrapper">
<div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"></div>
</div></section><script>
let swiperAsync = import('swiper') //引入的swiper.js（node_modules）的方法
export default {
data(){ return {
colorList: ['red', 'yellow', 'gray', 'pink']
}
},
methods: {
async _initSwiper() { let Swiper = await swiperAsync//异步加载的
const container = this.$refs.swiper//ref='swiper'
const config = { //swiper的参数配置
effect: 'coverflow',
slidesPerView: 'auto',
centeredSlides: true,
initialSlide: this.activeIndex,
loop: true,
autoplay: 1000,
speed: 1000,
coverflow: {
rotate: 0,
stretch: -30,
depth: 100,
modifier: 0.7,
slideShadows: false,
},
} this.mySwiper = new Swiper(container, config)
},
},
mounted(){ this._initSwiper()
}
}</script><style lang="scss" scoped>
/*@import '../assets/styles/swiper.min.css'!*静态资源的文件*!*/
@import '../../node_modules/swiper/dist/css/swiper.min.css'</style>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
二 引入的jquery的方法
全局的方法
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>1组件中可以直接使用的 ‘$’的方法
局部的方法：
npm install jquery -D1需要使用的组件中引入
import $ from 'jquery'1 var utils = {a: 'hello',
b: function(){
console.log("hello")
}
}
export default utils
在你要引入的组件中：
import Utils from utils.js // utils.js这个是你要引入的那个js文件
然后就可以这样调用了:
Utils.b()
