脚手架 create-vue#

PPT 第 12 页：

介绍：create-vue 是 Vue 官方提供的最新的脚手架工具，用于快速生成一个工程化的 Vue 项目。

它一口气提供了这些功能：

依赖环境：NodeJS——脚手架本身是 NodeJS 写的，所以电脑上必须先装好 NodeJS。

安装 NodeJS（PPT 第 13 页）#

去官网 https://nodejs.org/ 下载 LTS（长期支持版） 的安装包，一路下一步即可。

课程的资料包里也自带了安装包（资料\01. NodeJS\ 目录）。

npm 是什么（PPT 第 14 页）#

npm：Node Package Manager，是 NodeJS 的软件包管理器。

它干的事一句话说完：从远程仓库把别人写好的包下载到你的项目里。命令格式就是 npm install 包名——后面建工程、装 ElementPlus、装 axios 用的都是它。

PPT 第 14 页配的是一张”本地 npm 从远程仓库拉包”的示意图（一个电脑图标 → 远程仓库），意思就是这个下载过程。

入口文件 main.js 里写了什么#

本机实测（对照 PPT 第 18 页的”入口文件”）：工程里的 src/main.js 实际内容是这样的——

1
import { createApp } from 'vue'
2

3
//引入ElmentPlus
4
import ElementPlus from 'element-plus'
5
import 'element-plus/dist/index.css'
6
import zhCn from 'element-plus/es/locale/lang/zh-cn'
7

8
import App from './App.vue'
9

10
createApp(App).use(ElementPlus, {locale: zhCn}).mount('#app')

对照 19 篇的写法看，结构是熟悉的：createApp(App).mount('#app') 就是”创建应用实例并挂载到 #app”。多出来的是三行 ElementPlus 相关代码（引入组件库、引入它的样式、引入中文语言包）——那正是 97 篇要讲的两件事（PPT 第 35、42 页）；import App from './App.vue' 这行导入根组件，则是 96 篇的主线。

一、知识回顾（读完直接做下面的实践题）#

1. 这一章是课程的 Web 前端实战 阶段，两块内容是 Vue 工程化 和 ElementPlus；95 篇讲工程化与建项目，96 篇讲开发流程与组合式 API，97 篇讲组件库
2. 前端工程化的定义：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化；三个收益：统一规范、提高复用、便于维护
3. 小白式开发的三个痛点：不规范、难维护、难复用；对应的四个关键词：模块化（项目划分若干模块，单独开发、维护）、组件化（页面各组成部分封装为组件）、规范化（标准统一的目录结构、编码规范、开发流程）、自动化（构建、开发、测试、打包、部署）
4. Vue 的使用方式有两档：只用 Vue 核心包做局部模块改造（引一个 js 文件，19~22 篇的写法）；用核心包 + VueRouter/Pinia/Vite 等做整站开发（工程化，这一章开始）
5. create-vue 是 Vue 官方提供的脚手架工具，用于快速生成工程化的 Vue 项目，提供统一目录结构、本地调试、热部署、单元测试、集成打包上线五项功能；它依赖 NodeJS、依赖 npm
6. npm = Node Package Manager，NodeJS 的软件包管理器；npm install 的作用是照着 package.json 里的依赖清单，把第三方包从远程仓库下载到 node_modules
7. 创建项目的命令是 npm create vue@3.3.4，其中 3.3.4 是脚手架版本号；交互问答里 Project name 默认 vue-project，其余（TypeScript / JSX / Vue Router / Pinia / Vitest / 端到端测试 / ESLint）默认都是 No，本课程全部保持默认
8. 安装依赖 npm install、创建项目都必须要联网；进项目目录要先 cd；本机实测（Node v24.11.0）加 --registry=https://registry.npmmirror.com 用国内镜像会快很多
9. 目录职责：src 源码目录、src/components 通用组件、src/views 页面组件、src/App.vue 根组件、src/main.js 入口文件、public 静态资源、node_modules 下载的第三方包、package.json 项目配置（项目名/版本/依赖）、vite.config.js 项目配置信息（如端口号）、index.html 唯一的 HTML 页面
10. 启动是 npm run dev，访问 **http://localhost:5173**（Vite 默认端口，可在 vite.config.js 改）；本机实测首次 ready in 2679 ms、之后重启只要 282~320 ms；改代码保存后命令行打印 hmr update，页面自动更新（热部署）；停止服务按 Ctrl + C。另两条脚本：npm run build 打包到 dist、npm run preview 预览打包结果

二、裸写题#

• 2-1 把课程的前三步命令按顺序写出来 要求：在一个空目录里，从零开始把课程这个 Vue 工程做出来并启动起来。写出三条命令（含创建时要回答的项目名），并说明每条命令执行完下一步该做什么。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三步是”建骨架 → 下依赖 → 跑起来”，中间别忘了进入项目目录这一步 二级 · 方法：创建用 npm create vue@版本号，按问答输入项目名；安装依赖用 npm install（要先 cd 进项目目录）；启动用 npm run dev 三级 · 骨架：npm create vue@____ → cd ____ → npm ____ → npm run ____

  参考答案（做完再点开）

  1
  # ① 创建工程（脚手架会问 8 个问题，项目名这里填 vue-project1，其余全部回车用默认 No）
  2
  npm create vue@3.3.4
  3
  
  4
  # ② 进入项目目录，安装依赖（这一步要联网）
  5
  cd vue-project1
  6
  npm install
  7
  
  8
  # ③ 启动开发服务器
  9
  npm run dev

  检查点：命令行最后打印 Local: http://localhost:5173/，浏览器打开这个地址能看到页面；第 16 页的截图里脚手架跑完最后打印的也是这三条（cd / npm install / npm run dev）。 补充：装依赖慢可以写成 npm install --registry=https://registry.npmmirror.com（本机实测用国内镜像）。

• 2-2 给下面这些需求各找一个”落脚的目录或文件” 需求清单：

  1. 写一个”员工列表”的页面代码
  2. 写一个会被好几个页面复用的”页头”组件
  3. 放几张页面要用的图片和字体
  4. 把开发服务器的端口从 5173 改成 8080
  5. 看一下这个项目装了哪些依赖、版本是多少
  6. 找到整个项目的”起点”文件（浏览器最先执行的那份）
  7. 找到”页面上显示什么”由谁决定（根组件） （每一项写出目录名或文件名即可，不用写代码。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：回到 PPT 第 18 页那张结构图，每个文件旁边都有一句职责说明；搞不清时按”这是配置、这是源码、这是资源、这是下载来的”四类去分 二级 · 方法：页面放 src/views；通用组件放 src/components；静态资源放 public（或 src/assets）；配置在 vite.config.js；依赖清单在 package.json；入口是 src/main.js；根组件是 src/App.vue 三级 · 骨架：1→src/____、2→src/____、3→____、4→____.config.js、5→____.json、6→src/____.js、7→src/____.vue

  参考答案（做完再点开）

  需求	落脚的目录/文件
  1. 页面代码	src/views/（本机实测：案例的 EmpList.vue 就在这里）
  2. 复用组件	src/components/（“组件目录，存放通用组件”）
  3. 图片、字体	public/（静态资源目录；组件私用的样式图片也可以放 src/assets/）
  4. 改端口	vite.config.js（“Vue 项目的配置信息，如端口号等”）
  5. 依赖清单	package.json（项目配置文件，包括项目名、版本号、依赖包、版本）
  6. 起点文件	src/main.js（入口文件）
  7. 根组件	src/App.vue（根组件）
  检查点：还有三个容易被问到的——node_modules 是”下载的第三方包”（不要改）、index.html 是项目唯一的 HTML 页面、.gitignore 决定哪些东西不进 Git。

• 2-3 用工程化的四个关键词给三个痛点”开药方” 某公司的老前端项目是这样：一个页面一个 html，文件名叫 new.html、new2.html；导航栏在每个页面各复制了一份，改一次要改十几个文件；文件夹里 html、css、js、图片全堆在一起，新人不知道从哪看起。 要求：

  1. 指出这堆现象分别对应哪两个”痛点”
  2. 每个问题给出至少一个工程化关键词作为对策，并说明具体做什么
  提示（先自己想，实在想不出再点开）

  一级 · 思路：先分清哪些是”结构乱”、哪些是”重复劳动”，再对上四个关键词里各自管什么 二级 · 方法：文件命名、目录堆一起 = 规范化；导航栏复制多份 = 组件化；整个项目还可以按功能切成模块化；构建、打包、部署交给自动化 三级 · 骨架：痛点①（不规范/难维护）→ 规范化：提供标准统一的____结构、编码规范、____流程；痛点②（难复用）→ ____化：把导航栏封装成一个____；另外还有模块化/____化

  参考答案（做完再点开）

  现象与痛点：

  • 文件随手叫 new.html、new2.html，html/css/js/图片全堆一起 → 不规范（也导致难维护：新人不知道从哪看起）。
  • 导航栏每页各复制一份，改一次要改十几处 → 难复用（改漏一处就是 bug）。

  对策：

  • 针对”不规范/难维护” → 规范化：提供标准统一的目录结构、编码规范、开发流程（在 Vue 工程里就是 src/views 放页面、src/components 放通用组件、src/assets 放资源，文件名按用途命名）。
  • 针对”难复用” → 组件化：将页面的各个组成部分封装为一个一个的组件，导航栏只写一份，其它页面直接引用；改一处全部生效。
  • 再往上 → 模块化：把项目划分若干模块（比如”员工管理""部门管理”），单独开发、维护，提高效率。
  • 最后 → 自动化：项目的构建、开发、测试、打包、部署交给工具链（npm run dev 起服务、npm run build 打包）。 检查点：这四个关键词就是 PPT 第 9 页的原文解释，能对上”痛点 → 关键词 → 具体做法”三层就说明理解到位了。

• 2-4 排查：工程启动不起来 / 页面打不开 按下面的现象写出原因和怎么办：

  1. 敲 npm run dev 后命令行报错，提示找不到 vite 命令
  2. 命令行正常打印了 Local: http://localhost:5173/，但浏览器打不开这个地址（或者地址栏输入后没反应）
  3. 改完代码保存，浏览器页面没有变化
  4. 想在 8080 端口访问这个项目
  提示（先自己想，实在想不出再点开）

  一级 · 思路：前两条分别是”依赖没装”和”服务没起来在跑”；第三条想想开发服务器的工作方式（热部署）；第四条是配置的事 二级 · 方法：① npm install；② 开发服务器是常驻的——命令行窗口不能关，看它打印的 Local: 地址（端口可能不是 5173）；③ 检查保存成功没有、命令行有没有 hmr update，必要时手动刷新；④ 改 vite.config.js 三级 · 骨架：① 先 npm ____；② 保持 ____ 命令行不关、以打印的地址为准；③ 看命令行的 ____；④ 在 ____.config.js 里改端口

  参考答案（做完再点开）

  1. 依赖没装：dev 脚本执行的就是 vite，而 vite 还在依赖清单里、没被下载。解决办法是在项目目录里先跑一次 npm install（要联网）。
  2. 开发服务器没在跑 / 地址不对：npm run dev 是常驻进程，跑了之后命令行窗口不能关（关了服务就停）；访问的地址要以它打印的 Local: 那行为准——端口被占用时 Vite 会自动换一个端口，不一定还是 5173。
  3. 热部署没生效 / 需要手动刷新：先确认文件真的保存了，再看命令行有没有打印 [vite] hmr update ...（本机实测改 src/App.vue 就会出现这行）；浏览器本身卡住时手动刷新一下。如果是改了 vite.config.js，命令行会先打印 vite.config.js changed, restarting server... 再重启，等它重启完再看。
  4. 改端口在 vite.config.js（PPT 第 18 页：“Vue 项目的配置信息，如端口号等”），改完 Vite 会自动重启开发服务器。 检查点：这四条的共同点是——先看命令行的输出。构建工具的报错信息很具体（本机实测把配置文件写错时，命令行直接给出了 vite.config.js:20:43 这样的文件名、行号、列号）。

三、综合题#

• 3-1 从零把一个 Vue 工程建起来并摸清它 照着课程把整套流程走一遍，边做边把”项目地图”记下来：

  1. 在一个空目录里创建工程，项目名自取（课程用的是 vue-project1），交互问答全部用默认值
  2. 进入项目目录，安装依赖（网络慢就用国内镜像参数）
  3. 启动开发服务器，浏览器打开它打印的地址，确认能看到页面
  4. 用 VS Code 打开工程，对照 PPT 第 18 页的表，逐个说一遍每个目录/文件是干什么的（至少说出：src、src/components、App.vue、main.js、public、node_modules、package.json、vite.config.js）
  5. 打开 src/App.vue，随便改一句页面上的文字，保存后观察命令行和浏览器
  6. 停止开发服务器，然后执行打包命令，看看 dist 目录里生成了哪些文件
  提示（先自己想，实在想不出再点开）

  一级 · 思路：这一题就是把”创建 → 装依赖 → 启动 → 认目录 → 改代码 → 打包”整条链路走一遍，重点不是敲命令，而是每一步之后知道自己在哪一层 二级 · 方法：建工程 npm create vue@3.3.4；装依赖 npm install（可加 --registry= 参数）；启动 npm run dev；改完看命令行有没有 hmr update；停服务 Ctrl + C；打包 npm run build，结果在 dist 三级 · 骨架：npm create vue@____ → cd ____ && npm ____ → npm run ____（浏览器看 Local: 地址）→ 改 src/____.vue 保存观察 → Ctrl + ____ → npm run ____ → 查看 ____ 目录

  参考答案（做完再点开）

  1
  # ① 创建（问答里项目名输入 vue-project1，其余回车用默认 No）
  2
  npm create vue@3.3.4
  3
  
  4
  # ② 进目录 + 装依赖
  5
  cd vue-project1
  6
  npm install
  7
  
  8
  # ③ 启动（本机实测：首次 ready in 2679 ms，之后重启只要 282~320 ms）
  9
  npm run dev
  10
  #   ➜  Local:   http://localhost:5173/
  11
  
  12
  # ④ 改代码：打开 src/App.vue，把模板里的文字改掉并保存
  13
  #   命令行会打印 [vite] hmr update /src/App.vue，浏览器里对应文字跟着变
  14
  
  15
  # ⑤ 停止服务器：在命令行窗口按 Ctrl + C
  16
  
  17
  # ⑥ 打包
  18
  npm run build

  显示更多显示更少

  目录对照（第 4 步要能说出来）：src 写代码的目录；src/components 通用组件；src/views 页面组件；src/App.vue 根组件；src/main.js 入口文件；public 静态资源；node_modules 下载的第三方包（不要动）；package.json 项目配置与依赖清单；vite.config.js 配置信息（端口等）。 打包结果（本机实测）：dist/index.html 0.42 KiB、dist/assets/index.xxxx.css 316.98 KiB（gzip 42.98 KiB）、dist/assets/index.xxxx.js 877.21 KiB（gzip 290.77 KiB），并提示 chunks are larger than 500 KiB——这一条和 ElementPlus 的全量引入有关，97 篇会说到。 检查点：第 5 步看到的自动更新就是”热部署”，它来自 create-vue 提供的能力（PPT 第 12 页）。