在vue-cli中引入外部插件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一.可以用npm下载的

现在以jquery为例子：

1 先在package.json中的dependencies中写入“jquery”:“^3.2.1”(jquery版本)

2 在npm中搜索jquery下载

3 在webpack.base.config.js加入，var webpack=require('webpack');在module.exports中加入

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

4 重新npm run dev

然后就已经加入jquery了

-------------------------------------进一步--------------------------------------------------------------

直接上个例子：https://github.com/GainLoss/MyVue/tree/master/vue-demo

二.直接引入的不能用npm下载的

在view.vue中引入swiper.css和swiper.js文件

在view.vue中的代码这样写：

<template>
...
</template>
<script>
import swiper from './swiper.js'
import common from '../common.vue'
export default {
data(){
return{
}
},
mounted:function(){
this.swippertab();
},
methods:{
swippertab(){
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30
});
},
}
}
</script>
<style scoped>
@import './swiper.css';
</style>