在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>

注意一下的就是在swiper.js中需要改一下代碼，在最后面改成用export導出Swiper,並且代碼原有的amd格式的導出需要注釋掉