Vue中export和export default的區別和用法

Vue是通過webpack實現的模塊化，因此可以使用import來引入模塊，例如：

1.  
   import Vue from 'vue'
    
   import Router from 'vue-router'
    
   import util from '@assets/js/util'

    

此外，你還可以在 bulid/webpack.base.conf.js 文件中修改相關配置：

1.  
   resole:{
    
   extensions:['.js','.vue','.json'],
    
   alias:{
    
   'vue$':'vue/dist/vue.esm.js',
    
   '@':resolve('src'),
    
   }
    
    
    
   },

    

意思是，你的模塊可以省略 ".js"，".vue"，“.json” 后綴，weebpack 會在之后自動添加上；可以用 "@" 符號代替 "src" 字符串等。

 

　　export 用來導出模塊，Vue 的單文件組件通常需要導出一個對象，這個對象是 Vue 實例的選項對象，以便於在其它地方可以使用 import 引入。而 new Vue() 相當於一個構造函數，在入口文件 main.js 構造根組件的同時，如果根組件還包含其它子組件，那么 Vue 會通過引入的選項對象構造其對應的 Vue 實例，最終形成一棵組件樹。

　　export 和export default 的區別在於：export 可以導出多個命名模塊，例如：

1.  
   //demo1.js
    
   export const str = 'hello world'
    
    
    
   export function f(a){
    
   return a+1
    
   }

    

對應的引入方式：

1.  
   //demo2.js
    
   import { str, f } from 'demo1'

    

　export default 只能導出一個默認模塊，這個模塊可以匿名，例如：

1.  
   //demo1.js
    
   export default {
    
   a: 'hello',
    
   b: 'world'
    
   }

    

　對應的引入方式：

1.  
   //demo2.js
    
   import obj from 'demo1'

    

切記，一個js文件中，只能有一個export default； 
但是，一個js文件中，可以有多個export。

原文地址：https://www.cnblogs.com/blog-cxj2017522/p/8562536.html

較好的參考文檔：https://blog.csdn.net/Deft_MKJing/article/details/80388770