## 一、概述 假設我們寫了一個Vue 單頁面組件 A 文件，而在另一個文件 B 里面需要用到它，那么就要用 ES6 的 import/export 來實現導入導出；在文件 A 中定義輸出接口 export ，在文件 B 中引入 import ，然后再生成一個 Vue 實例 new Vue (**)，把引入的組件用起來，這樣就可以復用組件 A 去配合文件 B 生成 html 頁面了。所以在復用組件的時候，export 和 new Vue 缺一不可。 Vue 是通過 webpack 實現的模塊化，因此可以使用 import 來引入模塊，例如： ``` import Vue from 'vue' import Dashboard from '@/pages/Dashboard' ``` 你還可以在 bulid/webpack.base.conf.js 文件中修改相關配置：  意思是，你的模塊可以省略 ".js"，".vue"，“.json” 后綴，weebpack 會在之后自動添加上；可以用 "@" 符號代替 "src" 字符串等，用vue字符串代替完整的vue庫文件。 ## 二、導出 export 用來導出模塊，Vue 的單文件組件通常需要導出一個對象，這個對象是 Vue 實例的選項對象，以便于在其它地方可以使用 import 引入。而 new Vue() 相當于一個構造函數，在入口文件 main.js 構造根組件的同時，如果根組件還包含其它子組件，那么 Vue 會通過引入的選項對象構造其對應的 Vue 實例，最終形成一棵組件樹。 export 和export default 的區別在于：一個文件中export 可以導出多個命名模塊，而export default 只能導出一個默認模塊，這個模塊可以匿名； ## 二、導入 1、引入第三方插件 ``` import echarts from 'echarts' ``` 2、引入工具類 ``` 第一種是引入單個方法 import {axiosfetch} from './util'; 下面是寫法，需要export導出 export function axiosfetch(options) { } ``` ``` 第二種 導入成組的方法 import * as tools from './libs/tools' 其中tools.js中有多個export方法,把tools里所有export的方法導入 vue中怎么用呢？ Vue.prototype.$tools = tools 直接用 this.$tools.method調用就可以了 ``` 3、導入 css文件 ``` import 'iview/dist/styles/iview.css'; ``` 如果是在.vue文件中那么在外面套個style： ``` <style> @import './test.css'; </style> ``` 4、導入組件 ``` import name1 from './name1' import name2 from './name2' components:{ name1, name2, }, ``` 5、導入js ``` 比如你想給Arrary封一個屬性，首先需要新建一個prototype.js的文件 文件里 Array.prototype.max = function(){ return Math.max.apply({},this); } ``` 引入 ``` import './libs/prototype' 在main.js中引用那么在所有的組件都可以用 [].max(); ```