本章你将学会说清写 EngFlow 为什么要装三件工具它们各自负责哪一段活儿亲手装上 Node.js并用两条命令验收它真的活着在终端里用三个命令于文件夹之间走路、看路、擦黑板把 VS Code 调成中文界面并装上写代码要用的插件一次讲透 npm、package.json、node_modules三兄弟的关系需要的前置章节第 1 章软件指令清单、源码与软件的分家、第 3 章知道变量和函数是什么就够了对应项目文件package.json本章只看不改、package-lock.json、node_modules/本章不需要你打开或修改项目里的任何一行源代码。全是装工具、认工具。4.1 从一个场景开始前三章我们一直在读菜谱知道软件是一份指令清单知道界面由 HTML、CSS、JavaScript 三种语言合作画出来知道清单里装着变量、判断、循环、函数这几种积木。现在要进厨房炒菜了。想象你要做一次饭。菜谱看懂了可你家厨房是空的——没有灶没有刀和案板甚至连个能问一句盐放几克的人都没有。这时候你手里那份菜谱一分钱不值。写代码的厨房同样缺三样东西灶让 JavaScript 这段菜能被加热跑起来的东西。它叫Node.js。会打字的对话框一个你敲一句话、电脑照做一件事的窗口。它叫终端terminal也叫命令行。刀和案板一个真正拿来写字、改字、看字的编辑器。它叫VS Code。这三样都不是必须用最贵的那款。灶可以是别家的Node.js 的同行叫 Deno、Bun编辑器可以是别家的同行叫 Sublime、Cursor终端 Windows 自带一个、还能再装个更好看的。但必须有而且必须三个都齐。这是这个行业的现实写代码不是打开一个软件就开始而是先把工作台搭起来。不过这里冒出一个非常不讲理的问题也是本章要解决的核心问题第 2 章我们说过JavaScript 是在浏览器里跑的语言。浏览器我们已经有了双击图标就能用。那为什么现在还要额外装一个 Node.js它是来抢浏览器饭碗的吗答案在第 4.2 节。先把三件套的名字和绰号记牢工具绰号一句话职责Node.js代码的发动机让 JavaScript 能脱离浏览器在你的电脑上跑起来终端跟电脑打字的对话框让你用一句话直接命令电脑做事VS Code高级记事本让你舒服地写代码、看代码、改代码4.2 原理为什么写网页软件反而要装软件4.2.1 Node.js代码的发动机先纠正一个容易产生的误解JavaScript不是浏览器的专属语言。它的真实身份是一门语言就像中文。中文可以被印在纸上、写在黑板上、打在手机上、用嘴说出来——语言不挑载体。浏览器Chrome、Edge只是恰好内置了一个很厉害的 JavaScript发动机英文叫 engine也有人说 runtime运行时意思是让代码能跑起来的那台机器。Chrome 里这台发动机名叫V8。浏览器用 V8 来执行网页里的 JavaScript。Node.js 做的事说白了就一件把 V8 这台发动机从浏览器里拆出来装在一辆小推车上推到你的电脑桌面上。于是 JavaScript 第一次可以不带浏览器就运行——不需要打开网页不需要有界面它能直接读文件、算东西、启动一个服务器。Node.js 的作者 Ryan Dahl 在 2009 年干的就是这件事。【配图说明剖面图。左边一台浏览器里面装着一台写着 V8 的发动机中间一把扳手把发动机拆出来右边一辆写着 Node.js 的小推车装着同一台发动机旁边注明同一台发动机两种车】那么这跟我们装它有什么关系关系大了因为 Vite、脚手架、代码检查工具、打包工具——整个前端行业的工具全都是用 JavaScript 写的。你想用它们就必须在你电脑上有一台能跑 JavaScript 的发动机。这就是 Node.js 存在的理由你装 Node.js不是为了写服务器程序而是为了让帮你写 EngFlow 的那些工具能在你电脑上跑起来。Node.js 还带一个免费赠品装它的时候顺手把npm后面 4.2.4 细讲也装进去了。所以你会看到装一个东西得到两个命令。4.2.2 终端跟电脑打字的对话框你平时用电脑的方式是图形界面GUIGraphical User Interface窗口、图标、按钮鼠标点。它的好处是不用记坏处是每一步都得你亲手点而且没法把点二十下打包发给朋友。**命令行command line**是另一种方式屏幕上只有一行字等你打字你打一句话电脑做一件事。它的好处是精准“把这个文件夹里所有 .png 改名”——鼠标点要半小时命令行一行。可复制你写给朋友的操作说明他整行复制粘贴就能做不会我点错了地方。工具只认它npm run dev这句话鼠标是没有地方点的。终端长这样这是本章最重要的一个认知图PS D:\WorkSpace\CET6\learnEnglish _PS是提示符的一种PowerShell 的缩写有的电脑显示C:\Users\你也完全正常。D:\WorkSpace\CET6\learnEnglish是当前目录working directory电脑现在站在哪个文件夹里。这是全章最容易掉坑的概念4.5 节会专门治它。最后那个_是光标意思是我在等你打字。【配图说明一个终端窗口的放大解剖图三条引线分别指向① 提示符PS“电脑在说话前的抬头”② 中间那段路径“我现在站在哪个文件夹里”③ 行尾闪烁的光标“我在等你打字”。标题读懂终端的一行字】关键的一句心法你敲的每一条命令都是以电脑现在站的那个文件夹为背景去执行的。站错了地方同一句命令做的事完全不同甚至直接报错。4.2.3 VS Code高级记事本用记事本写代码行不行行。第 1 章实验 2 我们就用记事本看过一行代码。但用记事本写代码就像用菜刀砍骨头——能砍但你会哭。VS Code全称 Visual Studio Code微软出品免费是记事本 一整套厨房设备记事本VS Code全是黑字语法高亮关键字自动变色一眼看出哪里是命令、哪里是文字拼错没人管红色波浪线当场提示鼠标放上去告诉你为什么错全靠手打自动补全敲两三个字母它把完整单词递给你找不到函数定义按住 Ctrl 点一个名字直接跳到它写出来的那一行没有终端菜单里 Ctrl 直接开一个终端就站在项目文件夹里什么都不会扩展extension像手机装 App 一样给它加能力最后一行才是它真正可怕的地方VS Code 本身其实不认识 Vue。它出厂时是个通用编辑器。是我们给它装上Vue 插件它才学会看懂.vue文件、才会在你写错时报警。扩展就是把通用编辑器变成专属工作台的那颗螺丝。VS Code 默认是英文的。装中文语言包是本章动手环节第一件事——家长如果看着满屏英文心慌先把它变中文。4.2.4 三兄弟npm 是商店package.json 是清单node_modules 是货架这是本章最需要讲透的一段因为整个第 5、6 章的命令都建立在它上面。npmNode Package Manager 的前三个字母读作恩-皮-艾姆官方不展开成名字有两个身份它是一个命令你敲在终端里它背后连着一个巨大的在线仓库npm registry全世界的程序员把写好的工具包上传到那儿别人免费取用。上面有超过两百万个包。打个比方就够了npm 是手机上的应用商店。你要一个功能不用自己写去商店搜、点安装它就装到你手机上了。区别在于装完之后放哪里。三个角色一次讲清你想要一个功能比如一个很好用的复制粘贴工具 │ ▼ npm install lodash ← 你说商店给我装这个 │ ▼ ① 记到 package.json ← 购物清单写下我家有 lodash ② 真实文件放进 node_modules/ ← 仓库货架代码本体住在这里 ③ 精确版本抄进 package-lock.json ← 购物小票连哪一天哪个批次都记下来package.json购物清单。一个小小的文字文件写着这个项目叫什么名字、版本多少、装了哪些依赖、有哪几条快捷命令。它是给人读给人改的。清单本身不是商品。node_modules仓库货架。商店把货真的搬到你家全部堆在这个文件夹里。里面套娃一样深动不动几万个小文件。它是机器读的你这辈子都不该手动打开它、改里面的文件、或者手删某个包。package-lock.json购物小票。npm 自动生成的记录这次装的到底是哪个精确版本、从哪个地址下来的。有了它你朋友在另一台电脑上装出来的东西跟你一模一样。于是有了一条必须刻进脑子里的规矩清单要交给朋友货架不要。这就是为什么第 1 章我们把项目发给别人时只发源码文件夹里面没有node_modules。别人拿到清单自己敲一句npm install商店就会按清单给他家重新上一个货架。【配图说明三个图标一字排开——一张写着 package.json 的购物清单、一个巨大的货架箱子上写着 node_modules里面塞满小包、一张小票 package-lock.json。箭头标注 npm install 一次动作同时写满三样】还有一个命令你会在本书里反复见到npx。它是 npm 的兄弟区别只有一句话npm install买回家放着写进清单以后随时用npx借来跑一次用完就走不太占你家地方。第 5 章我们用npx/npm create让脚手架工具直接给我们变出一个项目就是借来用一次的典型场景。4.3 动手时间下面四个实验按顺序做大约 30 分钟。全程不碰D:\WorkSpace\CET6\learnEnglish里的任何代码文件只是装工具和玩工具。实验 1装上发动机并验收它活着10 分钟第 1 步去官网下载。打开浏览器访问https://nodejs.org。页面上有两个大按钮你会看到LTS和Current两排。点 LTS 那个。LTS 全称 Long-Term Support长期支持版意思是这一款会被官方修修补补好几年最稳。Current 是最新款功能新但偶尔闹脾气。给小朋友的一句话准则看到 LTS 就选它永远。第 2 步一路下一步。下载下来是个.msi安装程序双击。默认设置全都不用改一直点下一步直到完成。中间有一个勾选项写着 “Add to PATH”加进 PATH见 4.5 节第一个毛病——保证它是勾上的默认就是勾的。安装过程中它会顺手把 npm 一起装好。第 3 步⚠️ 全部关掉重开。安装完之后把你之前开着的所有终端窗口统统关掉重新开一个新的。这一步不是可选的原因在 4.5 节讲。现在照做就行。第 4 步验收。# 打开一个新终端输入下面两行每行敲完按回车node-vnpm-v你会看到两行数字都以v开头。比如这台机器上跑出来的是v24.15.0 12.0.1你的数字很可能不一样这完全正常——版本号取决于你下载那天官网上挂的是哪一版。重要的只有两件事① 两行都吐出数字了② 数字不低于 v20。只要node -v那句报错说不是内部或外部命令立刻跳去 4.5 节的毛病 1那就是本章最有名的一道坎。原理解释-v是 version版本的缩写是命令行世界最经典的打招呼暗号。它什么都不做只回一句我在我是这个版本。所以我们用它来确认三件事装上了、终端找得到它、版本够新。实验 2终端里的三个命令 一张草稿纸6 分钟第 1 步把终端打开。三种开法任选一种记熟推荐第二种最不容易迷路按Win RWin 是键盘左下角那个窗户键在弹出的框里打cmd回车。在资源管理器里进到你想开终端的那个文件夹点一下顶部的地址栏把里面的路径擦掉改成cmd回车——终端直接在这个文件夹里打开。装了 VS Code 之后下一个实验在 VS Code 里按Ctrl 反引号键盘左上角~那个键终端开在你打开的文件夹里。第 2 步三个命令够用一辈子。下面这三条请按顺序站在D:\WorkSpace\CET6\learnEnglish里练最省事的到法资源管理器地址栏敲cmd回车第 1 步的第 2 种开法。先看一眼提示符里的路径对不对再敲# ① dir —— 看看我现在站的这个文件夹里有什么dir# ② cd —— Change Directory走到别的文件夹里去只能走进脚下的下一层cdsrccd..# ③ cls —— 擦黑板把屏幕上滚过的字清干净cls你会看到dir打出一长串列表末尾照例写着几个DIR子文件夹和一堆.txt、.json之类的文件最后一行是几个文件多少字节。DIR是 directory 的标记读的时候直接念成这是个文件夹。cd src屏幕上什么都不显示——命令行有个礼貌规则没消息就是好消息。回车后光标直接换行等你说明它成功走过去了。这时候看提示符路径末尾多了一截\src你已经在主厨房里面了。dir再敲一次你会看到App.vue、main.ts、components这些第 1 章导览图上的名字。cd ..两个英文句点是往上走一层回到爸爸文件夹走回原处。cls一敲屏幕刷地干净只剩一行提示符。顺便说一句cd后面那串名字必须是真实存在的文件夹打错了它会直接回你一句系统找不到指定的路径。想走进src-tauri就cd src-tauri本书后面还会用到它。顺便送你两个救命用的小花样它们不算够用三件套cd# 光敲一个 cd 加回车在 cmd 里它打印我现在站在哪儿打印当前目录cd\# 直接回到这个盘的最顶上根目录迷路时用来重置自己如果你用的是 PowerShell光秃秃的cd含义不一样——它会带你回老家也就是C:\Users\你的名字。同一个词两家人不同脾气这是命令行世界里最常见的小陷阱。真正有用的是这一句心法迷路了就cd ..往上走走到根再往下找。反复敲两三次你就会建立空间感了。第 3 步node 草稿纸。在终端里输入node你会看到提示符变了变成一个大于号这是 Node 的即时草稿纸正式名字叫 REPLRead-Eval-Print-Loop读—算—印—循环意思是你给它一句它算一句算完印出来然后接着等。现在这台发动机空转着专门等你出数学题。敲22你会看到4再来几道一行一行试EngFlow 很好玩// 字符串会用 拼起来12*7-4Math.max(88,95,72)// Math 是自带的一把计算器尺子consta3;a*100// const 是先声明一个盒子再用它退出草稿纸回到终端.exit// 草稿纸自己的退出口令注意点号别丢也可以按两次 Ctrl C原理解释这段草稿纸跟浏览器控制台第 2 章玩过的那个 F12 里的 Console是同一类东西只是住在终端里。你会发现 JavaScript 里学过的每一条语法在这里都能立刻试。从此你有一个随身实验台任何一句 JS 语法不确定先扔进node里试一把比在脑子里猜可靠一百倍。这个习惯全书都会用到。实验 3装 VS Code变中文装三个扩展10 分钟第 1 步装本体。去https://code.visualstudio.com点蓝色 Download装默认选项即可。第 2 步把它变成中文。按Ctrl Shift P这是 VS Code 的万能召唤键会弹出一个能打字的大搜索框叫命令面板。输入Configure Display Language回车选Install Additional Languages…。列表里找到Chinese (Simplified)点它右边的 Install。右下角弹出提示点Change Language and Restart。VS Code 重启界面变中文。原理解释VS Code 出厂只带英文中文是装在扩展里的。也就是说语言包本身也是一种扩展。所以你会遇到一件怪事界面已经是中文但报错信息还是英文。这是行业惯例——所有工具的报错都保持英文方便全世界的程序搜到同一个答案。所以别指望所有东西都能翻译本书会在每次出现英文报错时给你中文解释。第 3 步装扩展。点左边那一竖排图标里的扩展四个方块其中一个是斜的或者直接按Ctrl Shift X。在搜索框里挨个搜下面三个点安装扩展名搜这个publisher干什么用Vue - OfficialVue让 VS Code 认识.vue文件高亮、补全、报错Tailwind CSS IntelliSenseTailwind CSS写样式类名时把候选词递给你Error Lensusernamehw把错误直接写成一行红字摆在代码后面不用鼠标悬停注意第一个扩展以前叫Volar你在网上看到老教程说装 Volar就是它改名了。第 4 步把项目搬进来看看。菜单 文件 → 打开文件夹选D:\WorkSpace\CET6\learnEnglish。你会看到左边出现项目文件树正是第 1 章那张导览图的样子。点开src→App.vue代码五颜六色、鼠标停在任何一个名字上都有反应甚至import的每个文件都能 Ctrl点击跳进去。再按Ctrl 在下方开一个终端。你会看到提示符已经在D:\WorkSpace\CET6\learnEnglish了——这就是本章最推荐你用 VS Code 开终端的原因它天生就站在正确的位置你永远不会跨盘符迷路。不要修改任何文件看完就关掉。实验 4亲手拆一次三兄弟8 分钟这个实验要联网。不想联网的话看懂下面那张概念图也算过关。第 1 步找个空地建一个空项目。最省事的站法不用跟盘符搏斗用资源管理器打开你的文档文件夹点一下顶部地址栏把里面的路径擦干净改成cmd回车——终端直接开在文档文件夹里4.2.2 节教过的开法。如果你手上已经有一个开着的终端就先自己走到一块空地去PowerShell 里~代表你的用户目录cd~\Documentsmkdirmy-firstcdmy-firstdir你会看到dir的结果里写着0 个文件——空地一块什么都没有。第 2 步写购物清单。npminit-ydirnpm init是 npm 的填表命令它会问你十来个问题项目名版本作者。后面加一个-yyes 的缩写表示全部用默认答案别问了。你会看到屏幕上打印一段 JSON然后dir里多了一个文件package.json用 VS Code 或者记事本打开它你会看到类似这样一坨{name:my-first,version:1.0.0,main:index.js,scripts:{test:echo \Error: no test specified\ exit 1},keywords:[],author:,license:ISC}这就是购物清单的真身。现在它是空的一个依赖都没写只写了名字、版本和一个叫scripts的格子。scripts是快捷按钮表第 5、6 章的主角先记个脸熟。第 3 步装一个包看货架怎么长出来。npminstalllodashdir你会看到屏幕刷出几行进度“added 1 package”然后dir里多了一个文件夹node_modules package-lock.json打开package.jsondependencies那一格里多了一行dependencies:{lodash:^4.17.21}三兄弟在这一分钟内全部现身了清单package.json记了一笔货架node_modules被建出来并放进了真实的代码文件小票package-lock.json自动打印。现在去node_modules里逛一圈不要动只看。你会发现lodash文件夹里躺着几百个.js小文件。这才是安装这个词真正发生的物理过程网上的代码被复制到你硬盘上的这个文件夹里了。没有任何注册表、没有任何魔法。第 4 步用一用它。node在草稿纸里输入const_require(lodash);_.chunk([1,2,3,4,5,6,7],3)你会看到[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7 ] ]_.chunk的意思是把一个大数组按每 3 个一段切成小块。你自己完全能写出这个函数一个for循环就够但它已经有人写好、测试过、免费放在商店里了——这就是 npm 世界的日常。原理解释require(lodash)这句话里藏着一个动作Node 拿着lodash这个名字去当前文件夹的node_modules里找同名文件夹找到了就把它里面的代码端上来。找不到就一层层往上找全找不到就报错说_MODULE_NOT_FOUND。这条查找路线解释了为什么node_modules必须放在你项目文件夹里面——发动机只会顺着脚下往上摸。第 5 步概念不必动手npx 长什么样。npx cowsay你好呀npx会自己去商店把cowsay借过来本地没有就临时下载到一个缓存里跑完把结果还给你你家的package.json上不会多这一笔_______ 你好呀 ------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||一头ASCII 奶牛把你说的话顶在背上。这就是 npx 的画像借来跑一次不进我家账本。第 5 章的npm create vitelatest干的正是这件事——把脚手架工具借过来给我们变出一个项目然后它自己退场。4.4 回到 EngFlow三件工具在这个项目里各住哪儿现在回头看D:\WorkSpace\CET6\learnEnglish你会发现本章讲的东西全都印在上面。先看清单本体这就是我们项目的package.json一共 27 行本章只认脸第 6 章逐行读// 摘自 package.json第 1-11 行{name:engflow,private:true,version:0.1.0,type:module,scripts:{dev:vite,build:vue-tsc --noEmit vite build,preview:vite preview,tauri:tauri},对上一比三件事立刻清楚了它就是你实验 2 里npm init -y生成那种文件的加强版。同样的格子name、version、scripts只是内容是真有人认真填过的。scripts是快捷按钮表。表上写着dev这个按钮执行vite这句话。所以以后你敲npm run dev其实是在喊“清单上的dev按钮按下去。”npm run就是按清单上的按钮这个动作。private: true是一句声明“这个项目不上架商店别把我传到 npm 上去。”第 4.2.4 节说过 npm 是商店——商店里既能下载也能上传这行就是给自己的上传门加了把锁。再看这台机器上工具们的住址D:\WorkSpace\CET6\learnEnglish\ ├─ package.json ← 购物清单第 6 章逐行读它 ├─ package-lock.json ← 购物小票锁死每个包的精确版本 ├─ node_modules\ ← ★ 仓库货架Vite、Vue、各种工具的真身住这里 │ ├─ vite\ │ ├─ vue\ │ ├─ vitejs\ │ ├─ tauri-apps\ │ └─ …成千上万个小文件夹 ├─ src\ public\ src-tauri\ index.html ← 这些才是我们的菜谱 └─ dist\ ← 打包出来的成品菜工具生成的不用管看出规律了吗一个项目文件夹里其实混住了三种东西——种类例子谁写的你要不要读它菜谱源码src\、index.html我们要全书都在读它清单与设置package.json、vite.config.ts我们填格式是规定要第 5、6 章借来的工具与成品node_modules\、dist\商店不要永远不要手动改以后你会在项目里看到各种教程教你删掉 node_modules 重装——现在你能听懂这句话的真正含义了把货架清空然后拿着清单去商店重新买一遍。因为清单还在所以什么都不丢。这是程序员用得最多的三板斧之一。最后本章三件工具在这个项目里的分工可以画成一条线你在 VS Code高级记事本里改 src\App.vue 的一行字 │ ▼ 你在终端打字对话框里敲 npm run dev │ ▼ node 启动发动机点火按 package.json 的 scripts 表 去 node_modules 里请出 Vite 这个工具 │ ▼ Vite 把 .vue 文件加工成浏览器能懂的网页 在本机开一个服务器 → 屏幕上出现 EngFlow 的界面这条线里第 3、4 步正是下一章Vite的全部内容。4.5 小毛病大修理毛病 1明明装完了电脑说我不认识 node现象。你刚装完 Node.js一路绿灯信心满满地敲PS C:\Users\你node-vnode不是内部或外部命令也不是可运行的程序或批处理文件。如果你开的是 PowerShell 且提示策略问题报错会长得不一样但核心那句话是同一句node这个词它不认识。你的第一反应一定是没装上于是再装一遍、再报错、再装一遍——本章劝退率最高的死循环就是这么来的。原因。电脑找命令的方式是翻一本叫PATH的电话簿一个文件夹地址列表命令行敲一个词它就挨个去这些地址里找同名程序。PATH 就是那本电话簿的名字你在 4.2.1 里见过一次Add to PATH那个勾。坑在这里终端窗口在打开的那一瞬间抄了一份电话簿快照之后再也不更新。Node 安装程序确实把它自己写进电话簿了——但你手上那个终端是安装之前就打开的它抄的是旧版电话簿里面自然没有 node。修理。一句话把终端全部关掉重新开一个。不是敲.exit是关掉那个窗口最保险的做法是把所有开着的终端窗口都关掉因为 Windows 有时会共享同一个进程环境。重开后再敲node -v数字就出来了。【配图说明两格对比。左格旧终端一个窗口举着一本复印的电话簿上面没有 nodejs 这一行旁边安装程序刚把正本写好标注快照是旧的右格新终端同一个窗口举着新版电话簿nodejs 那一行被红笔圈出来标注重开重新复印一次。标题重开终端为什么能治病】验证工具。想知道它到底住哪儿敲where.exenodecmd 里直接敲where node也一样PowerShell 里必须带上.exe——因为光秃秃的where在那一家是另一个命令的别名它只会闷声回你一行空白看起来像找不到。有输出电话簿里找得到一句找不到文件还是旧快照再关一次窗口。顺手记一条通用规律本书后面装 Rust、改配置都会遇到同一件事——装完 / 改完重开终端。这是命令行世界的通用药方等第 27 章讲打包发布、要对着环境和版本从头核一遍时它还会被拎出来当第一条。毛病 2cd打了半天人还在原地现象。你的终端开在 C 盘默认就是这里你想去 D 盘的项目里下面这幕是 cmd 的怪脾气PowerShell 不这样见修理后的说明C:\Users\你cdD:\WorkSpace\CET6\learnEnglish C:\Users\你dirVolumeindrive C has no label....打印出来一堆 C 盘的东西命令敲进去了没报错可提示符前面的盘符纹丝不动还是C:。原因。在老资格的cmd里每一个盘符各自记着我在这个盘里站在哪个文件夹。cd不带/d只允许你换文件夹不允许你换盘于是它老老实实把 D 盘的那个位置记了下来但脚还站在 C 盘。修理。三种写法任选# 写法 ①加 /d一次把盘和文件夹都换掉本书推荐你记这个# ⚠️ 这个开关只有老资格的 cmd 认PowerShell 里敲 cd /d 会回你一句# 找不到接受实际参数的位置形式参数那不是命令写错了是这家不认这个开关cd/d D:\WorkSpace\CET6\learnEnglish# 写法 ②分两步——先切盘再 cdcmd 和 PowerShell 都吃这一套最保险D:cd\WorkSpace\CET6\learnEnglish# 写法 ③最省心——在资源管理器地址栏直接敲 cmd 回车# 终端开出来就站在正确的文件夹里压根不用 cd如果你用的是 PowerShell提示符长这样PS C:\跨盘符的cd其实是能直接生效的——也就是说同一个坑要分人踩。这也是本书为什么建议你先在 VS Code 里用Ctrl 开终端那条路根本不需要你懂这些它一定给你开在正确的位置上。为什么这个坑值得专门一节因为下一章开始几乎所有命令都要求你站在项目文件夹里执行。npm install站错了地方会在别的文件夹里凭空建出一个node_modulesnpm run dev站错了地方就更有趣了——npm 找清单的规矩是先看脚下脚下没有就往上一层层找一直找到磁盘根。于是站错地方有三种下场你在第 6 章实验 4 会各亲手撞一次走进一间自己挂着清单、清单上却没有dev按钮的屋子比如实验 4 那个my-first它回你一句Missing script: dev你走进别人家厨房按他家的按钮按不动是正常的走进一间上下都摸不到清单的空屋子它报的是另一句ENOENT: no such file or directory ... package.json连清单都没找着而站在本项目的子文件夹里比如src-tauri它会一路往上摸到根目录那份清单按钮照样按得响——只是它把那个子文件夹当成了工地做出来的东西不对味。先确认脚下再敲命令养成这个肌肉记忆。4.6 本章你会解释合上书用自己的话讲给家长听关键词给你兜底我们已经有浏览器了为什么还要装 Node.js关键词发动机、V8、工具本身也是 JS 写的终端里当前目录是什么为什么同一句命令在不同目录里结果不一样关键词站在哪个文件夹、快照用商店这个比喻把 npm、package.json、node_modules各说一句话。哪个该发给朋友哪个不该关键词清单要发货架不发为什么装完 Node 必须重开一个终端窗口关键词PATH 电话簿、打开瞬间抄快照VS Code 出厂时认识.vue文件吗它靠什么变认识的关键词扩展 / 插件 / Vue - Official参考1→4.2.12→4.2.2 与 4.5 毛病 23→4.2.44→4.5 毛病 15→4.2.3 与 4.3 实验 3。4.7 练习★三件套点名。关掉所有窗口从零开始打开终端 → 走到D:\WorkSpace\CET6\learnEnglish→ 用dir证明你到对了地方提示结果里应该有src、src-tauri、package.json这三样→ 用cls擦干净屏幕 → 用node进草稿纸算出13 * 17→ 退回终端。全程不许问人。★★电话簿观察员。在同一个终端里依次敲这三条把输出抄下来然后回答“电脑找命令时到底翻了哪几个地址重开终端’为什么会改变结果”echo%PATH% where.exenodewhere.exenpm如果你用的是 PowerShell第一条换成写$env:Path再回车后两条一定要带.exe——where在 PowerShell 家已经被另一个命令征用了不带.exe它不会报错只会安静地什么都不给你。地址多到眼花是正常的只需要在一大堆里认出nodejs那个字样在哪。★★清单与货架观察员。在 VS Code 里打开本项目只做三件事不许修改① 在文件树里数一数node_modules下面第一层有多少个文件夹VS Code 会在名字右边显示数字或你手动滚一遍② 打开package.json抄下dependencies里四个包的名字③ 回答“如果我把node_modules整个删掉package.json会少一个字吗我该怎么把货架补回来”★★★思考题为什么没有一键搞定现在你明白了跑起 EngFlow 要装 Node.js、要装 Rust、要装 VS Code、还要装扩展。假如你是微软你会不会给写代码的人做一个一键安装全部的工具你觉得为什么市面上没有把你的推理写三五句给家长听。提示想一想你写别的种类的程序时需要的工具是不是完全不一样。灶有了对话框有了案板有了。下一章我们去认识那台真正会变房子的机器——Vite。你会第一次用一条命令凭空造出一个能跑的项目并且搞明白npm run dev按下去之后那台服务器到底在你电脑的哪个位置上开门。