uniapp引入模块化js文件和非模块化js文件的四种方式

 更新时间:2022年11月14日 14:24:22   作者:佛佛ง  
这篇文章主要介绍了uniapp引入模块化js文件和非模块化js文件的四种方式,本文结合实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

方式1:引入普通的js文件,如user.js

1.1、属性和方法都写在一个变量内部

const user={
    login:true,
    isLogin:function(data){
        console.log("展示用户登录信息")
    }
}
export default user;

 1.2、也可以单独写

function isLogin(data){
    console.log("展示用户登录信息")
}
function getMobile(data){
    console.log("22222222")
}
 
export default {
    isLogin,
    getMobile
}

  在.vue页面中引用:

<script>
    // 绝对路径,@指向项目根目录,在cli项目中@指向src目录
    import userfrom '@/common/user.js';
    // 相对路径
    import user from '../../common/user.js';
 
    export default {
        ...
        methods: {
            test(){
                user.isLogin()  //具体使用
            }
        }
    }
 
</script>

注意

  • js 文件不支持使用/开头的方式引入

方式2:把user.js放在入口文件main.js中,成为全局方法

import user from './common/user.js';
Vue.prototype.$user = user;

在.vue页面中引用:

<script>
    export default {
        ...
        methods: {
            test(){
                this.$user.isLogin()//具体使用
            }
        }
    }
</script>

方式3:引入第三方的模块化.js文件

如md5.js加密文件,可以放在common文件夹下,当成普通的.js文件引用即可,模块化的通过module.exports暴露出来成为一个对象:

var exports = createMethod();
if (COMMON_JS) {
    module.exports = exports;
} else {
    root.md5 = exports;
    if (AMD) {
        define(function () {
            return exports;
        });
    }
}

在.vue页面中引用: 

<script>
    import md5 from '../../common/md5.js';
    export default {
        ...
        methods: {
            test(){
                let sign = md5(getSignStr(arrKeys, arrValues)).toUpperCase();
            }
        }
    }
</script>

方式4:uniapp开发的H5,引入第三方的非模块化.js文件

如nomodule.js,就是纯js文件,没有module.exports暴露出来成为一个对象,这种放在common文件夹下,像上面那样引入会提示找不到,这时候应该把该nomodule.js放在static文件夹下,uniapp发行H5时static文件下的内容不编译,在并在入口.html文件中引入全局js,在.vue页面中直接引用就行

4.1、nomodule.js

function isNoModule(data){
    console.log("3333333")
}

4.2、 并在入口.html文件中引入全局js

<script charset="utf-8" src="<%= BASE_URL %>static/nomodule.js"></script>

4.3、在.vue页面中引用

<script>
    export default {
        ...
        methods: {
            test(){
                isNoModule();
            }
        }
    }
</script>

到此这篇关于uniapp引入模块化js文件和非模块化js文件的文章就介绍到这了,更多相关uniapp引入模块化js文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现上传图片添加水印

    vue实现上传图片添加水印

    这篇文章主要为大家详细介绍了vue实现上传图片添加水印,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue学习笔记进阶篇之vue-router安装及使用方法

    Vue学习笔记进阶篇之vue-router安装及使用方法

    本篇文章主要介绍了Vue学习笔记进阶篇之vue-router安装及使用方法,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • VUE前端实现防抖节流Lodash工具库举例详解

    VUE前端实现防抖节流Lodash工具库举例详解

    这篇文章主要介绍了Lodash库和自定义防抖、节流函数的使用方法,包括它们的定义、应用示例及应用场景文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • vue项目纯前端实现的模板打印功能示例代码

    vue项目纯前端实现的模板打印功能示例代码

    在Vue项目中,通过使用vue-print-nb插件,可以实现页面的打印功能,这篇文章主要介绍了vue项目纯前端实现的模板打印功能的相关资料,需要的朋友可以参考下
    2024-10-10
  • vuex直接修改state、commit和dispatch修改state的用法及区别说明

    vuex直接修改state、commit和dispatch修改state的用法及区别说明

    这篇文章主要介绍了vuex直接修改state、commit和dispatch修改state的用法及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue清空form对象的方法

    vue清空form对象的方法

    这篇文章主要介绍了vue清空form对象的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue图片懒加载之Vue-Lazyload的使用

    Vue图片懒加载之Vue-Lazyload的使用

    懒加载就是延时加载,即当需要用到的时候再去加载,本文主要介绍了Vue图片懒加载之Vue-Lazyload的使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • Vue3 中的  shallowReactive 详解

    Vue3 中的  shallowReactive 详解

    本文深入探讨了Vue3中新特性shallowReactive的使用和原理,shallowReactive是创建浅响应式对象的API,只对对象的第一层属性进行响应式转换,不对嵌套对象处理,有助于性能优化和状态管理,同时也指出了shallowReactive在使用中的注意事项
    2024-10-10
  • vue开发runtime core中的虚拟节点示例详解

    vue开发runtime core中的虚拟节点示例详解

    这篇文章主要为大家介绍了vue开发runtime core中的虚拟节点示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

    解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

    这篇文章主要介绍了解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论