Vue import、export及export default示例詳解，附帶如何實現全局調用

最近在看vue，整理一下vue的知識點，在Vue中，有兩種導入導出方式，一個是部分導入導出，一個是全部導入導出，現在做一下簡單區別

一、部分導入導出

部分導出和部分導入的優勢，當資源比較大時建使用部分導出，這樣一來使用者可以使用部分導入來減少資源體積，比如element-ui官方的就推薦使用部分導入來減少項目體積，因為element-ui是一個十分龐大的框架，如果我們只用到其中的一部分組件， 那么只將用到的組件導入就可以了。

1、部分導出的寫法

export function helloWorld(){ 2  conselo.log("Hello World"); 3 } 4 export function test(){ 5  conselo.log("this's test function"); 6 }

2、部分導入的另一種寫法

var helloWorld = function() { 2  conselo.log("Hello World"); 3 } 4 var test = function() { 5  conselo.log("this's test function"); 6 } 7 export helloWorld； 8 export test；

3、部分導入，只需要引入需要的資源

import { helloWorld } from "./utils.js" //只導入utils.js中的helloWorld方法
helloWorld(); //執行utils.js中的helloWorld方法

4、部分導入，引入全部的資源，比如如果我們需要utils.js中的全部資源則可以全部導入

import * as utils from "./utils.js" //導入全部的資源，utils為別名，在調用時使用
utils.helloWorld(); //執行utils.js中的helloWorld方法
utils.test(); //執行utils.js中的test方法

二、全部導入導出

如果使用全部導出，那么使用者在導入時則必須全部導入。

1、全部導出

var helloWorld=function(){  2  conselo.log("Hello World");  3 }  4 var test=function(){  5  conselo.log("this's test function");  6 }  7 export default {  8  helloWorld,  9  test 10 }

2、全部導入

當用export default 導出的時候，隨便起一個變量名導入即可

import utils from "./utils.js"
utils.helloWorld(); 3 utils.test();

備注：

1、當import 引入依賴包的時候，不需要相對路徑，直接引入包名即可，形如：import axios from ‘axios’;

2、一個js文件中可以有多個export，但只能有一個export default

三、導入之后，兩種調用方式

1、在當前頁面

在上面的例子中，都是在當前頁面調用，直接http.get或http.post就行，在此不再贅述

2、全局變量

更多的是全局變量，比如封裝的get或post請求方法等

import http from './utils/http'; 2 // 掛載至全局
Vue.prototype.http = http

引入之后，借助Vue的prototype屬性將變量掛載到全局中，這樣在任何.vue頁面中，直接用this.http.get或this.http.post即可，別忘了this，注意this作用域

博文參考：

1、Vue export import 導入導出的多種方式與區別介紹

2、關於VUE中 import 、 export 和 export default 的注意問題