如何在 Vue-cli3.0 中使用 JQuery

最新推荐文章于 2023-09-13 09:38:41 发布

置顶玩摄影的码农

最新推荐文章于 2023-09-13 09:38:41 发布

阅读量790

点赞数

CC 4.0 BY-SA版权

分类专栏：实践文章标签： Vue vue-cli3 jquery

本文链接：https://blog.youkuaiyun.com/qq_41897702/article/details/89072849

实践专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue项目中引入并使用jQuery实现轮播图功能。通过具体步骤展示了如何配置项目结构、安装jQuery、引入jQuery静态文件及设置Webpack以使Vue能够识别并使用jQuery。

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

这里我们以 jQuery 的轮播图案例来实践一下

首先是 Vue-cli3.0 构建出来的项目结构图，vue.config.js 是后面要讲到的，这里先创建。
在这里插入图片描述
对于 jQuery 相关的静态文件，我们将它们放进 src 中的 assets 文件夹里面，这里面是放静态文件的，在里面将其分类。

接下来便是如何在 vue 中去引用，首先需要安装一下 jQuery ，然后将html文件引入 index.vue 中

npm  i  jquery

在这里插入图片描述
引入 css样式

关键的一步
引入 $ 以便 vue 能识别 jQuery （这一步要配置一下在 vue.confige.js 中）

const webpack = require("webpack")
module.exports = {
    configureWebpack: {

           plugins: [
        
              new webpack.ProvidePlugin({
        
                $:"jquery",
        
                jQuery:"jquery",
        
                "windows.jQuery":"jquery"
        
              })
        
            ]
        
        }
   
}

在这里插入图片描述

大功告成！！