vue项目中引入jQuery或zepto的方法

       虽然在使用vue进行项目开发的时候不推荐对DOM进行操作,但是在有些时候还是避免不了的,这样有时候我们就需要引入jQuery或者zepto以便实现特殊功能的开发。

       下面就对如何在vue项目引入jquery和zepto进行相关的总结,使用的是vue-cli搭建的项目,推荐使用zepto更加方便。

        一、引入jQuery

            1. npm install jquery --save

            2. 在main.js文件中加入 import $ from 'jquery'

            3. 修改webpack.base.conf.js文件 

                引入webpack

                    var webpack = require('webpack')

                在导出对象module.export对象的最后添加

                    plugins: [

                        new webpack.optimize.CommonsChunkPlugin('common.js'),

                        new webpack.ProvidePlugin({

                                jQuery: "jquery",

                                $: "jquery"

                         })

                    ]

            vue项目中引入jQuery或zepto的方法_第1张图片

            vue项目中引入jQuery或zepto的方法_第2张图片


       二、引入zepto

                1. 使用npm install n-zepto --save

                2. 在mian.js中引入 impot $ from 'n-zepto'

                这样我们就可以在vue项目中使用$进行相关操作了,但是需要注意的是此时只能使用zepto的一些核心模块的方法。

                例如: 此时不能使用$.animate()方法,如果想要使用动画效果,需要在main.js中引入对应的模块

                        import '../static/js/fx.js  

                  具体的使用方法请查看zepto官网 http://www.zeptojs.cn/

                vue项目中引入jQuery或zepto的方法_第3张图片

你可能感兴趣的:(vue,jquery,zepto,Vue)