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。