• vue中import和require的用法


    其实用了这么久的vue,里面有很多东西都没有去细细整理分析,今天就整理一下

    • Import(模块、文件)引入方式

      1.引入js文件

        在用的那一页,引入文件

        Import tools from ‘./tools.js’

        相应的js文件,必须暴露出来

      2.引入组件

        Import Hello from ‘./components/hello’

      3.引入外部组件

        npm install --save axios

        npm install mint-ui -S

        //引入全部组件

        import Vue from ‘vue’

        import Mint from ‘mint-ui’

        Vue.use(Mint)

        //按需引入部分组件

        Import {Cell,Checklist} from ‘minu-ui’

        Vue.component(Cell.name,Cell)

        Vue.component(Checklist.name,Checklist)

      4.引入外部js插件

        Import cookies from ‘js-cookie’

        以上来自:https://blog.csdn.net/weixin_38930535/article/details/80177445

    • require.js的加载

      require的使用非常简单,它相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数……

    再把require的结果赋值给某个变量,相当于把require和module.exports进行平行空间的位置重叠

      优点:

        1)实现js文件的异步加载,避免网页失去响应;

        2)管理模块之间的依赖性,便于代码的编写和维护。

      引入:

        require('./a')(); // a模块是一个函数,立即执行a模块函数

        var data = require('./a').data; // a模块导出的是一个对象

        var a = require('./a')[0]; // a模块导出的是一个数组

        在vue的js引入图片,就需要使用require(“路径”)进来

      注:

        从理解上,require是赋值过程,import是解构过程,当然,require也可以将结果解构赋值给一组变量,但是import在遇到default时,和require则完全不同:

        var $ = require('jquery');

        import $ from 'jquery'

        是完全不同的两种概念。

        引自:https://blog.csdn.net/Deft_MKJing/article/details/80388770

      require和import分别使用在:

    • require 是赋值过程并且是运行时才执行,也就是异步加载。
    • require可以理解为一个全局方法,因为它是一个方法所以意味着可以在任何地方执行。
    • import 是解构过程并且是编译时执行。
    • import必须写在文件的顶部。

      require和import的优缺点比较:

      require的性能相对于import稍低,因为require是在运行时才引入模块并且还赋值给某个变量,而import只需要依据import中的接口在编译时引入指定模块所以性能稍高。

  • 相关阅读:
    svn使用总结
    捕获JS 错误日志
    致敬 54岁的刘德华
    Mac 下 命令收藏
    坑人的七牛CDN
    【No.1】监控Linux性能25个命令行工具
    PAC 自动代理
    jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件
    Squid 操作实践
    ntpdate[16603]: the NTP socket is in use
  • 原文地址:https://www.cnblogs.com/zhilu/p/13780608.html
Copyright © 2020-2023  润新知