11.22 Vue導入模塊import xxx from '@

1、ES6 模塊主要有兩個功能：export 和 import

export：用戶對外輸出本模塊（一個文件可以理解為一個模塊，比如 aaa.js bbb.js）變量的接口 。

import：用於在一個模塊中加載另一個含有 export 接口的模塊（也就是這個 js 文件一定要含有 export ）。

而我們在使用 import 導入一個模塊的時候通常這樣使用：

import util from '@/libs/util'

那麼這個 @ 到底是個什麼意思呢？

2、webpack.base.conf.js 文件有如下代碼

resolve: {
 // 自動補全的擴展名
 extensions: ['.js', '.vue', '.json'],
 // 默認路徑代理
 // 例如 import Vue from 'vue'，會自動到 'vue/dist/vue.common.js'中尋找
 alias: {
 '@': resolve('src'),
 '@config': resolve('config'),
 'vue$': 'vue/dist/vue.common.js'
 }
}

是不是已經很明確了呢？ @ 等價於 src，舉一反三，也支持自定義的。

閱讀更多 編程珠璣 的文章

關鍵字: export util dist