学习目标：
目标：
- 掌握 vue 项目中常用的几种import 的书写 方式
学习内容：
内容：
1. import（模块、文件）引入方式
. （1）引入第三方插件
import echarts from ‘echarts’
.（2）.导入 css文件
import ‘view/dist/styles/iview.css’;
.（3）.导入组件
import name from ‘./namea’
components:{
name
},
.（4）．import '@…'的语句
@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径
.（5）.引入工具类
第一种是引入单个方法
import {axiosfetch} from ‘./util’;
下面是写法，需要export导出
export function axiosfetch(options) {
}
2. 导入成组的方法
import * as tools from ‘./libs/tools’
使用方式：
其中tools.js中有多个export方法,把tools里所有export的方法导入
使用方式： 在代码中 写入 tools.method 调用 对用的方法即可
知识小结：
总结：
- [x] 1、vue中常用的几种import（模块、文件）引入方式
（1）.引入第三方插件
（2）.导入 css文件
（3）.导入组件
（4）.import '@…'的语句
（5）.引入工具类
- [x] 2、export 与 export default 的区别
1、 export
import {store} from ‘./util’;
//需要加花括号{} 可以一次导入多个也可以一次导入一个，但都要加括号
//如果是两个方法
import {store,post} from ‘./util’;
2、 export default
import storefrom ‘./util’;
//不需要加花括号{} 只能一个一个导入
- [x] 3、export,import和export default的关系
(1).export 与 import是新增模块功能最主要的两个命令。
(2). export和export default最大的区别就是export不限变量数 可以一直写，
(3).export default 只输出一次 而且 export 输出的变量想要使用 必须使用{}，
而export default 不需要使用该括号， 只要import任意一个名字来接收对象即可。
- [x] 4、export与export default均可用于导出常量、函数、文件、模块等
- [x] 5、在一个文件或模块中，export、import可以有多个，export default有且仅有一个
- [x] 6、通过export方式导出，在导入时要加{ }，export default则不需要{ }
- [x] 7、 import引入 的不同方式
**（1）、import引入文件路径**
import引入一个依赖包，不需要相对路径。如：import app from ‘app’;
import 引入一个自己写的js文件，是需要相对路径的。如：import app from ‘./app.js’;
**（2）、import引入文件变量名**
导入方式：
方法一：
import { str, log as alog } from ‘a’;
方法二：
import { str } from ‘a’;
import { log as alog } from ‘a’;
//也可以分开写两次，导入的时候带花括号。
**使用 as 进行 重命名**
- [x] 8、 使用export default抛出变量
使用export default抛出的变量，需要起一个别名进行抛出
var obj = { name: ‘exampleName’ };
export default obj;
//name 可以自定义进行命名
import name from ‘./a.js’;
//输出属性值
console.log(name.value);
- 9、部分导入和部分导出
部分导入和部分导出的优势，当资源比较大时使用部分导出，可以使用部分导入来减少资源体积。
(1)部分导入
import {helloWorld} from “./A.js” //导入A.js中的helloWorld方法
helloWorld(); //执行utils.js中的helloWorld方法
如果我们需要A.js中的全部资源,则可以全部导入，如下：
//导入全部的资源，AAA为别名
import * as A AA from “./A.js”
AAA.helloWorld(); //执行AAA.js中的helloWorld方法
AAA.test(); //执行AAA.js中的test方法
(2)部分导出
export function helloWorld(){
console.log(“Hello World”);
}
- 10、全部导入和全部导出
如果使用全部导出，那么在导入时则必须全部导入，一般我们写方法库时使用部分导出，开发时在导入时可以选择全部导入或者部分导入。
注意：一个js文件中可以有多个export，但只能有一个export default ！！！！！！
(1)全部导入
import AAA from “./A.js”
AAA.helloWorld();
AAA.test();
(2)全部导出
var helloWorld=function(){
console.log(“Hello World”);
}
var test=function(){
console.log(“this’s test function”);
}
export default{
helloWorld,
test
}
