import与export的用法
一、import的用法
html文件中,通过script标签引入js文件;
vue中通过import xxx from xxx的方式导入文件,不光可以导入js文件,还可以导入css文件等多种类型的文件。
1. 语法
import xxx from xxx
from前的:
“xxx”指的是为导入的文件起的一个名称,不是指导入的文件的名称,相当于变量名
from后的:
“xxx路径”指的是文件的相对路径
2. 使用场景
2.1 在某个.vue文件,或js文件(例如router.js)中引入vue组件
import Header from '@/components/header'
import Footer from '../components/footer'
这种方式的引入可以省略文件的后缀名
2.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的一种方式。
2.3 引入工具类
2.3.1 引入单个方法
import {axiosfetch} from './util';
下面是导出文件的写法,axiosfetch需要先在另一个js文件中使用export导出:
export function axiosfetch(options) {
//...
}
2.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. 语法
1.export 与 export default 均可用于导出常量、函数、文件、模块等;
2.在一个文件或模块中,export、import 可以有多个,export default 仅有一个;
3. 通过 export 方式导出,在导入时要加 { } ,export default 则不需要 { } 。
2. 使用场景
2.1 export
a.js:
export const str = 'hello world'
export const num = 0
export func() {
console.log('I am a funnction')
}
- 在.vue或.js文件中导入:
import {str,num,func} from './a';
- 如果想对func重命名可以这样导入:
import {str,num,func as _func} from './a';
在需要的地方调用_func:
// 相当于直接调用func()
_func()
- 导入全部的资源
// _A为别名,在调用时使用
import * as _A from './a';
在需要的地方调用func:
_A.func();
2.2 export default
b.js:
export default {
str: 'hello world',
num: 0,
func: () => {
console.log('I am a funnction')
}
}
在.vue 或 .js文件中导入:
import b from './b';
// 获取a中的变量
console.log(b.str);
console.log(b.num);
b.func();