import中@符意思
import Hello from '@/components/Hello'
vue
模板的代碼,裏面都有,這是
webpack
的路徑別名,相關定義在這裏webpack模版配置 文件如下:
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 這個目錄
vue中的import和Export的含義
是用了webpackage實現模塊化,import是導入,export是導出。
impor 如下是引用哪些類,這個概念很好理解,有過語言基礎的也很容易理解,如下所示:
export可以導出多個組件,export default 只可導出一個組件,例如
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
對應的導入
//demo2.js
import { str, f } from 'demo1'
export default 只能導出一個默認模塊,這個模塊可以匿名,例如:
//demo1.js
export default {
a: 'hello',
b: 'world'
}
對應的導入爲:
//demo2.js
import obj from 'demo1'
引入時,這個模塊可以任意取名,如obj,而有不用大括號括
import什麼情況下,要用{}的方式引入,什麼情況下,只需要一個變量就行。
(1) 使用export拋出的變量需要用{}進行import:
//a.js
export function getList(){};
//b.js
import { getList } from ‘./a.js’;
而使用Export default 只需要一個名字就行
//a.js
var obj = { name: ‘zhazhahui’ };
export default obj;
//b.js
import aaa from ‘./a.js’;
console.log(aaa.name);// ‘zhazhahui’;
- 切記,一個js文件中,只能有一個export default;
但是,一個js文件中,可以有多個export。