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格式的导出需要注释掉

     

     

     

  • 相关阅读:
    如何使用xshell在阿里云服务器上安装tomcat
    如何使用Xshell连接阿里云服务器
    jQuery封装ajax的使用方法
    ES6新增语法
    数组坍塌原理
    JavaScript冒泡排序、选择排序、数组去重
    JS循环嵌套的执行原理
    分栏布局
    如何实现两列固定与一列自适应
    CSS过渡、动画及变形的基本属性与运用
  • 原文地址:https://www.cnblogs.com/GainLoss/p/6743853.html
Copyright © 2011-2022 走看看