vue项目中引入jquery和jqueryui

本文详细介绍了如何在基于Vue 2.0的项目中引入并使用jQuery和jQuery UI,包括修改package.json,安装依赖,配置webpack以及在main.js中正确引入库和样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue项目中引入jquery和jqueryui

之前一直不喜欢在vue里面引入jq的东西,因为和vue的理念是背道而驰的,但是后来因为项目需求难以解决,不得不引入入jquery去解决,才感叹jq还是很强大的啊

真香嘻嘻

我的项目是基于vue 2.0的。3.0的可能会有些不同,但是应该问题不大了

首先,我们得在package.json文件中的dependencies添加

    "jquery": "^3.4.1",
    "jquery-ui-dist": "^1.12.1",

然后我们npm install一下,安装jq和jqui

接着我们修改webpack.base.conf.js文件
在上方添加

var webpack = require("webpack")

然后在module.exports里面添加

//在这里插入代码片
plugins: [
    
    new webpack.ProvidePlugin({
    jQuery: "jquery",
    jquery: "jquery",
    $: "jquery",
    "windows.jQuery":"jquery"
    })
    ],

去到入口文件main.js

//引入jq库
// import $ from 'jquery'
// Vue.use($)
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.css'

一定要引入css,不然没有办法使用
jq在这里可以不用引入了
不然会报错
因为在webpack已经设置过了

重新npm run dev一下
大功告成

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值