Vue、uni-app轻松引入Jquery，打造功能丰富的H5和小程序应用

2023-09-20 23:52:03

在现代web开发中，Vue和uni-app作为两个备受欢迎的前端框架，凭借其出色的性能和易用性，被广泛应用于构建H5和小程序应用。Jquery作为一款老牌且强大的javascript库，以其丰富的功能和灵活的应用而闻名。本文将详细介绍如何在Vue和uni-app中引入Jquery，让开发者能够轻松地将其集成到项目中，打造功能丰富、用户体验良好的应用。

一、Vue中引入Jquery

1. 安装Jquery

首先，我们需要在项目中安装Jquery。我们可以使用npm或yarn包管理器来安装Jquery。

# 使用npm安装Jquery
npm install jquery

# 使用yarn安装Jquery
yarn add jquery

2. 在main.js中引入Jquery

安装完成后，我们需要在main.js文件中引入Jquery。

// main.js

// 引入Jquery
import $ from 'jquery';

// 将Jquery挂载到window对象上，供全局使用
window.$ = $;

3. 在页面中使用Jquery

引入Jquery后，我们可以在页面中使用Jquery了。

<script>
  $(function() {
    // 在页面加载完成后执行Jquery代码
    $('h1').click(function() {
      alert('Hello Jquery!');
    });
  });
</script>

二、uni-app中引入Jquery

1. h5模式

在uni-app的h5模式下，我们可以通过在main.js文件中引入Jquery来使用Jquery。

// main.js

// 引入Jquery
import $ from 'jquery';

// 将Jquery挂载到window对象上，供全局使用
window.$ = $;

2. App模式

在uni-app的App模式下，我们需要在app.js文件中引入Jquery。

// app.js

// 引入Jquery
import $ from 'jquery';

// 将Jquery挂载到uni.$全局变量上，供全局使用
uni.$ = $;

3. 在页面中使用Jquery

在uni-app中，我们可以在页面中使用Jquery。

<script>
  $(function() {
    // 在页面加载完成后执行Jquery代码
    $('h1').click(function() {
      uni.showToast({
        title: 'Hello Jquery!',
        icon: 'success'
      });
    });
  });
</script>