Vue uni-app以H5模式引入Jquery配置教程_vue.js_

Vue配置Jquery

• 安装Jquery

 npm install jquery --save or yarn add jquery 

• main.js中引入jquery，供全局使用

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

• 在页面中使用，运行如下代码，在控制台就可以查看引入结果

uni-app配置Jquery

• h5模式

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

项目文件配置图

• 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 命令安装 ）如下：

手机模拟器运行代码后，可以看到控制台成功打印了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 

总结

Vue模式与uni-app的h5模式是一样的，唯一不同的是uni-app中APP-PLUS模式，需要借助renderJS或者WSX第三方内置组件，才能更有效的使用JQuery。

特别注意，就是某些第三方组件依赖JQuery时，在renderJS引入，需要注意引入顺序。第一个引入JQuery、第二个在引入依赖JQuery的第三方组件。

当然了，使用JQuery一般都是特殊情况下，如果有空闲时间，还是需要写成组件时最好不过的了。

以上就是Vue uni-app以H5模式引入Jquery配置教程的详细内容，更多关于Vue uni-app配置Jquery的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！