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