前端工程化及其实践 3
前端工程化及其实践 3
前端工程化及其实践 3， 又名：写毕设到企业级前端（第三天）
目录
- 安装 Node.js 环境
- 基础的 Node 项目
- 学习模块化设计
- 用 CommonJS 设计模块
- 用 ES Module 设计模块
- 了解模块导入限制
- Vue 是用什么什么？
- 认识组件化设计
- 依赖包和插件
1. 安装 Node.js 环境
概念：
安装 Node.js 环境是为了能够在您的计算机上运行和开发基于 Node.js 的应用程序。Node.js 是一个基于 JavaScript 的运行时环境，它使您可以在服务器端运行 JavaScript 代码。
示例：
要安装 Node.js 和 npm（Node Package Manager），您可以按照以下步骤进行操作：
安装 Node.js 和 npm：
-
访问 Node.js 官方网站：https://nodejs.org/
-
在官方网站首页，您会看到两个不同的版本：LTS（长期支持版本）和 Current（当前版本）。
- 对于大多数用户，建议选择 LTS 版本，因为它稳定且经过了更多测试。
- 如果您需要最新的特性和改进，可以选择 Current 版本，但请注意它可能不如 LTS 版本稳定。
-
在选择版本后，根据您的操作系统下载相应的安装程序。Node.js 支持 Windows、macOS 和 Linux。
-
下载并运行安装程序，按照提示进行安装。在 Windows 上，您可能需要勾选 “Automatically install the necessary tools…” 选项，以便安装必要的构建工具。
-
完成安装后，打开终端（命令提示符或终端窗口）并运行以下命令来验证 Node.js 和 npm 是否成功安装：
node -vnpm -v如果成功安装，这两个命令将分别显示 Node.js 和 npm 的版本号。
进行测试：
为了测试 Node.js 和 npm 的工作，您可以创建一个简单的 Node.js 应用程序，例如 “Hello, Node.js!” 示例：
-
创建一个新的文件，命名为
app.js。 -
在
app.js中输入以下代码：console.log("Hello, Node.js!"); -
保存文件。
-
在终端中，导航到包含
app.js文件的目录。 -
运行以下命令来执行
app.js文件：node app.js您将在终端中看到输出 “Hello, Node.js!”。
这是一个简单的 Node.js 应用程序测试，它验证了您已成功安装了 Node.js 和 npm，并且可以运行 Node.js 脚本。从这里开始，您可以继续学习 Node.js 的更多功能和用法，构建更复杂的应用程序。
2. 基础的 Node 项目
概念：
一个基础的 Node 项目是指一个简单的 Node.js 应用程序，通常包括一些核心概念和文件结构，用于开始构建和开发应用程序。
示例：
初始化一个项目
您可以通过以下步骤初始化一个新的 Node 项目：
- 在命令行中导航到您希望创建项目的目录。
- 运行
npm init命令，它将引导您创建一个package.json文件，其中包含项目的基本信息。 - 按照提示逐步填写项目信息。
- 完成后，将生成一个
package.json文件，其中包含项目的配置。
了解 package.json
package.json 文件包含了项目的元数据和依赖信息。您可以打开这个文件，查看和编辑项目的配置。
项目名称规则
Node 项目的命名应遵循一定的规则和建议，通常包括小写字母、连字符或下划线等。
语义化版本号管理
语义化版本号是一种版本号命名规则，用于管理项目依赖包的版本。它包括基本格式、升级规则和版本标识符等内容。
脚本命令的配置
在 package.json 文件中，您可以配置自定义脚本命令，以便在项目中运行特定任务。这对于自动化任务和项目管理非常重要。
Hello Node
通过一个简单的示例，您可以学习如何创建和运行一个 Node.js 应用程序。这个示例可以包括一个简单的 “Hello World” 程序，用于演示 Node.js 的基本用法。
这些概念和示例有助于您开始构建和理解基础的 Node 项目。您可以根据这些概念逐步学习和实践 Node.js 编程。
以在命令行中输出 “Hello, Node.js!”：
// 导入核心模块 'http'
const http = require('http');
// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
// 设置响应头
res.writeHead(200, { 'Content-Type': 'text/plain' });
// 发送响应内容
res.end('Hello, Node.js!\\n');
});
// 监听服务器的端口
const port = 3000;
server.listen(port, () => {
console.log(`Server is running at :${port}/`);
});
在这个示例中，我们执行了以下步骤：
- 导入 Node.js 核心模块 ‘http’，它允许我们创建 HTTP 服务器。
- 创建一个 HTTP 服务器实例，通过
http.createServer方法。 - 在服务器的请求处理函数中，我们设置响应头并发送 “Hello, Node.js!” 作为响应内容。
- 使用
server.listen方法来监听指定的端口（在这里是 3000）。 - 一旦服务器启动，我们会在控制台输出一条消息，指示服务器正在运行。
要运行此示例，您可以将上述代码保存到一个文件（例如 app.js），然后在命令行中执行以下命令：
node app.js
这将启动服务器并在浏览器中访问 http://localhost:3000/，您将看到 “Hello, Node.js!” 的消息。
这是一个简单的 Node.js 应用程序示例，演示了如何创建一个基本的 HTTP 服务器并进行简单的请求处理。您可以根据这个示例进一步学习和构建更复杂的 Node.js 应用程序。
当涉及到模块化设计时，以下是概念和用例代码：
1. 学习模块化设计
概念：
模块化解决了什么问题：模块化是一种软件设计方法，旨在解决以下问题：
- 代码复用：模块化允许开发人员将代码拆分为独立的模块，这些模块可以在不同部分的应用程序中重复使用，提高了代码复用性。
- 维护性：拆分代码为模块使得单个模块的修改不会影响整个应用程序，从而提高了代码的可维护性。
- 可扩展性：模块化设计使得应用程序可以更容易地扩展，新功能和模块可以添加到现有应用程序中而不影响其他部分。
2. 用 CommonJS 设计模块
概念：
准备工作：使用 CommonJS 模块化需要 Node.js 环境，因为它最初是为 Node.js 开发的模块系统。
用例代码：
以下是一个示例，演示如何在 Node.js 中使用 CommonJS 模块化设计来导出和导入模块：
模块文件 math.js：
// 导出一个加法函数
exports.add = function (a, b) {
return a + b;
};
// 导出一个减法函数
exports.subtract = function (a, b) {
return a - b;
};
主应用程序文件 app.js：
// 导入 math 模块
const math = require('./math');
// 使用导入的模块中的函数
const sum = math.add(5, 3);
console.log(`5 + 3 = ${sum}`);
const difference = math.subtract(10, 4);
console.log(`10 - 4 = ${difference}`);
在上述示例中，math.js 文件导出了两个函数，并且在 app.js 文件中使用 require 来导入并使用这些函数。
这是 CommonJS 模块化的基本示例，它允许将代码拆分为模块以提高可维护性和代码复用性。
以下是概念和用例代码，涉及ES Module设计模块以及模块导入限制：
3. 用 ES Module 设计模块
概念：
准备工作：要使用 ES Module（ECMAScript Modules）模块化，您需要在支持 ES Module 的环境中工作，如现代浏览器或 Node.js 版本 13+。
基本语法：ES Module 使用 import 和 export 语法来导入和导出模块。
默认导出和导入：可以使用 export default 导出默认模块，使用 import 导入。
命名导出和导入：可以使用 export 导出具名模块，使用 import { moduleName } 导入。
导入时重命名：使用 as 关键字可以在导入时重命名模块。
在浏览器里访问 ESM：您可以在现代浏览器中使用