zoukankan      html  css  js  c++  java
  • 在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格式的导出需要注释掉

     

     

     

  • 相关阅读:
    CentOS7安装(三)- 配置阿里云yum源
    OSQA的配置
    MySQL学习 (三) Limit-Distinct-Union
    MySQL学习(二)-字段类型及约束
    MySQL学习(一)-基本知识
    Python闭包
    软件测试面试常考点
    人生感悟
    常用的Linux命令
    细说php一些常见的知识点
  • 原文地址:https://www.cnblogs.com/GainLoss/p/6743853.html
Copyright © 2011-2022 走看看