编辑
2023-04-14
CustomCli
0
请注意,本文编写于 438 天前,最后修改于 397 天前,其中某些信息可能已经过时。

目录

说明
常见脚手架
用途
实现流程
前置基础知识
掌握NodeJS开发
理解脚手架
EG
理解
流程

说明

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

常见脚手架

  • vuecreate-vuevue-cli
  • ReactCreate 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

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!