整理知识点 - 技术栈

2026.1.15 周四

一.vscode插件

1.eslint 语法检查

2.prettier代码格式化

3.tailwind css intellisense：tailwindcss的智能提示

4.TypeScript Vue Plugin (Volar)支持ts语法

5.GitLens --- Git supercharged 可以查看该行代码是谁写的

6.xm-snippets 代码片段插件 TODO FIXEM等

7.TODO Highlight 高亮显示配合xm-snippets 例如

8.Volar 是 vue 3 语法支持的插件，而 Vetur 是 vue 2 语法支持的插件，两者不能共存，否则会导致一些语法报错。

二.谷歌浏览器扩展

1.fe-help（前端工具）里面有二维码生成器等，可以扫描在移动端看

测试环境(链接加.qa) 线上环境(链接不加.qa)

2.mock（后端数据没返回时可以自己加一个先测试）（拦截请求并直接返回Mock数据）

三.Z-Shell

Zsh（Z Shell） ------ 一个强大的、功能丰富的 Shell，现在已成为 macOS 的默认 Shell，也是许多开发者的首选。

Zsh 是一个用 C 语言编写的 Unix Shell，它兼容 Bash，但提供了更多高级功能：

智能自动补全 - 不仅仅是文件名，还包括命令、参数、路径等
主题和插件系统 - 通过 Oh My Zsh 等框架高度可定制
更好的通配符匹配 - 支持更强大的文件匹配模式
拼写纠正 - 自动纠正命令输入错误
共享历史记录 - 多个终端会话共享命令历史

Oh My Zsh是一个社区驱动的框架，使终端看起来清晰明了，用颜色区分不同部分，提供了丰富的主题，强大的插件以及自动纠错。

四.开发模式与生产预览模式

【问题】

1.开发模式

（Development Mode）

方便开发者在本地编写、调试代码、实时看到修改效果

1.不压缩代码：保留可读性的原始代码，方便断点调试

2.热更新(HMR)：文件修改后浏览器自动局部刷新，无需整页重载。

3.Source Map：生成详细的源码映射，浏览器控制台能直接映射到源代码位置

4.错误提示友好

5.启动命令

Vite: npm run dev

Vue-CLI: npm run serve

Create React App: npm start

2.生产预览模式

（Production Preview Mode）

模拟生产环境，用于最终的测试、验收和演示

1.代码压缩与混淆：js css被压缩，变量名缩短，减小文件体积

2.树摇：移除未使用的代码

3.代码分割：按需加载模块，提高首屏速度

4.无Source Map：减少泄漏源码的风险

5.关闭调试信息与警告

6.性能优化：启用缓存策略，资源预加载

7.启动命令

Vite: npm run preview（先执行 build再启动预览服务器）

Vue-CLI: npm run build+ 部署到静态服务器

CRA：npm run build+ 部署到静态服务器

【实际工作流程】

以Vite为例

1. 开发模式

npm run dev # 启动本地开发服务器，热更新，源码映射

2. 生产构建

npm run build # 生成 dist 目录，代码压缩、优化

3. 生产预览（模拟线上环境）

npm run preview # 启动本地服务器运行 dist，测试生产构建效果

五.web-view

Web-View 是一个嵌入在原生应用中的浏览器组件，允许在移动应用中显示网页内容。

Web-View 前端 = 在手机App里运行的网页

1.开发流程

用HTML/CSS/JS开发网页

原生App开发者创建一个WebView组件

把这个网页加载到WebView里

网页和App可以互相通信

2.技术栈

// 前端开发者熟悉的：
HTML + CSS + JavaScript

Vue.js / React / Angular

移动端适配

响应式设计

// 加上一些特殊API：

与原生App通信的桥接

设备功能调用（相机、GPS等）

3.如何识别web-view页面

页面顶部有"返回"按钮（不是系统返回）
加载时有进度条

某些手势操作可能不流畅

分享功能是App自带的样式
4.为什么要用

优点
快速开发 - 写网页比写App快

无需审核 - 更新内容不用等应用商店审核

跨平台 - 一套代码，iOS和Android都能用

热更新 - 随时修改，用户立即看到

缺点

性能稍慢 - 不如原生App流畅

功能限制 - 有些手机功能用不了

体验差异 - 感觉像网页，不像App

六.介绍开发流程中的工具

1.PRD

产品需求文档Product Requirements Document

|----------|-------|-----------|-------|
| 文档类型 | 作者 | 内容 | 给谁看 |
| PRD | 产品经理 | 要做什么、为什么做 | 全体团队 |
| 原型图 | UI/产品 | 长什么样、怎么交互 | 开发、测试 |
| 技术方案 | 开发 | 怎么实现、技术选型 | 开发团队 |
| 测试用例 | 测试 | 怎么验证、测哪些点 | 测试团队 |

2.Figma

Figma导出图片时一般设置为2x,图片是透明的话一般是png,图片不透明是jpeg

之后可以用ilove压缩一下图片，进入静态资源管理界面上传你刚才压缩的图片，可以得到这个图片的链接。

3.YApi

在这里面可以查看接口定义

旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API

4.Lighthouse

可以在浏览器检查的Lighthouse检测该页面的性能（performance、accessibility 、best practices 、 seo）
开发阶段: localhost:3100 → 测试验证 → 部署到一个网址

↓ ↓ ↓

编写代码本地调试生产发布