Vue配置Jquery

???npm?install?jquery?--save???or???yarn add jquery

import Vue from 'vue'import jquery from "jquery";Vue.prototype.$ = jquery;

<template>  <view class="content">    <image class="logo" src="/static/logo.png"></image>    <view class="text-area">      <text class="title">{{title}}</text>    </view>  </view></template><script>  export default {    data() {      return {        title: 'Hello'      }    },    mounted() {      console.log(this.$, "======引入Jquery成功=====");    },????methods:?{    }  }</script>

uni-app配置Jquery

uni-app的h5模式與Vue的模式基本一樣，也可以直接引入文件的使用，具體使用如下：

<template>  <view class="content">    <image class="logo" src="/static/logo.png"></image>    <view class="text-area">      <text class="title">{{title}}</text>    </view>  </view></template><script>  import $ from "../../js_sdk/jquery-3.6.0.min.js";  export default {    data() {      return {        title: 'Hello'      }    },    mounted() {      console.log($, "======uni-app的H5模式引入JQuery=====");    },    methods: {    }  }</script><style>  .content {    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;  }  .logo {    height: 200rpx;    width: 200rpx;    margin-top: 200rpx;    margin-left: auto;    margin-right: auto;    margin-bottom: 50rpx;  }  .text-area {    display: flex;    justify-content: center;  }  .title {    font-size: 36rpx;    color: #8f8f94;  }</style>

項(xiàng)目文件配置圖

app-plus模式，JQuery是不能直接被識(shí)別的，需要通過(guò)uni-app 提供的renderJS 模式 來(lái)使用，也就是說(shuō)，如果想使用JQuery在app模式，需要邏輯層與視圖層交互才可以，如果還是按照H5模式下使用，會(huì)報(bào)如下錯(cuò)誤:

function (e) {if (!e.document) throw new Error("jQuery requires a window with a document");return t(e);}, ======uni-app的H5模式引入JQuery===== at pages/index/index.vue:19

采用renderJS模式，jquery采用是本地文件引入的方式（也可以通過(guò)npm/yarn 命令安裝 ）如下：

<template>  <view class="content">    <image class="logo" src="/static/logo.png"></image>    <view class="text-area">      <text class="title">{{title}}</text>    </view>  </view></template><script>    export default {    data() {      return {        title: 'Hello'      }    },  }</script><script lang="renderjs" module="turnjs">  import $ from "../../js_sdk/jquery-3.6.0.min.js";  export default {    mounted(){      console.log($, "======uni-app的App模式引入JQuery成功=====");    }  }</script><style>  .content {    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;  }  .logo {    height: 200rpx;    width: 200rpx;    margin-top: 200rpx;    margin-left: auto;    margin-right: auto;    margin-bottom: 50rpx;  }  .text-area {    display: flex;    justify-content: center;  }  .title {    font-size: 36rpx;    color: #8f8f94;  }</style>

手機(jī)模擬器運(yùn)行代碼后，可以看到控制臺(tái)成功打印了JQuery對(duì)象。

function S(e, t) {return new S.fn.init(e, t);}, ======uni-app的App模式引入JQuery成功===== at pages/index/index.vue:4 at app-view.js:1076

總結(jié)

??? Vue模式與uni-app的h5模式是一樣的，唯一不同的是uni-app中APP-PLUS模式，需要借助renderJS或者WSX第三方內(nèi)置組件，才能更有效的使用JQuery。

????特別注意，就是某些第三方組件依賴JQuery時(shí)，在renderJS引入，需要注意引入順序。第一個(gè)引入JQuery、第二個(gè)在引入依賴JQuery的第三方組件。

<script lang="renderjs" module="turnjs">  import "../../js_sdk/jquery-3.6.0.min.js";  import xxx from '@/utils/turn.js';  export default {    XXXX  }</script>

????當(dāng)然了，使用JQuery一般都是特殊情況下，如果有空閑時(shí)間，還是需要寫(xiě)成組件時(shí)最好不過(guò)的了。

微信搜索，關(guān)注本號(hào)“天宇文創(chuàng)意樂(lè)派”(ID:gh_cc865e4c536b)