學習的原因還是起源於大牛github專案的部落格原始碼，看得我一頭霧水...

import Vue from 'vue';
import App from './App';
import router from './route';
import axios from 'axios';
import './less/index';

於是趕快上了阮一峰大牛的《ES6標準入門》這輛車，學習了：
1.專案為什麼要模組化？ 2.ES6模組與CommonJS和AMD模組載入的不同。 3.export命令 4.import命令 5.模組的整體載入
　　get到很多的新姿勢，然而並不能解釋import Vue from vue

解釋程式碼之前，先來看我的專案文件（這5行程式碼位於main.js中）：

那麼現在我對上述程式碼一一作出解釋：

import Vue from 'vue';

其實最完整的寫法是：

import Vue from "../node_modules/vue/dist/vue.js";

意思是：
　　因為main.js是在src檔案中，所以../向前一級相對目錄查詢node_modules，再依次尋找後面的檔案。

檔案找到了，那麼檔案內是否存在Vue呢？

　　事實證明，Vue是存在於vue.js中的。

下面解釋第二條程式碼：

import App from './App';

完整的寫法是

import App from './App.vue';

顧名思義，這句程式碼的意思就是引入我們寫好的.vue檔案。（.vue檔案是vue框架的單檔案元件。）

下面解釋第三條程式碼：

import router from './route';

完整的寫法是

import router from './route.js';

顧名思義，這句程式碼的意思就是引入和main.js同級目錄下的route.js檔案。

下面解釋第四條程式碼：

import axios from 'axios';
 

完整意思是：

import axios from '..\node_modules\axios\dist\axios.js';

和引入vue檔案是一樣的原理，都是從node_modules中載入相應名稱的模組。

　　事實證明，axios.js檔案中存在axios。

下面解釋第五條程式碼：

import './less/index';

完整意思是：

import './less/index.less';

查詢成功：

個人總結：
1.import...from...的from命令後面可以跟很多路徑格式，若只給出vue，axios這樣的包名，則會自動到node_modules中載入；若給出相對路徑及檔案字首，則到指定位置尋找。
2.可以載入各種各樣的檔案：.js、.vue、.less等等。
3.可以省略掉from直接引入。
吐槽：
　　ES6的import...from...指令挺神奇，不需要指明檔案字尾，這樣很方便快捷，新手需要一定的耐心去研究，否則是真心看不懂。

作者：趁你還年輕233
連結：https://www.jianshu.com/p/c0be35475e54
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。