vue中引入jQuery
用vue开发时在某些情况下需要用到操作DOM,大家都知道vue是数据驱动的,但是在特殊的情况下又要使用操作DOM的,如果原生的js会影响开发的速度,那么怎么在vue中引入并操作DOM呢?其实很简单;
1、下载jQuery
npm install jquery --save
//如果你更换了淘宝镜像,可以使用cnpm来安装,速度更快
cnpm install jquery --save
2、在vue项目中找到build下的webpack.base.conf文件
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require('webpack')//新加webpack
3、在webpack.base.conf文件中的module.exports = {}中新加plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
4、在对应的组件中引入
import $j from 'jquery'
mounted () {
console.log($j)
},
这样就能在vue中使用jquery的插件了
这是第一种方法,还有一种方法
还是在同一个文件下,同一个对象中着到resolve对象里面的alias中,加入’jquery’: path.resolve(__dirname, ‘…/node_modules/jquery/src/jquery’),用法和上面的一样
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery'),//新加
}
},