1. 程式人生 > 實用技巧 >vue中import和require的用法

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中的介面在編譯時引入指定模組所以效能稍高。