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