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中的接口在編譯時引入指定模塊所以性能稍高。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM