vue项目中引入jquery和jqueryui

最新推荐文章于 2024-09-19 21:38:15 发布

我不喜欢打代码

最新推荐文章于 2024-09-19 21:38:15 发布

阅读量2k

点赞数

分类专栏： vue 文章标签：前端 vue jquery

本文链接：https://blog.csdn.net/weixin_37820964/article/details/102968566

版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何在基于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一下
大功告成