vue项目中引入jQuery或zepto的方法
虽然在使用vue进行项目开发的时候不推荐对DOM进行操作,但是在有些时候还是避免不了的,这样有时候我们就需要引入jQuery或者zepto以便实现特殊功能的开发。 下面就对如何在vue项目引入jquery和zepto进行相关的总结,使用的是vue-cli搭建的项目,推荐使用zepto更加方便。 一、引入jQuery 1. npm ins
虽然在使用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"
})
]
二、引入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/
更多推荐
所有评论(0)