一，import（模組、檔案）引入方式1、引入第三方外掛

import echarts from 'echarts'

2、匯入 css檔案

import 'iview/dist/styles/iview.css';

如果是在.vue檔案中那麼在外面套個style

<style>

@import './test.css';

</style>

3、匯入元件

import name1 from './name1'

import name2 from './name2'

components:{

name1,

name2,

}

4、import '@…'的語句

@ 等價於 /src 這個目錄，避免寫麻煩又易錯的相對路徑

5、引入工具類

第一種是引入單個方法

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呼叫就可以了

說到這 export 和 export default 又有什麼區別呢？下面看下區別

先是 export

import {axiosfetch} from './util'; //需要加花括號 可以一次匯入多個也可以一次匯入一個，但都要加括號

如果是兩個方法

import {axiosfetch,post} from './util';

再是 export default

import axiosfetch from './util'; //不需要加大括號 只能一個一個匯入

二，export,import和export default的關係1、import引入檔案路徑

import引入一個依賴包，不需要相對路徑。如：import app from ‘app’;

import 引入一個自己寫的js檔案，是需要相對路徑的。如：import app from ‘./app.js’;

2、import引入檔案變數名

1、使用export丟擲的變數需要用{}進行import

//a.js

export const str = "blablabla~";

export function log(sth) {

return sth;

}

對應的匯入方式：

//b.js

import { str, log as _log } from 'a';

//也可以分開寫兩次，匯入的時候帶花括號。還可以用as重新命名

2、使用export default丟擲的變數，只需要自己起一個名字就行：

//a.js :

var obj = { name: ‘example’ };

export default obj;

//b.js:

import newNname from ‘./a.js’; //newNname 是自己隨便取的名字，這裡可以隨便命名

console.log(newNname .name); // example

總結

其中export和export default最大的區別就是export不限變數數 可以一直寫，而export default 只輸出一次 而且 export出的變數想要使用必須使用{}來盛放，而export default 不需要 只要import任意一個名字來接收物件即可。