vue 中 import export export defaul (es6)

一、import（模块、文件）引入方式

import引入一个依赖包 ，不需要相对路径。

import  app from ‘app’; 

import 引入一个自己写的js文件，是需要相对路径的。

import app from ‘./app’;

import 导入 css文件

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

如果是在.vue文件中那么在外面套个style

<style>
  @import './test.css'; 
</style>

@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径

import 导入组件

import name1 from './name1'
import name2 from './name2'
  components:{
     name1,
     name2,
  },

二、 import（文件变量名）引入方式

export

1、使用export抛出的变量需要用{}进行import

导入单个、两个方法

//a.js :
export const str = "blablabla~";
export function log(sth) {
	  return sth;
	}


//b.js: 

//单个导入
import { str } from './文件a'; 

//两个导入
import { str, log } from './文件a';  

//还可以用as重命名
import { str, log as _log } from './文件a';  

全部导入

//a.js :
export const str = "blablabla~";
export function log(sth) {
	  return sth;
	}
export function helloWorld(){
 conselo.log("Hello World");
}

	
//b.js: 
import * as _A  from './文件a'      //_A为别名，在调用时使用
Vue.prototype.$tools = _A
  
//x.vue
this.$tools.str();                //执行A.js中的str方法
this.$tools.log();                //执行A.js中的str方法
this.$tools.helloWorld();         //执行A.js中的helloWorld方法

export default

2、使用export default抛出的变量，只需要自己起一个名字就行：

单个导入

//a.js :
var obj = { name: ‘example’ }; 
export default obj; 

//b.js: 
import newNname from ‘./a.js’; 
console.log(newNname .name);       // example;

全部导入

//全部导出  A.js
var helloWorld=function(){
 conselo.log("Hello World");
}
var test=function(){
 conselo.log("this's test function");
}
export default{
 helloWorld,
 test
}
 
//全部导入  B.js
import A from "./A.js"
A.helloWorld();
A.test();

如果使用全部导出，那么使用者在导入时则必须全部导入，推荐在写方法库时使用部分导出，从而将全部导入或者部分导入的权力留给使用者。

一个js文件中可以有多个export，但只能有一个export default