Vue小白開始學習

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。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章