學習的原因還是起源于大牛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和其他代碼是什么意思。還好，百度到三省吾身丶丶的hexo博客。幾句注釋就讓我柳暗花明。
解釋代碼之前，先來看我的項目文檔（這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等等。
可以不輸入后綴名既加載是因為這個原因：
webpack解析里的擴展配置:
resolve: {
extensions: ['.wasm', '.js', '.vue', '.json']
}
詳細資料可以看這里：https://webpack.js.org/configuration/resolve/#resolveextensions
3.可以省略掉from直接引入。**
吐槽：
ES6的import...from...指令挺神奇，不需要指明文件后綴，這樣很方便快捷，新手需要一定的耐心去研究，否則是真心看不懂。
希望這篇博客對大家有用！
努力成為優秀的會Nodejs的前端工程師！
期待和大家交流，共同進步，歡迎大家加入我創建的與前端開發密切相關的技術討論小組：
- SegmentFault技術圈:ES新規范語法糖
- SegmentFault專欄：趁你還年輕，做個優秀的前端工程師
- 知乎專欄：趁你還年輕，做個優秀的前端工程師
- Github博客: 趁你還年輕233的個人博客
- 前端開發QQ群：660634678
微信公眾號： 人獸鬼 / excellent_developers
努力成為優秀前端工程師！
