Vue中导入文件import和导出文件export的用法

---

import的用法

html文件中，通过script标签引入js文件；
vue中通过import xxx from xxx的方式导入文件，不光可以导入js文件，还可以导入css文件等多种类型的文件。

---

一、语法

import xxx from xxx

from前的：
“xxx”指的是为导入的文件起的一个名称，不是指导入的文件的名称，相当于变量名

from后的：
“xxx路径”指的是文件的相对路径

二、使用场景

1.在某个.vue文件，或js文件（例如router.js）中引入vue组件

import Header from '@/components/header'
import Footer from '../components/footer'

这种方式的引入可以省略文件的后缀名

2.在某个.vue文件中引入css和js

import  '../assets/css/style.css'
import  '../assets/js/index.js'

也可以嵌套在style标签中引入css

<style>
    @import "../assets/css/style.css";
</style>

注意：这个@和webpack.base.conf.js文件中代表src的@不是一回事，这个只是一种引入css的一种方式。

3.引入工具类

3.1 引入单个方法

import {axiosfetch} from './util';

下面是导出文件的写法，axiosfetch需要先在另一个js文件中使用export导出：

export function axiosfetch(options) {
 //...
} 

3.2 引入成组的方法

// *：导入tools.js中的全部方法
// as：重命名
import * as tools from './libs/tools'

在vue中使用 ：

Vue.prototype.$tools = tools

直接用 this.$tools.method调用就可以了。

export与export default的用法

export 与 import 是es6中新增模块功能最主要的两个命令。

一.语法

1.export 与 export default 均可用于导出常量、函数、文件、模块等；
2.在一个文件或模块中，export、import可以有多个，export default仅有一个；
3.通过export方式导出，在导入时要加{ }，export default则不需要{ }。

二.使用场景

1.export

a.js：

export const str = 'hello world'
export const num = 0
export func() {
	console.log('I am a funnction')
}

1.1 在.vue或.js文件中导入：

import {str,num,func} from './a';

1.2 如果想对func重命名可以这样导入：

import {str,num,func as _func} from './a';

在需要的地方调用_func：

// 相当于直接调用func()
_func()

1.3 导入全部的资源

// _A为别名，在调用时使用
import * as _A from './a';

在需要的地方调用func：

_A.func();

2.export default

b.js：

export default {
	str: 'hello world',
	num: 0,
	func: () => {
		console.log('I am a funnction')
	}
}

在.vue或.js文件中导入：

import a from './a';
// 获取a中的变量
consoe.log(a.str);
consoe.log(a.num);
a.func();