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
h5模式
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>
項目文件配置圖
APP-PLUS 模式
app-plus模式，JQuery是不能直接被識別的拾徙，需要通過uni-app 提供的renderJS 模式 來使用洲炊，也就是說，如果想使用JQuery在app模式尼啡，需要邏輯層與視圖層交互才可以暂衡，如果還是按照H5模式下使用，會報如下錯誤:
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采用是本地文件引入的方式（也可以通過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)行代碼后狂巢，可以看到控制臺成功打印了JQuery對象。
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時，在renderJS引入西雀，需要注意引入順序萨驶。第一個引入JQuery、第二個在引入依賴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一般都是特殊情況下，如果有空閑時間再悼，還是需要寫成組件時最好不過的了核畴。
微信搜索，關(guān)注本號“天宇文創(chuàng)意樂派”(ID:gh_cc865e4c536b)
