1. 课程导入
1.1 语音识别前端系统——它到底是什么？
说实话，很多人一听到「语音识别前端系统」，第一反应就是：「哦，就是那个能听懂人话的界面呗？」
嗯，对，但不全对。
我个人的理解是：语音识别前端系统，是用户与语音引擎之间的「翻译官」+「调度员」。它不负责把声音转成文字——那是后端或云端语音引擎干的活。它负责的是：
- 采集麦克风音频流
- 把音频实时传给后端
- 接收识别结果并展示
- 处理中间状态（静音、说话中、识别中、出错）
- 提供交互反馈（波形、按钮、文字流）
说白了，用户看到的所有东西，都是前端管的。你想想看，如果前端没做好，哪怕后端识别率 99%，用户也会觉得「这玩意儿真难用」。
核心认知：语音识别前端 ≠ 语音识别引擎。前端是「壳」，引擎是「核」。我们这门课，就是教你把这个「壳」做得既漂亮又结实。
1.2 为什么选择 Vue 3 来搭建？
你可能要问：React、Angular 不也挺好吗？为什么选 Vue？
我个人的经验是：Vue 的学习曲线最平缓，适合从零开始。尤其是语音识别这种涉及大量状态变化（录音中、静音、识别中、结果返回）的场景，Vue 的响应式系统用起来特别顺手。
| 框架 | 学习曲线 | 状态管理 | 适合语音场景？ |
|---|---|---|---|
| Vue 3 | 平缓 | ref/reactive 原生响应式 | ★★★★★ |
| React | 中等 | useState + useEffect | ★★★★ |
| Angular | 陡峭 | RxJS + 服务 | ★★★ |
当然，这只是我的建议。你用 React 也能做，但咱们这门课统一用 Vue 3 + TypeScript，这样后面讲组件设计、状态管理的时候，代码更清晰。
1.3 开发环境搭建——先把地基打牢
好，理论说完了，咱们开始动手。环境搭建这一步，我建议你跟着我一步步来，别跳。我曾经见过一个学员，跳过 Node.js 安装直接去装 Vue CLI，结果折腾了一下午……
1.3.1 安装 Node.js 和 npm
Node.js 是 JavaScript 的运行环境，npm 是它的包管理器。Vue CLI 和咱们后面要用的所有依赖，都靠它们来装。
- 下载 Node.js：打开 nodejs.org，下载 LTS 版本（长期支持版）。我建议选 18.x 或 20.x，太老的版本有些新特性不支持。
- 安装：一路 Next 就行。Windows 用户记得勾选「Add to PATH」。
- 验证安装：打开终端（CMD、PowerShell 或 VS Code 终端），输入：
node -v
npm -v如果看到版本号，比如 v18.17.0 和 9.6.7，说明安装成功。
小技巧：我习惯用 nvm（Node Version Manager）来管理 Node.js 版本。这样可以在不同项目间快速切换 Node 版本，避免版本冲突。如果你有兴趣，可以搜一下「nvm-windows」或「nvm for macOS」。
1.3.2 安装 Vue CLI
Vue CLI 是 Vue 官方提供的脚手架工具。它能帮你快速生成项目模板，省去手动配置 Webpack、Babel 这些繁琐步骤。
npm install -g @vue/cli安装完成后，验证一下：
vue --version如果看到 @vue/cli 5.x.x，就对了。
注意：如果你用的是 macOS 或 Linux，安装全局包时可能需要加 sudo：sudo npm install -g @vue/cli。Windows 用户一般不需要。
1.4 创建第一个 Vue 项目
环境搭好了，咱们来创建项目。这一步我会带你走一遍，顺便解释每个选项的含义。
vue create voice-recognition-frontend回车后，你会看到一些选项：
- Default ([Vue 3] babel, eslint)：快速开始，适合新手。
- Manually select features：手动选择，适合需要定制的人。
我建议选 Manually select features，因为后面我们需要 TypeScript、Router、Vuex 这些功能。选好后，按空格勾选以下内容：
| 功能 | 说明 | 我们是否需要？ |
|---|---|---|
| Choose Vue version | 选择 Vue 版本 | 是（选 3.x） |
| Babel | JS 转译器 | 是 |
| TypeScript | 类型系统 | 是（后面会用到） |
| Router | 路由管理 | 是（多页面需要） |
| Vuex | 状态管理 | 是（语音状态复杂） |
| CSS Pre-processors | CSS 预处理器 | 推荐选 Sass/SCSS |
| Linter / Formatter | 代码规范 | 是（ESLint + Prettier） |
选完后，一路回车，等它安装依赖。大概 1-2 分钟，你会看到：
🎉 Successfully created project voice-recognition-frontend.
👉 Get started with the following commands:
cd voice-recognition-frontend
npm run serve好，项目创建成功了！
1.5 启动项目，看看长什么样
按提示操作：
cd voice-recognition-frontend
npm run serve终端会显示一个本地地址，通常是 http://localhost:8080。打开浏览器，你会看到 Vue 的默认欢迎页面。
嗯，到这里，你的第一个 Vue 项目就跑起来了。虽然它现在只是个空壳，但别急——后面我们会一步步往里面填东西。
1.6 本章知识体系总览
为了让你对本章内容有个整体印象，我画了一张图：
1.7 避坑指南——我踩过的那些坑
环境搭建看起来简单，但有些细节不注意，后面会卡住。我分享几个我踩过的坑：
- Node.js 版本太旧：我曾经用 Node 12 去跑 Vue 3 项目，结果一堆依赖报错。建议用 18.x 或 20.x。
- npm 安装卡住：国内用户建议配置淘宝镜像：
npm config set registry https://registry.npmmirror.com。 - Vue CLI 创建项目时选错 Vue 版本：记得选 3.x，别选 2.x。虽然 2.x 也能用，但咱们这门课是基于 Vue 3 的。
- 终端路径不对：创建项目后，记得
cd进项目目录再npm run serve。我见过有人直接在桌面路径下运行，结果报错找不到package.json。
我的习惯：每次开始新项目前，我都会先跑一遍 node -v 和 npm -v，确认环境没问题。这个习惯帮我省了不少排查时间。
1.8 小结
好，这一章我们做了三件事：
- 搞清楚了语音识别前端系统到底是什么
- 安装了 Node.js、npm 和 Vue CLI
- 创建并启动了第一个 Vue 3 项目
现在你的电脑上已经有一个能跑起来的 Vue 项目了。虽然它只是个空壳，但别急——从下一章开始，我们会一步步往里面填东西，最终做成一个完整的语音识别前端系统。
嗯，今天就到这儿。去喝杯咖啡，休息一下。后面还有硬仗要打呢。