说明

脚手架全称：Command-Line Interface 译为命令行界面，基于终端文本界面，依靠输入命令执行

常见脚手架

• vue的create-vue、vue-cli
• React的Create React App

用途

• 研发提效
• 理解前端工程化

实现流程

前置基础知识

• Shell 操作系统提供的接口程序，用于接受用户输入的命令，交由操作系统内核执行并接收响应结果

• Bash 作为shell的一个实现，用于执行用户输入的命令

• CLI 是bash的运行环境，其接受用户键盘输入，交给Bash执行，并将程序处理结果以文本形式展示

掌握NodeJS开发

根据脚手架应用场景，学习相关库：内置库、常用库、脚手架框架以及如何获取键盘输入、键盘监听、设置输出内容的文本颜色、命令交互等

理解脚手架

EG

通过cearte vue创建项目

bash
$ pnpm create vue@3
../../../.pnpm-store/v3/tmp/dlx-27156    |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             ../../../.pnpm-store/v3/tmp/dlx-27156/node_modules/.pnpm
../../../.pnpm-store/v3/tmp/dlx-27156    | Progress: resolved 1, reused 1, downloaded 0, added 1, done

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\FrontEnd\CustomCli\vue\vue-project...

Done. Now run:

  cd vue-project
  pnpm install
  pnpm format
  pnpm dev

理解

bash
pnpm create vue@3

pnpm: 主命令 create：commond vue@3: commond的参数

pnpm create vue@3 --force

--force: 也称之为option,用于辅助脚手架确认在特定场景下用户的选择(配置)，此命令表示强制覆盖当前目录下的文件

pnpm create vue@3 --force -r [npm源]

-r: 指定pnpm install安装依赖时，是的镜像源

其它配置项： pnpm create --help 查询

流程

pnpm create vue@3

1. 检查模板是否存在于包注册表中
2. 如果模板存在，它将下载模板并将其解压缩到具有指定名称的新目录（或指定的目录）
3. 然后它将通过运行pnpm init在指定目录中初始化一个新项目
4. 可能会提示您输入一些附加信息，例如项目名称、描述、作者等
5. 最后，它将安装模板所需的所有依赖项。

从环境变量中查找的node

#!/usr/bin/env node