在vue-cli中引入外部插件

Z时代
2024-01-10
分类：综合

vue

一.可以用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>