vue 项目中常用的几种import 书写 方式

学习目标：

目标：

• 掌握 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
}