CLI

CLI 属于 HCI 里面的一种。

计算机科学

HCI，英语全称 Human-Computer Interaction，中文的意思是“人机交互”，也就是研究和设计人类与计算机之间交互的学科。

人机交互最常见的方式：

CLI：Command Line Interface，翻译成中文叫做命令行接口，主要通过输入一些文本命令来和计算机进行交互。
GUI：图形用户界面，用户使用一些图形元素（图表、按钮...）来和计算机进行交互。现在大多数时候都是采用 GUI 的方式和计算机进行交互，操作系统、办公软件、浏览器

其他的方式有哪些？

触摸屏
语音交互
虚拟现实VR以及增强现实AR
脑机接口（BCI）
可穿戴设备

思考🤔：人机交互方式和执行效率是成正比还是反比？

答案：人机交互方式和执行效率是成反比。早期的 CLI 虽然用户体验最差，但是效率是最高。

CLI

CLI 发展历史

早期计算机系统
- 1950s-1960s：CLI 起源于早期的计算机系统，当时的计算机没有显示器，用户通过纸带、打孔卡片或电传打字机与计算机进行交互。
- 1960s：UNIX 操作系统的开发大大推动了 CLI 的发展，UNIX 提供了一个功能强大的 shell，用于用户与系统之间的交互。
个人计算机时代
- 1970s-1980s：随着个人计算机的兴起，CLI 成为主流的用户接口，用户通过命令行执行文件操作、程序运行等任务。
- 1983年：微软推出MS-DOS（微软磁盘操作系统），这是一个基于 CLI 的操作系统，成为个人电脑上的标准操作系统之一。
GUI 的出现与发展
- 1990s：图形用户界面（GUI）的出现减少了 CLI 在普通用户中的普及，但在专业领域（如开发、网络管理、服务器管理）CLI 仍然保持着重要地位。
- 现代 CLI 环境：现代操作系统如 Windows、Linux 和 macOS 都提供了 CLI 接口（如 Windows 的 PowerShell 和 CMD，Linux 的 Bash），以满足开发者和系统管理员的需求。

CLI 优缺点

优点：
- 高效
- 资源占用少
- 功能强大
缺点：
- 学习曲线陡峭
- 可视化不足

Vite CLI

Vite 的 CLI 分为 4 类：

开发服务器
构建生产版本
依赖预构建
本地预览构建产物

1. 开发服务器

直接使用 vite 就可以启动。例如使用 Vite 搭建的项目，脚本如下：

"scripts": {
  "dev": "vite",
},

其中 vite dev 和 vite serve 是 vite 的别名。

这里执行的 vite 其实是 node modules/.bin 目录下的可执行命令，所以也可以这样启动项目：

bash

./node_modules/.bin/vite

该命令后面支持一系列的参数

2. 构建生产版本

通过 vite build 来构建生产版本。

"scripts": {
  "build": "vite build",
},

bash

./node_modules/.bin/vite build

构建也提供了可选参数，当然最推荐的还是通过配置文件来进行配置，更加方便一些。

下面是一些常见的配置参数。

--target <target>：指定编译目标，默认为 "modules"。可用于指定不同的浏览器支持。
示例：vite build --target es2015 将代码编译为 ES2015 标准。
--outDir <dir>：设置输出目录，默认为 dist。
示例：vite build --outDir build 将构建输出到 build 目录。
--assetsDir <dir>：在输出目录下设置资源目录，默认为 "assets"。
示例：vite build --assetsDir static 将资源放在 static 目录中。
--manifest [name]：生成 manifest.json 文件，该文件用于描述构建后的资源文件与源文件之间的映射关系，这个文件对于服务器端渲染（SSR）或与后端框架集成时非常有用，因为它可以帮助动态引用生成后的静态资源。
示例：vite build --manifest 在构建后生成 manifest.json 文件。
-c, --config <file>：使用指定的配置文件。
示例：vite build -c vite.config.custom.js 使用自定义配置文件 vite.config.custom.js。
--base <path>：设置公共基础路径，默认为 /。
示例：vite build --base /myapp/ 将基础路径设置为 /myapp/。

思考🤔：如果在 CLI 和配置文件中都指定了相同的参数，该如何处理？

答案：CLI 配置的参数的优先级更高，会覆盖配置文件里面的参数。

3. 依赖预构建

相当于手动执行一次依赖的预构建，大多数情况不太需要，这里不再赘述。具体的 CLI 命令项请参阅官网.

本地预览构建产物

"scripts": {
  "preview": "vite preview",
},

vite preview 命令在 Vite 中用于启动一个本地的静态预览服务器，这个服务器主要用来预览构建后的应用。

作用和用途

预览生产构建
检测部署问题

使用示例

假设你已经运行了 vite build 命令，构建了应用，并生成了 dist 文件夹。你可以使用以下命令来启动一个预览服务器：

bash

vite preview

这个命令会启动一个本地服务器，默认监听 4173 端口（如果该端口被占用，会自动寻找下一个可用的端口），之后可以通过浏览器访问 http://localhost:4173 来查看应用。

配置选项

vite preview 支持一些命令行选项来自定义服务器的行为，例如：

--port：指定服务器监听的端口。
--host：指定服务器的主机名，设置为 0.0.0.0 可以允许外部访问。
--https：启用 HTTPS。

例如，要在指定端口上启动预览服务器并允许外部设备访问，可以使用：

bash

vite preview --host 0.0.0.0 --port 8080

这将使你的项目在本地网络中可见，方便在多种设备上进行测试。

一句话总结：通过 vite preview 可以检查打包后的代码是否工作正常。以前需要自己用 express 启动一个服务器，将 dist 目录扔进去，现在 vite 直接给你提供了这个预览服务器，更加方便。

-EOF-

CLI ​

CLI