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);

(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”);
}

注意：一个 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
}