尧图网页设计 
本章你将学会说清脚手架scaffold这个听起来有点别扭的词到底替你干了哪些活从头照抄一遍命令凭空造出一个能跑的项目并把它的标题改成你自己的名字把npm run dev按下去之后发生的三件事讲成一条线起服务器、开门牌号、盯文件解释 localhost 和端口是什么以及为什么一个网页软件要在你自己电脑上开服务器说清 EngFlow 的端口为什么必须是1420这个约定分别写在哪两个文件的哪一行需要的前置章节第 1 章源码 vs 软件、index.html是出生证明、第 2 章三种语言各写什么、第 4 章三件套装齐了npm 三兄弟认识了对应项目文件vite.config.ts、src-tauri/tauri.conf.json、index.html、package.json5.1 从一个场景开始上一章我们说要进厨房炒菜。现在假设你真要盖一座厨房。如果每次做饭之前你都得先烧砖、抹水泥、拉电线、通自来水、装抽油烟机、给灶台试火——那么你这辈子真正炒出来的菜可能只有三顿剩下时间全在盖房子。写代码的真相就有点接近这个荒诞画面。你现在已经会写 JavaScript 了可是要让它变成一个有界面、能开发、能打包、能发布成桌面软件的项目你至少要亲手解决下面这些事建一个项目文件夹放一张package.json清单去商店把vite买下来还得把 Vue 的翻译插件vitejs/plugin-vue一起买写一个index.html当出生证明里面还得写对那一行script typemodule src/src/main.ts配 TypeScript 的规则文件tsconfig.json十几行一行写错就满屏红在终端里把开发服务器开起来还要知道它开在哪个地址想让代码改了能立刻看到效果——这一条你自己根本做不到需要专门的工具盯着文件最后要发布还得让所有代码被压缩、合并、搬进一个叫dist的文件夹……这七件事每一件都跟英语学习方法毫无关系。它们叫重复的杂活行业里有个说法boilerplate样板代码——像填表时那半页永远一样的套话。于是有人写了一个工具专门替你把这些杂活一次干完。这个工具就是本章的主角Vite读作 /vit/法语快的意思中文圈常念维特。它的同类老前辈叫 webpack你听一眼就知道它不快。而 Vite 这种一条命令给你变出一整套项目骨架的工具有个形象的名字脚手架scaffold。盖房子时先搭的那层钢管架子房子盖好之后它就拆掉退场了——脚手架不是房子的一部分但没有它房子盖不起来。本章要解决的核心问题脚手架按下那一下还有npm run dev按下那一下你的电脑上到底发生了什么第 4 章我们只走到清单上的按钮表scripts门口本章推门进去。5.2 原理npm run dev按下去之后5.2.1 第一件事在你自己的电脑上开一个服务器先想一个问题浏览器是怎么显示一个网页的它不是去硬盘上抓一个文件。浏览器的天性是给我一个网址我去问一台服务器要内容。你打开www.baidu.com浏览器就朝远在机房的那台机器问一句把首页发给我对方发了它才画出来。浏览器这辈子只跟服务器说话。关键来了服务器并不是某台远方的大机器它只是一种角色——谁负责回话谁就是服务器。一个跑在你电脑上、专门等着回答给我看 index.html的小程序也是一台服务器。Vite 干的第一件事就是这个Vite 在你自己的电脑上启动一个小型网页服务器把src里的.vue、.ts、.css现场翻译成浏览器看得懂的 HTML、CSS、JavaScript然后作为回话内容发给浏览器。所以你在开发时看到的画面其实走的是一条完全在自己家里绕了一圈的路浏览器你看到的界面 │ ①喂把首页给我 ▼ Vite 的开发服务器跑在你电脑上的一个小程序 │ ② 读 src\App.vue 等源码 │ ③ 现场翻译.vue → 浏览器能懂的 JS CSS ▼ ④ 把翻译好的东西回给浏览器 → 界面出现【配图说明一台笔记本电脑里面画两个小人互相递纸条左边小人贴浏览器右边小人贴Vite 服务器中间一条双箭头写着 localhost:1420右下角注全程不出这台电脑】这就回答了一个可能的疑惑为什么我要在本地装 Vite 而不是直接双击index.html因为双击打开的文件地址栏长这样file:///D:/WorkSpace/...——它不是从服务器来的很多能力会被浏览器扣住不放模块加载、跨目录取数据、后面第 13 章的数据读写都会碰壁。只有从服务器来的网页才是完整体。这也是 Vite 一定要开服务器而不是直接开文件的原因。5.2.2 localhost 与端口门牌号和房间号上面那张图里浏览器往哪里发问答案是这串东西http://localhost:1420 └───┬────┘ └─┬─┘ 哪栋楼 哪个房间localhost是一个固定代号意思是我这台电脑自己。它的真实地址是127.0.0.1——四段数字中间点着小圆点是每台电脑给自己留的专属门牌号永远指回你自己这台机器。你把http://localhost:1420敲进浏览器本质上是朝自己的电脑喊一嗓子——信号一步都没离开过这台机器断网也照样能用。这就是 EngFlow 断网也能背单词的底层原因之一。1420是端口port。如果说 localhost 锁定了哪台电脑端口就锁定这台电脑上的第几号门。一台电脑可以同时开很多个服务器总得有个办法分清楚谁在听哪个门。端口就是那个门牌号是一个 1 到 65535 的数字。默认情况下Vite 挑5173号门。EngFlow 挑1420号门——为什么5.4 节有完整答案。一个必须建立的心智模型一个端口同一时刻只能站一个服务器。这就是本章小毛病大修理里那桩事故的全部根源。顺便把门牌号这件事想通一层一台电脑上可以同时开好几道门。你可以一边让my-app站在 5173一边让 EngFlow 站在 1420两个浏览器标签各看各的互不打扰——因为它们问的是不同的门。真正会打架的只有一种情况两个服务器抢同一个号。还有一件事值得现在就说清楚很多人绕不过弯端口不是软件它只是一个号码。你关掉 Vite1420 这个号就空出来了它不会被留在后台继续占着。反过来只要那个跑 Vite 的进程还活着——哪怕你把它那个终端窗口最小化了、哪怕你换了一台显示器——门就还开着。第 5.5 节那桩事故99% 是你以为你关掉了其实只是把窗口藏起来了。5.2.3 第二件事它开始盯你的文件热更新Vite 干的第二件事是会让你第一次体会到编程居然可以这样服务器开起来界面显示出来了你回到 VS Code改一个字按保存Ctrl S屏幕眨一下界面就变了——不需要你手动刷新也不需要重启那个npm run dev。这个魔法有个正式名字热模块替换Hot Module Replacement缩写 HMR本书统一叫它的通俗名字热更新。原理是你按下 Ctrl S ▼ Vite 早就在盯着src 里的每一个文件这个动作叫 watch观察 ▼ 它发现 App.vue 变了 → 只把这一个文件重新翻译一遍 ▼ 通过一条常驻的双向通道WebSocket浏览器和服务器之间拉的一根内部电话线 ▼ 对浏览器说喂把第 7 号零件换一下。 ▼ 浏览器只换那一小块 —— 页面位置、你输入到一半的文字全都还在对比一下没有热更新的旧时代改一个字 → 手动按 F5 → 整个页面从头再来 → 表单里输了半天的内容全没了、你刚才滚到的位置也回去了。热更新把改—看这个循环从十几秒压到了零点几秒。一个程序员一天要点几百次这个循环Vite 因此成了本章的主角。还有一个技术细节值得你现在就记住因为它在本项目的一个配置文件里留下了痕迹Vite 盯文件时是挨个文件夹看有没有动静。而src-tauriRust 盒子里面有个叫target的文件夹装的是 Rust 编译的中间产物能长到几个 GB、几万个小文件。要是 Vite 傻乎乎地去盯它你每编译一次它就你以为我改代码了那我重发一次界面就会莫名其妙地自己抖动。所以我们告诉 Vite 别去看src-tauri——这一句配置就在 5.4 节。【配图说明上半旧时代改代码 → 整页炸成碎片 → 重新拼下半HMR改代码 → 只有一块积木被换掉其余不动标题热更新换一块砖不拆房子】5.2.4 第三件事分清开发和生产打开本项目的package.json按钮表里有这么几行真实文件第 6-11 行这里只截两个// 摘自 package.json第 6-11 行的节选scripts:{dev:vite,build:vue-tsc --noEmit vite build},dev是development开发的缩写给你自己用的随改随看图的是快。发动机怠速转着门永远开着。build构建把源码从头到尾翻译、检查、压缩、合并产出成一个叫dist的文件夹——这就是第 1 章说的那盘做好的菜。菜做好之后不需要灶台dist里的东西可以直接搬走。为什么需要两套因为开发时我们要的是反应快交付时用户要的是体积小、跑得快。同一份源码两种加工方式。第 27 章打包发布时我们会正式把这条链走完本章只要知道门是分开的npm run dev是实验室npm run build是出厂。5.3 动手时间下面四个实验按顺序做全程在一个新开的终端里。这些命令都在你自己新建的临时项目里跑不会碰到learnEnglish。记住第 4 章那条铁律先看清提示符里自己站在哪儿再敲。实验 1一条命令变出一座毛坯房5 分钟先站到一个空旷的地方本项目之外然后# ① 走到你自己的文档文件夹更省事的办法在资源管理器地址栏敲 cmd 回车# 终端直接开在文档文件夹里见第 4 章PowerShell 里也可以用 cd ~\Documentscd~\Documents# ② 命令脚手架变出项目项目叫 my-app模板选 vue-tsnpmcreate vitelatest my-app ----templatevue-ts# ③ 走进去看看它给你留了什么cdmy-appdir你会看到第 ② 条命令刷出几行字。老版会问一堆问题新版大概率直接开工如果它多问了你两个问题第一个关于要不要用实验性的打包引擎选 No第二个要不要顺手帮你装依赖并启动随你——选了 Yes它会把实验 2 和实验 3 一起替你做掉。dir的结果是这样的index.html package.json vite.config.ts tsconfig.json README.md public\ src\原理解释对照 5.1 那七件杂活——全部在十秒内干完了。我们一行都没写。这就是脚手架的价值它不是帮你写业务代码的工具它是帮你把不写就会浪费你一上午的套话一次说完的工具。打开vite.config.ts瞄一眼用 VS Code 打开这个新文件夹// my-app/vite.config.ts —— 脚手架生成的样子一共就 5 行import{defineConfig}fromviteimportvuefromvitejs/plugin-vue// https://vite.dev/config/exportdefaultdefineConfig({plugins:[vue()]})再打开它的package.jsonscripts里写着dev: vitedependencies里有vue。是不是有种眼熟的感觉——它就是 EngFlow 的简化版。记住这个简化版长什么样5.4 节我们拿它跟真项目做对比。但你现在还不能跑它。看见node_modules了吗没有。脚手架只给了清单没给货架第 4 章 4.2.4 的比喻。实验 2上货、点火、开门牌号5 分钟# ① 拿着清单去商店把货补上要联网十几秒到几分钟npminstall# ② 按一下清单上的 dev 按钮npmrun dev你会看到第 ① 步刷一堆进度结束后dir里有了node_modules本实验不改动 EngFlow任何项目里同理package-lock.json也被自动写好或更新。第 ② 步刷出这几行——本章最重要的一屏字VITE v8.3.1 ready in 412 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h enter to show help这四行每个字都有意义逐行读给你看屏幕上那行它在告诉你什么VITE v8.3.1 ready in 412 ms服务器已点火版本 8.3.1版本号以你屏幕上为准差几个小数点太正常了用了 412 毫秒这就是 Vite 名字里那个快Local: http://localhost:5173/自家门牌号。想看你做的东西浏览器敲这个Network: use --host to expose“想让同 Wi-Fi 下的手机看加个--host开关我才肯对外开门”——默认不对外是安全考虑press h enter to show help在这个终端里按h回车会给你一份小菜单能看所有已注册模块、能直接复制网址你的版本号和毫秒数肯定不一样别慌如果 5173 号门被人占了这里会显示 51745.5 节专门治这件事。然后# ③ 别关这个终端它是服务器关掉就关门。# 新开一个浏览器标签地址栏输入# http://localhost:5173# 也可以按住 Ctrl 点一下上面那行蓝绿色的网址VS Code 会帮你打开你会看到一个网页底色是深是浅取决于你系统设置中间两个 logo下面一个按钮写着count is 0。每点一下数字加一。原理解释现在你电脑上同时站着两个程序终端里的 Vite 服务器和浏览器。浏览器显示的每一样东西都是从http://localhost:5173这道门里取回来的。你现在就能证明这一点回到终端按Ctrl C把服务器关掉终端会回到普通提示符再回浏览器点一下页面按刷新——This site cant be reached localhost 拒绝连接。服务器没了门牌号后面没人应答了。这个关服务器→页面立刻打不开的动作是理解 localhost 和端口最快的一课比读十段文字都管用。看完记得重新npm run dev把它点亮。实验 3亲手按一次热更新5 分钟服务器开着我们改代码。第 1 步改标题。用 VS Code 打开my-app/index.html找到title那一行改成一个你喜欢的名字!-- 摘自 my-app/index.html只改 title 一行 --title我的第一个 Vite 项目/title按Ctrl S保存。你会看到浏览器标签页上的标题立刻变了。终端里同时出现一行11:24:07 [vite] (client) page reload index.html原理解释page reload意思是整页重来。因为index.html是整个网页的出生证明第 1 章换它就得从头再来一次。改它不需要重启npm run dev——Vite 一直在盯着它这是 watch 在干活。第 2 步改组件。打开src/components/HelloWorld.vue找到那个按钮的文字类似buttoncount is {{ count }}/button把它改成button我点了几次span{{ count }}/span/button按Ctrl S。你会看到浏览器里那个按钮上的字原地变了页面并没有闪白你刚才点出来的数字也还在。终端里出现的是另一句话措辞可能略有差异11:26:31 [vite] hot updated: /src/components/HelloWorld.vue对比一下改index.html是page reload整页重来改.vue是hot updated换一块砖。这就是热模块替换的真身。hot updated意味着浏览器只被换了那一小块其余状态原样保留。第 3 步故意写错一次。把HelloWorld.vue里随便一个引号删掉保存。你会看到浏览器整屏变成红色/黑底的一张大报错卡明确指着是哪个文件的哪一行终端里也有对应的红字。你按Ctrl Z撤销那个删除、保存报错立刻消失界面回来了。原理解释这叫报错上屏。工具故意把它懂的东西翻译成一句人话直接糊在你脸上不让你猜。从此你要建立一个受用终身的习惯程序不对劲第一件事看终端的报错第二件事看浏览器整屏的红卡或 F12 控制台。本书后面每一次小毛病大修理都按这个思路走。最后再玩一个命令行的通用招数——给命令加开关# 先按 Ctrl C 停掉再启动并指定门牌号# npm run dev 后面必须多加两个 -- 作用是后面的开关请转交给 vitenpmrun dev ----port3000你会看到这次终端报的 Local 地址变成http://localhost:3000/浏览器开新地址就能看见同一个项目。别停它再开第二个终端跑一次不带开关的npm run dev——它会去默认那道门51733000 那个号没人跟它抢各站各的门。要是你想办法让两个都去抢 5173第二个就会自己往后挪号5174、5175……挪到有空位为止一次最多试十个号。这就是号被占了就自己换个号的行为5.5 节我们会看到 EngFlow拒绝这种行为。实验 4把这套流程用语言复述一遍2 分钟不动手对着家长把下面这段话补全并说清楚说不上来的地方回到 5.2 找答案npm create vite → 给了清单和骨架没给货架 npm install → 照清单去商店搬货生出 node_modules npm run dev → node 请出 ViteVite 开一个本机服务器一个端口号 浏览器从那个端口取网页Vite 一边翻译一边盯着文件 Ctrl S → watch 发现变化 → 重翻译 → 通过内部电话线通知浏览器换零件 Ctrl C → 服务器关门浏览器再也取不到东西【配图说明一条横向流水线六个工位分别写npm create vite / npm install / npm run dev / localhost:端口 / CtrlS 热更新 / CtrlC 关门每个工位下面标一句职责标题从零到看见界面一共六步】5.4 回到 EngFlow为什么是 1420现在带着刚学会的一套流程回来看真项目的两个配置文件。它们加起来解释了本章所有问题。真文件 ①vite.config.ts逐行本项目这个文件一共 33 行全文如下这就是完整内容不省略// 摘自 vite.config.ts第 1-9 行import{defineConfig}fromvite;importvuefromvitejs/plugin-vue;importtailwindcssfromtailwindcss/vite;// ts-expect-error type error without types/node packageimportprocessfromnode:process;consthostprocess.env.TAURI_DEV_HOST;// https://vite.dev/config/exportdefaultdefineConfig(()({plugins:[vue(),tailwindcss()],行这一行在干什么第 1 行从商店请出defineConfig这个表格模板用它包起来的配置别人一看就懂、写错还会报警第 2 行请出 Vue 的翻译插件没有它Vite 读到.vue文件会当场看不懂跟实验 1 里脚手架生成的那一行一模一样第 3 行请出 Tailwind 的 Vite 插件——给界面穿衣服那套样式工具第 2 章讲 CSS 时会回来第 4 行一句工程师的诚实话“下面这行会让编辑器挑刺但它没错我知道我在干什么”ts-expect-error是预告一个已知误报第 5-6 行读一个叫TAURI_DEV_HOST的环境变量存进host。平时它是空的只在用手机/另一台机器调试时才有值第 9-10 行正式开写配置把两个插件登记进plugins名单然后是给 Tauri 定制的那三小段注释就是原作者留的说明书英文注释我逐条翻给你// 摘自 vite.config.ts第 12-19 行// Vite options tailored for Tauri development and only applied in tauri dev or tauri build//// 1. prevent Vite from obscuring rust errorsclearScreen:false,// 2. tauri expects a fixed port, fail if that port is not availableserver:{port:1420,strictPort:true,clearScreen: false——别让 Vite 每次重跑都把终端屏幕擦干净。为什么因为 Tauri 那边是 Rust 在编译Rust 的报错信息很长很有价值Vite 一清屏就把人家辛苦打印的错误擦没了。这一行是两家合租要讲礼貌的典型样本。port: 1420——门牌号钉死 1420。strictPort: true——“这个号被人占了就直接罢工不许自己挪去别处。”这句注释tauri expects a fixed port就是全部原因Rust 那边事先写死了要去 1420 找人下面真文件 ②Vite 私自换号Rust 就扑空。再往下两段// 摘自 vite.config.ts第 20-31 行host:host||false,hmr:host?{protocol:ws,host,port:1421}:undefined,watch:{// 3. tell Vite to ignore watching src-tauriignored:[**/src-tauri/**],},host: host || false——“有人要远程调试就暴露出去平时只在自家 localhost 开门”。默认不向整个局域网开放这是安全上的好习惯。hmr: host ? {...} : undefined——只有真机调试时热更新才走 1421 号门平时留空按默认来。ws是 WebSocket 协议的缩写5.2.3 里那根内部电话线。ignored: [**/src-tauri/**]——正是 5.2.3 讲过的那句别去盯 Rust 那个装了几万个小文件的仓库防止热更新无端抖动。真文件 ②src-tauri/tauri.conf.json约定的另一半Rust 盒子读的是这个文件build这一段真实第 6-11 行// 摘自 src-tauri/tauri.conf.json第 6-11 行build:{beforeDevCommand:npm run dev,devUrl:http://localhost:1420,beforeBuildCommand:npm run build,frontendDist:../dist},看第 8 行devUrl: http://localhost:1420。现在两个文件摆在一起1420 的完整答案出来了vite.config.ts src-tauri/tauri.conf.json server.port 1420 ←必须一致→ build.devUrl http://localhost:1420 server.strictPort true build.beforeDevCommand npm run dev 不许换号 Rust 启动前先帮你把 Vite 点上为什么偏偏是 1420 这个数因为它不是算出来的是约好的。Tauri 官方脚手架create-tauri-app和 Vite 同类的脚手架生成 Vue 项目时模板里就把 Vite 的端口设成 1420、把devUrl也写成同一个值——两边写同一个号才能一插就对。这个数本身毫无玄机甚至官方自己也没解释为什么选它不是第 1420 位质数也不是什么纪念日。所以你以后看到任何一个 Tauri Vite 的项目端口十有八九是 1420。这种没什么道理但大家都这么写的现象行业里叫约定convention。它的价值是你换一台电脑、换一个人写的项目闭着眼睛都知道去哪道门找人。顺带看两个生产版的孪生兄弟beforeBuildCommand是出厂前先按 build 按钮对应实验 4 那句话里的npm run buildfrontendDist指向../dist——那个做好的菜文件夹路径前面的../是从这个文件夹往上一层再找第 4 章cd ..的那个往上走。Rust 打包安装程序时要搬的就是它。5.5 小毛病大修理毛病Error: Port 1420 is already in use现象。你在项目里敲npm run tauri dev或先敲了npm run dev终端刷了一堆进度最后卡在这里VITE v8.3.1 ready in 120 ms error when starting dev server: Error: Port 1420 is already in use更气人的是屏幕上半段明明已经打印了ready看起来像成功了但它立刻罢工了。原因分三层一层比一层重要。物理层5.2.2 那条铁律——一个端口同一时刻只能站一个服务器。1420 号门后面已经站着人了。最可能的真凶那个人就是你自己上次开的那个 Vite。它很乖你不亲口叫它停在那个终端按Ctrl C它是不会自己关门的。你换了个新终端又点一次开门于是撞门。典型场景VS Code 开了好几个终端标签、或者上一次npm run tauri dev你直接关窗口没先 CtrlC。为什么它不学 Vite 那样自己挪个号因为vite.config.ts第 19 行写着strictPort: true。这是故意的也是 5.4 节的全部结论Rust 那边死盯着http://localhost:1420tauri.conf.json第 8 行换号等于让 EngFlow 打开一个空白窗口——不如立刻撞死在门口至少报错写得清楚。这是工程师的一个审美宁可吵闹地失败不要安静地错。修理按顺序试一般第一步就好了。第一步找出那个还开着的旧终端VS Code 终端面板右上角有个下拉能列出所有终端标签切过去按Ctrl C。看到提示符回来了门空了再重跑命令。第二步如果 engflow 的窗口还挂在桌面上——直接关掉那个窗口再跑。第三步实在找不到是谁占的用命令去查门牌号后面站着哪个进程# 在终端里查谁在听 1420 号门netstat-ano|findstr :1420你会看到类似这样一行最后一列是PID进程身份证号的缩写TCP 127.0.0.1:1420 0.0.0.0:0 LISTENING 24316然后按Ctrl Shift Esc打开任务管理器切到详细信息标签找 PID24316那个进程右键结束任务。要先确认它是node.exe之类再结束对不上号就问家长——关掉别人正在跑的东西是命令行世界里少数手滑会闯祸的操作。预防本章最实用的一句话每次开发只留一个跑着 Vite 的终端离开时先Ctrl C再关窗口。养成这个习惯这条报错从此不会再找你。顺带一条同族毛病如果 Vite 启动成功但浏览器显示localhost 拒绝连接——99% 是你把那个终端关掉了实验 2 亲眼见过这个现象或者你浏览器地址栏里那个号是 5173 而不是 1420。看终端里那行 Local 写的到底是什么号照着敲。这道坎到第 27 章讲打包发布时还会再露一次面——那天的活儿就是把vite.config.ts和tauri.conf.json两边的配置从头对一遍配置一致性是那时候要核的账之一。现在你已经有免疫了。5.6 本章你会解释合上书讲给家长听关键词兜底脚手架是什么它替你干了哪几件跟英语学习方法毫无关系的活关键词毛坯房、样板、清单先有货架还没有为什么开发网页一定要在本机开一个服务器不能直接双击index.html关键词浏览器只跟服务器说话、file:// 是残缺体http://localhost:1420这一串里哪个词表示我这台电脑哪个表示第几号门为什么一个端口只能站一个服务器热更新HMR和按 F5 刷新整页区别在哪Vite 是怎么知道你改了文件的关键词watch、只换一块砖、内部电话线用两句话说清 EngFlow 为什么把端口定成 1420并且为什么写了不许换号。关键词Tauri 模板的约定、两边写同一个数、strictPort参考1→5.1、5.2.42→5.2.13→5.2.24→5.2.35→5.4。5.7 练习★第二次一定更快。把 5.3 的实验 1-3 从零重做一遍这次项目改名叫my-app2模板换成vue-ts之外的一个你好奇的选项做完记得回来为什么本书还是用vue-ts。目标只有一个不看书独立跑到浏览器出现界面。★★改三处认两种现象。在my-app2里分别改①index.html的title②src/components/HelloWorld.vue里按钮上的字③src/style.css里一个背景色值。回答三个问题三种改动各需不需要重启服务器终端里各打印了page reload还是hot updated为什么 ① 和其他两个不一样★★配置翻译官。打开本项目的vite.config.ts找到clearScreen: false和ignored: [**/src-tauri/**]这两行用你自己的两句话分别解释“如果把它删掉可能会碰到什么怪事”不许去搜答案用 5.4 节讲过的原理推。★★★思考题约定的力量。Tauri 完全可以每次随机挑一个端口然后把这个号传给 Rust——技术上做得到但工程师们选择了两边都写死 1420。你觉得写死换来了什么又赌上了什么提示想想 5.5 节那句宁可吵闹地失败再想想如果你把这个项目发给同学他要改几处才能跑起来。房子会盖了门牌号懂了热更新也玩过一把了。下一章我们把 EngFlow 的package.json一行一行拆开读——那十一个依赖4 个跟用户一起走的 7 个只在工地用的每一个都是干什么的、npm run tauri dev这条链子上到底串了几个工具然后第一次看它自己弹出那个 1200×800 的窗口。 第 5 章 · Vite：不用从零搭房子
本章你将学会说清脚手架scaffold这个听起来有点别扭的词到底替你干了哪些活从头照抄一遍命令凭空造出一个能跑的项目并把它的标题改成你自己的名字把npm run dev按下去之后发生的三件事讲成一条线起服务器、开门牌号、盯文件解释 localhost 和端口是什么以及为什么一个网页软件要在你自己电脑上开服务器说清 EngFlow 的端口为什么必须是1420这个约定分别写在哪两个文件的哪一行需要的前置章节第 1 章源码 vs 软件、index.html是出生证明、第 2 章三种语言各写什么、第 4 章三件套装齐了npm 三兄弟认识了对应项目文件vite.config.ts、src-tauri/tauri.conf.json、index.html、package.json5.1 从一个场景开始上一章我们说要进厨房炒菜。现在假设你真要盖一座厨房。如果每次做饭之前你都得先烧砖、抹水泥、拉电线、通自来水、装抽油烟机、给灶台试火——那么你这辈子真正炒出来的菜可能只有三顿剩下时间全在盖房子。写代码的真相就有点接近这个荒诞画面。你现在已经会写 JavaScript 了可是要让它变成一个有界面、能开发、能打包、能发布成桌面软件的项目你至少要亲手解决下面这些事建一个项目文件夹放一张package.json清单去商店把vite买下来还得把 Vue 的翻译插件vitejs/plugin-vue一起买写一个index.html当出生证明里面还得写对那一行script typemodule src/src/main.ts配 TypeScript 的规则文件tsconfig.json十几行一行写错就满屏红在终端里把开发服务器开起来还要知道它开在哪个地址想让代码改了能立刻看到效果——这一条你自己根本做不到需要专门的工具盯着文件最后要发布还得让所有代码被压缩、合并、搬进一个叫dist的文件夹……这七件事每一件都跟英语学习方法毫无关系。它们叫重复的杂活行业里有个说法boilerplate样板代码——像填表时那半页永远一样的套话。于是有人写了一个工具专门替你把这些杂活一次干完。这个工具就是本章的主角Vite读作 /vit/法语快的意思中文圈常念维特。它的同类老前辈叫 webpack你听一眼就知道它不快。而 Vite 这种一条命令给你变出一整套项目骨架的工具有个形象的名字脚手架scaffold。盖房子时先搭的那层钢管架子房子盖好之后它就拆掉退场了——脚手架不是房子的一部分但没有它房子盖不起来。本章要解决的核心问题脚手架按下那一下还有npm run dev按下那一下你的电脑上到底发生了什么第 4 章我们只走到清单上的按钮表scripts门口本章推门进去。5.2 原理npm run dev按下去之后5.2.1 第一件事在你自己的电脑上开一个服务器先想一个问题浏览器是怎么显示一个网页的它不是去硬盘上抓一个文件。浏览器的天性是给我一个网址我去问一台服务器要内容。你打开www.baidu.com浏览器就朝远在机房的那台机器问一句把首页发给我对方发了它才画出来。浏览器这辈子只跟服务器说话。关键来了服务器并不是某台远方的大机器它只是一种角色——谁负责回话谁就是服务器。一个跑在你电脑上、专门等着回答给我看 index.html的小程序也是一台服务器。Vite 干的第一件事就是这个Vite 在你自己的电脑上启动一个小型网页服务器把src里的.vue、.ts、.css现场翻译成浏览器看得懂的 HTML、CSS、JavaScript然后作为回话内容发给浏览器。所以你在开发时看到的画面其实走的是一条完全在自己家里绕了一圈的路浏览器你看到的界面 │ ①喂把首页给我 ▼ Vite 的开发服务器跑在你电脑上的一个小程序 │ ② 读 src\App.vue 等源码 │ ③ 现场翻译.vue → 浏览器能懂的 JS CSS ▼ ④ 把翻译好的东西回给浏览器 → 界面出现【配图说明一台笔记本电脑里面画两个小人互相递纸条左边小人贴浏览器右边小人贴Vite 服务器中间一条双箭头写着 localhost:1420右下角注全程不出这台电脑】这就回答了一个可能的疑惑为什么我要在本地装 Vite 而不是直接双击index.html因为双击打开的文件地址栏长这样file:///D:/WorkSpace/...——它不是从服务器来的很多能力会被浏览器扣住不放模块加载、跨目录取数据、后面第 13 章的数据读写都会碰壁。只有从服务器来的网页才是完整体。这也是 Vite 一定要开服务器而不是直接开文件的原因。5.2.2 localhost 与端口门牌号和房间号上面那张图里浏览器往哪里发问答案是这串东西http://localhost:1420 └───┬────┘ └─┬─┘ 哪栋楼 哪个房间localhost是一个固定代号意思是我这台电脑自己。它的真实地址是127.0.0.1——四段数字中间点着小圆点是每台电脑给自己留的专属门牌号永远指回你自己这台机器。你把http://localhost:1420敲进浏览器本质上是朝自己的电脑喊一嗓子——信号一步都没离开过这台机器断网也照样能用。这就是 EngFlow 断网也能背单词的底层原因之一。1420是端口port。如果说 localhost 锁定了哪台电脑端口就锁定这台电脑上的第几号门。一台电脑可以同时开很多个服务器总得有个办法分清楚谁在听哪个门。端口就是那个门牌号是一个 1 到 65535 的数字。默认情况下Vite 挑5173号门。EngFlow 挑1420号门——为什么5.4 节有完整答案。一个必须建立的心智模型一个端口同一时刻只能站一个服务器。这就是本章小毛病大修理里那桩事故的全部根源。顺便把门牌号这件事想通一层一台电脑上可以同时开好几道门。你可以一边让my-app站在 5173一边让 EngFlow 站在 1420两个浏览器标签各看各的互不打扰——因为它们问的是不同的门。真正会打架的只有一种情况两个服务器抢同一个号。还有一件事值得现在就说清楚很多人绕不过弯端口不是软件它只是一个号码。你关掉 Vite1420 这个号就空出来了它不会被留在后台继续占着。反过来只要那个跑 Vite 的进程还活着——哪怕你把它那个终端窗口最小化了、哪怕你换了一台显示器——门就还开着。第 5.5 节那桩事故99% 是你以为你关掉了其实只是把窗口藏起来了。5.2.3 第二件事它开始盯你的文件热更新Vite 干的第二件事是会让你第一次体会到编程居然可以这样服务器开起来界面显示出来了你回到 VS Code改一个字按保存Ctrl S屏幕眨一下界面就变了——不需要你手动刷新也不需要重启那个npm run dev。这个魔法有个正式名字热模块替换Hot Module Replacement缩写 HMR本书统一叫它的通俗名字热更新。原理是你按下 Ctrl S ▼ Vite 早就在盯着src 里的每一个文件这个动作叫 watch观察 ▼ 它发现 App.vue 变了 → 只把这一个文件重新翻译一遍 ▼ 通过一条常驻的双向通道WebSocket浏览器和服务器之间拉的一根内部电话线 ▼ 对浏览器说喂把第 7 号零件换一下。 ▼ 浏览器只换那一小块 —— 页面位置、你输入到一半的文字全都还在对比一下没有热更新的旧时代改一个字 → 手动按 F5 → 整个页面从头再来 → 表单里输了半天的内容全没了、你刚才滚到的位置也回去了。热更新把改—看这个循环从十几秒压到了零点几秒。一个程序员一天要点几百次这个循环Vite 因此成了本章的主角。还有一个技术细节值得你现在就记住因为它在本项目的一个配置文件里留下了痕迹Vite 盯文件时是挨个文件夹看有没有动静。而src-tauriRust 盒子里面有个叫target的文件夹装的是 Rust 编译的中间产物能长到几个 GB、几万个小文件。要是 Vite 傻乎乎地去盯它你每编译一次它就你以为我改代码了那我重发一次界面就会莫名其妙地自己抖动。所以我们告诉 Vite 别去看src-tauri——这一句配置就在 5.4 节。【配图说明上半旧时代改代码 → 整页炸成碎片 → 重新拼下半HMR改代码 → 只有一块积木被换掉其余不动标题热更新换一块砖不拆房子】5.2.4 第三件事分清开发和生产打开本项目的package.json按钮表里有这么几行真实文件第 6-11 行这里只截两个// 摘自 package.json第 6-11 行的节选scripts:{dev:vite,build:vue-tsc --noEmit vite build},dev是development开发的缩写给你自己用的随改随看图的是快。发动机怠速转着门永远开着。build构建把源码从头到尾翻译、检查、压缩、合并产出成一个叫dist的文件夹——这就是第 1 章说的那盘做好的菜。菜做好之后不需要灶台dist里的东西可以直接搬走。为什么需要两套因为开发时我们要的是反应快交付时用户要的是体积小、跑得快。同一份源码两种加工方式。第 27 章打包发布时我们会正式把这条链走完本章只要知道门是分开的npm run dev是实验室npm run build是出厂。5.3 动手时间下面四个实验按顺序做全程在一个新开的终端里。这些命令都在你自己新建的临时项目里跑不会碰到learnEnglish。记住第 4 章那条铁律先看清提示符里自己站在哪儿再敲。实验 1一条命令变出一座毛坯房5 分钟先站到一个空旷的地方本项目之外然后# ① 走到你自己的文档文件夹更省事的办法在资源管理器地址栏敲 cmd 回车# 终端直接开在文档文件夹里见第 4 章PowerShell 里也可以用 cd ~\Documentscd~\Documents# ② 命令脚手架变出项目项目叫 my-app模板选 vue-tsnpmcreate vitelatest my-app ----templatevue-ts# ③ 走进去看看它给你留了什么cdmy-appdir你会看到第 ② 条命令刷出几行字。老版会问一堆问题新版大概率直接开工如果它多问了你两个问题第一个关于要不要用实验性的打包引擎选 No第二个要不要顺手帮你装依赖并启动随你——选了 Yes它会把实验 2 和实验 3 一起替你做掉。dir的结果是这样的index.html package.json vite.config.ts tsconfig.json README.md public\ src\原理解释对照 5.1 那七件杂活——全部在十秒内干完了。我们一行都没写。这就是脚手架的价值它不是帮你写业务代码的工具它是帮你把不写就会浪费你一上午的套话一次说完的工具。打开vite.config.ts瞄一眼用 VS Code 打开这个新文件夹// my-app/vite.config.ts —— 脚手架生成的样子一共就 5 行import{defineConfig}fromviteimportvuefromvitejs/plugin-vue// https://vite.dev/config/exportdefaultdefineConfig({plugins:[vue()]})再打开它的package.jsonscripts里写着dev: vitedependencies里有vue。是不是有种眼熟的感觉——它就是 EngFlow 的简化版。记住这个简化版长什么样5.4 节我们拿它跟真项目做对比。但你现在还不能跑它。看见node_modules了吗没有。脚手架只给了清单没给货架第 4 章 4.2.4 的比喻。实验 2上货、点火、开门牌号5 分钟# ① 拿着清单去商店把货补上要联网十几秒到几分钟npminstall# ② 按一下清单上的 dev 按钮npmrun dev你会看到第 ① 步刷一堆进度结束后dir里有了node_modules本实验不改动 EngFlow任何项目里同理package-lock.json也被自动写好或更新。第 ② 步刷出这几行——本章最重要的一屏字VITE v8.3.1 ready in 412 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h enter to show help这四行每个字都有意义逐行读给你看屏幕上那行它在告诉你什么VITE v8.3.1 ready in 412 ms服务器已点火版本 8.3.1版本号以你屏幕上为准差几个小数点太正常了用了 412 毫秒这就是 Vite 名字里那个快Local: http://localhost:5173/自家门牌号。想看你做的东西浏览器敲这个Network: use --host to expose“想让同 Wi-Fi 下的手机看加个--host开关我才肯对外开门”——默认不对外是安全考虑press h enter to show help在这个终端里按h回车会给你一份小菜单能看所有已注册模块、能直接复制网址你的版本号和毫秒数肯定不一样别慌如果 5173 号门被人占了这里会显示 51745.5 节专门治这件事。然后# ③ 别关这个终端它是服务器关掉就关门。# 新开一个浏览器标签地址栏输入# http://localhost:5173# 也可以按住 Ctrl 点一下上面那行蓝绿色的网址VS Code 会帮你打开你会看到一个网页底色是深是浅取决于你系统设置中间两个 logo下面一个按钮写着count is 0。每点一下数字加一。原理解释现在你电脑上同时站着两个程序终端里的 Vite 服务器和浏览器。浏览器显示的每一样东西都是从http://localhost:5173这道门里取回来的。你现在就能证明这一点回到终端按Ctrl C把服务器关掉终端会回到普通提示符再回浏览器点一下页面按刷新——This site cant be reached localhost 拒绝连接。服务器没了门牌号后面没人应答了。这个关服务器→页面立刻打不开的动作是理解 localhost 和端口最快的一课比读十段文字都管用。看完记得重新npm run dev把它点亮。实验 3亲手按一次热更新5 分钟服务器开着我们改代码。第 1 步改标题。用 VS Code 打开my-app/index.html找到title那一行改成一个你喜欢的名字!-- 摘自 my-app/index.html只改 title 一行 --title我的第一个 Vite 项目/title按Ctrl S保存。你会看到浏览器标签页上的标题立刻变了。终端里同时出现一行11:24:07 [vite] (client) page reload index.html原理解释page reload意思是整页重来。因为index.html是整个网页的出生证明第 1 章换它就得从头再来一次。改它不需要重启npm run dev——Vite 一直在盯着它这是 watch 在干活。第 2 步改组件。打开src/components/HelloWorld.vue找到那个按钮的文字类似buttoncount is {{ count }}/button把它改成button我点了几次span{{ count }}/span/button按Ctrl S。你会看到浏览器里那个按钮上的字原地变了页面并没有闪白你刚才点出来的数字也还在。终端里出现的是另一句话措辞可能略有差异11:26:31 [vite] hot updated: /src/components/HelloWorld.vue对比一下改index.html是page reload整页重来改.vue是hot updated换一块砖。这就是热模块替换的真身。hot updated意味着浏览器只被换了那一小块其余状态原样保留。第 3 步故意写错一次。把HelloWorld.vue里随便一个引号删掉保存。你会看到浏览器整屏变成红色/黑底的一张大报错卡明确指着是哪个文件的哪一行终端里也有对应的红字。你按Ctrl Z撤销那个删除、保存报错立刻消失界面回来了。原理解释这叫报错上屏。工具故意把它懂的东西翻译成一句人话直接糊在你脸上不让你猜。从此你要建立一个受用终身的习惯程序不对劲第一件事看终端的报错第二件事看浏览器整屏的红卡或 F12 控制台。本书后面每一次小毛病大修理都按这个思路走。最后再玩一个命令行的通用招数——给命令加开关# 先按 Ctrl C 停掉再启动并指定门牌号# npm run dev 后面必须多加两个 -- 作用是后面的开关请转交给 vitenpmrun dev ----port3000你会看到这次终端报的 Local 地址变成http://localhost:3000/浏览器开新地址就能看见同一个项目。别停它再开第二个终端跑一次不带开关的npm run dev——它会去默认那道门51733000 那个号没人跟它抢各站各的门。要是你想办法让两个都去抢 5173第二个就会自己往后挪号5174、5175……挪到有空位为止一次最多试十个号。这就是号被占了就自己换个号的行为5.5 节我们会看到 EngFlow拒绝这种行为。实验 4把这套流程用语言复述一遍2 分钟不动手对着家长把下面这段话补全并说清楚说不上来的地方回到 5.2 找答案npm create vite → 给了清单和骨架没给货架 npm install → 照清单去商店搬货生出 node_modules npm run dev → node 请出 ViteVite 开一个本机服务器一个端口号 浏览器从那个端口取网页Vite 一边翻译一边盯着文件 Ctrl S → watch 发现变化 → 重翻译 → 通过内部电话线通知浏览器换零件 Ctrl C → 服务器关门浏览器再也取不到东西【配图说明一条横向流水线六个工位分别写npm create vite / npm install / npm run dev / localhost:端口 / CtrlS 热更新 / CtrlC 关门每个工位下面标一句职责标题从零到看见界面一共六步】5.4 回到 EngFlow为什么是 1420现在带着刚学会的一套流程回来看真项目的两个配置文件。它们加起来解释了本章所有问题。真文件 ①vite.config.ts逐行本项目这个文件一共 33 行全文如下这就是完整内容不省略// 摘自 vite.config.ts第 1-9 行import{defineConfig}fromvite;importvuefromvitejs/plugin-vue;importtailwindcssfromtailwindcss/vite;// ts-expect-error type error without types/node packageimportprocessfromnode:process;consthostprocess.env.TAURI_DEV_HOST;// https://vite.dev/config/exportdefaultdefineConfig(()({plugins:[vue(),tailwindcss()],行这一行在干什么第 1 行从商店请出defineConfig这个表格模板用它包起来的配置别人一看就懂、写错还会报警第 2 行请出 Vue 的翻译插件没有它Vite 读到.vue文件会当场看不懂跟实验 1 里脚手架生成的那一行一模一样第 3 行请出 Tailwind 的 Vite 插件——给界面穿衣服那套样式工具第 2 章讲 CSS 时会回来第 4 行一句工程师的诚实话“下面这行会让编辑器挑刺但它没错我知道我在干什么”ts-expect-error是预告一个已知误报第 5-6 行读一个叫TAURI_DEV_HOST的环境变量存进host。平时它是空的只在用手机/另一台机器调试时才有值第 9-10 行正式开写配置把两个插件登记进plugins名单然后是给 Tauri 定制的那三小段注释就是原作者留的说明书英文注释我逐条翻给你// 摘自 vite.config.ts第 12-19 行// Vite options tailored for Tauri development and only applied in tauri dev or tauri build//// 1. prevent Vite from obscuring rust errorsclearScreen:false,// 2. tauri expects a fixed port, fail if that port is not availableserver:{port:1420,strictPort:true,clearScreen: false——别让 Vite 每次重跑都把终端屏幕擦干净。为什么因为 Tauri 那边是 Rust 在编译Rust 的报错信息很长很有价值Vite 一清屏就把人家辛苦打印的错误擦没了。这一行是两家合租要讲礼貌的典型样本。port: 1420——门牌号钉死 1420。strictPort: true——“这个号被人占了就直接罢工不许自己挪去别处。”这句注释tauri expects a fixed port就是全部原因Rust 那边事先写死了要去 1420 找人下面真文件 ②Vite 私自换号Rust 就扑空。再往下两段// 摘自 vite.config.ts第 20-31 行host:host||false,hmr:host?{protocol:ws,host,port:1421}:undefined,watch:{// 3. tell Vite to ignore watching src-tauriignored:[**/src-tauri/**],},host: host || false——“有人要远程调试就暴露出去平时只在自家 localhost 开门”。默认不向整个局域网开放这是安全上的好习惯。hmr: host ? {...} : undefined——只有真机调试时热更新才走 1421 号门平时留空按默认来。ws是 WebSocket 协议的缩写5.2.3 里那根内部电话线。ignored: [**/src-tauri/**]——正是 5.2.3 讲过的那句别去盯 Rust 那个装了几万个小文件的仓库防止热更新无端抖动。真文件 ②src-tauri/tauri.conf.json约定的另一半Rust 盒子读的是这个文件build这一段真实第 6-11 行// 摘自 src-tauri/tauri.conf.json第 6-11 行build:{beforeDevCommand:npm run dev,devUrl:http://localhost:1420,beforeBuildCommand:npm run build,frontendDist:../dist},看第 8 行devUrl: http://localhost:1420。现在两个文件摆在一起1420 的完整答案出来了vite.config.ts src-tauri/tauri.conf.json server.port 1420 ←必须一致→ build.devUrl http://localhost:1420 server.strictPort true build.beforeDevCommand npm run dev 不许换号 Rust 启动前先帮你把 Vite 点上为什么偏偏是 1420 这个数因为它不是算出来的是约好的。Tauri 官方脚手架create-tauri-app和 Vite 同类的脚手架生成 Vue 项目时模板里就把 Vite 的端口设成 1420、把devUrl也写成同一个值——两边写同一个号才能一插就对。这个数本身毫无玄机甚至官方自己也没解释为什么选它不是第 1420 位质数也不是什么纪念日。所以你以后看到任何一个 Tauri Vite 的项目端口十有八九是 1420。这种没什么道理但大家都这么写的现象行业里叫约定convention。它的价值是你换一台电脑、换一个人写的项目闭着眼睛都知道去哪道门找人。顺带看两个生产版的孪生兄弟beforeBuildCommand是出厂前先按 build 按钮对应实验 4 那句话里的npm run buildfrontendDist指向../dist——那个做好的菜文件夹路径前面的../是从这个文件夹往上一层再找第 4 章cd ..的那个往上走。Rust 打包安装程序时要搬的就是它。5.5 小毛病大修理毛病Error: Port 1420 is already in use现象。你在项目里敲npm run tauri dev或先敲了npm run dev终端刷了一堆进度最后卡在这里VITE v8.3.1 ready in 120 ms error when starting dev server: Error: Port 1420 is already in use更气人的是屏幕上半段明明已经打印了ready看起来像成功了但它立刻罢工了。原因分三层一层比一层重要。物理层5.2.2 那条铁律——一个端口同一时刻只能站一个服务器。1420 号门后面已经站着人了。最可能的真凶那个人就是你自己上次开的那个 Vite。它很乖你不亲口叫它停在那个终端按Ctrl C它是不会自己关门的。你换了个新终端又点一次开门于是撞门。典型场景VS Code 开了好几个终端标签、或者上一次npm run tauri dev你直接关窗口没先 CtrlC。为什么它不学 Vite 那样自己挪个号因为vite.config.ts第 19 行写着strictPort: true。这是故意的也是 5.4 节的全部结论Rust 那边死盯着http://localhost:1420tauri.conf.json第 8 行换号等于让 EngFlow 打开一个空白窗口——不如立刻撞死在门口至少报错写得清楚。这是工程师的一个审美宁可吵闹地失败不要安静地错。修理按顺序试一般第一步就好了。第一步找出那个还开着的旧终端VS Code 终端面板右上角有个下拉能列出所有终端标签切过去按Ctrl C。看到提示符回来了门空了再重跑命令。第二步如果 engflow 的窗口还挂在桌面上——直接关掉那个窗口再跑。第三步实在找不到是谁占的用命令去查门牌号后面站着哪个进程# 在终端里查谁在听 1420 号门netstat-ano|findstr :1420你会看到类似这样一行最后一列是PID进程身份证号的缩写TCP 127.0.0.1:1420 0.0.0.0:0 LISTENING 24316然后按Ctrl Shift Esc打开任务管理器切到详细信息标签找 PID24316那个进程右键结束任务。要先确认它是node.exe之类再结束对不上号就问家长——关掉别人正在跑的东西是命令行世界里少数手滑会闯祸的操作。预防本章最实用的一句话每次开发只留一个跑着 Vite 的终端离开时先Ctrl C再关窗口。养成这个习惯这条报错从此不会再找你。顺带一条同族毛病如果 Vite 启动成功但浏览器显示localhost 拒绝连接——99% 是你把那个终端关掉了实验 2 亲眼见过这个现象或者你浏览器地址栏里那个号是 5173 而不是 1420。看终端里那行 Local 写的到底是什么号照着敲。这道坎到第 27 章讲打包发布时还会再露一次面——那天的活儿就是把vite.config.ts和tauri.conf.json两边的配置从头对一遍配置一致性是那时候要核的账之一。现在你已经有免疫了。5.6 本章你会解释合上书讲给家长听关键词兜底脚手架是什么它替你干了哪几件跟英语学习方法毫无关系的活关键词毛坯房、样板、清单先有货架还没有为什么开发网页一定要在本机开一个服务器不能直接双击index.html关键词浏览器只跟服务器说话、file:// 是残缺体http://localhost:1420这一串里哪个词表示我这台电脑哪个表示第几号门为什么一个端口只能站一个服务器热更新HMR和按 F5 刷新整页区别在哪Vite 是怎么知道你改了文件的关键词watch、只换一块砖、内部电话线用两句话说清 EngFlow 为什么把端口定成 1420并且为什么写了不许换号。关键词Tauri 模板的约定、两边写同一个数、strictPort参考1→5.1、5.2.42→5.2.13→5.2.24→5.2.35→5.4。5.7 练习★第二次一定更快。把 5.3 的实验 1-3 从零重做一遍这次项目改名叫my-app2模板换成vue-ts之外的一个你好奇的选项做完记得回来为什么本书还是用vue-ts。目标只有一个不看书独立跑到浏览器出现界面。★★改三处认两种现象。在my-app2里分别改①index.html的title②src/components/HelloWorld.vue里按钮上的字③src/style.css里一个背景色值。回答三个问题三种改动各需不需要重启服务器终端里各打印了page reload还是hot updated为什么 ① 和其他两个不一样★★配置翻译官。打开本项目的vite.config.ts找到clearScreen: false和ignored: [**/src-tauri/**]这两行用你自己的两句话分别解释“如果把它删掉可能会碰到什么怪事”不许去搜答案用 5.4 节讲过的原理推。★★★思考题约定的力量。Tauri 完全可以每次随机挑一个端口然后把这个号传给 Rust——技术上做得到但工程师们选择了两边都写死 1420。你觉得写死换来了什么又赌上了什么提示想想 5.5 节那句宁可吵闹地失败再想想如果你把这个项目发给同学他要改几处才能跑起来。房子会盖了门牌号懂了热更新也玩过一把了。下一章我们把 EngFlow 的package.json一行一行拆开读——那十一个依赖4 个跟用户一起走的 7 个只在工地用的每一个都是干什么的、npm run tauri dev这条链子上到底串了几个工具然后第一次看它自己弹出那个 1200×800 的窗口。