跳转至

Vue前置知识

约 144 个字 33 行代码 预计阅读时间 1 分钟

模块化

模块化的导入和导出语法。按照下面的命令创建目录：

  1. 创建一个根目录
  2. 安装Node.js并使用npm init初始化
  3. 在根目录中创建一个src目录
  4. 与src目录中创建一个index.js文件
  5. 在src目录中创建一个utils目录
  6. utils目录中创建一个min.js

所以项目基本结构如下：

Text Only
1
2
3
4
5
6
- 根目录
    - src
        - utils
            - min.js
        - index.js
    - package.json

在每个文件中有下面的内容：

JSON
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
"name": "es-module",
"version": "1.0.0",
"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": "",
"type": "module"
}
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// 默认导出
export default function min(a, b){
    return a < b ? a : b;
}

// 默认导出只能有一个且导出变量时不能带变量声明修饰符
// export default const pi = 1;

// 按需导出
// 导出变量时可以使用变量声明修饰符
export let pi = 2;
export let i = 3;
JavaScript
1
2
3
4
5
6
7
8
9
// 默认导入import + 默认导出的内容名称（可以任意） from "文件路径"
import minFunc from "./utils/min.js";
// 按需导入
// 按需导入需要代上{}并且需要保证导入名称和导出名称相同
import { i } from "./utils/min.js";

console.log(minFunc(10, 20));

console.log(i);

使用node ./src/index.js即可看到最后打印出的结果：

Text Only
1
2
10
3