拓冰网站定制 
2026.1.15 周四一.vscode插件1.eslint语法检查2.prettier代码格式化3.tailwindcssintellisensetailwindcss的智能提示4.TypeScript Vue Plugin (Volar)支持ts语法5.GitLens — Git supercharged可以查看该行代码是谁写的6.xm-snippets代码片段插件TODOFIXEM等7.TODOHighlight高亮显示配合xm-snippets例如8.Volar 是 vue 3 语法支持的插件而 Vetur 是 vue 2 语法支持的插件两者不能共存否则会导致一些语法报错。二.谷歌浏览器扩展1.fe-help前端工具里面有二维码生成器等可以扫描在移动端看测试环境(链接加.qa) 线上环境(链接不加.qa)2.mock后端数据没返回时可以自己加一个先测试拦截请求并直接返回Mock数据三.Z-ShellZshZ Shell—— 一个强大的、功能丰富的 Shell现在已成为 macOS 的默认 Shell也是许多开发者的首选。Zsh 是一个用 C 语言编写的 Unix Shell它兼容 Bash但提供了更多高级功能智能自动补全- 不仅仅是文件名还包括命令、参数、路径等主题和插件系统- 通过 Oh My Zsh 等框架高度可定制更好的通配符匹配- 支持更强大的文件匹配模式拼写纠正- 自动纠正命令输入错误共享历史记录- 多个终端会话共享命令历史OhMyZsh是一个社区驱动的框架使终端看起来清晰明了用颜色区分不同部分提供了丰富的主题强大的插件以及自动纠错。四.开发模式与生产预览模式【问题】1.开发模式Development Mode方便开发者在本地编写、调试代码、实时看到修改效果1.不压缩代码保留可读性的原始代码方便断点调试2.热更新(HMR)文件修改后浏览器自动局部刷新无需整页重载。3.Source Map生成详细的源码映射浏览器控制台能直接映射到源代码位置4.错误提示友好5.启动命令Vite: npm run devVue-CLI: npm run serveCreate React App: npm start2.生产预览模式Production Preview Mode模拟生产环境用于最终的测试、验收和演示1.代码压缩与混淆js css被压缩变量名缩短减小文件体积2.树摇移除未使用的代码3.代码分割按需加载模块提高首屏速度4.无Source Map减少泄漏源码的风险5.关闭调试信息与警告6.性能优化启用缓存策略资源预加载7.启动命令Vite: npm run preview先执行build再启动预览服务器Vue-CLI: npm run build 部署到静态服务器CRAnpm run build 部署到静态服务器【实际工作流程】以Vite为例# 1. 开发模式npm run dev # 启动本地开发服务器热更新源码映射# 2. 生产构建npm run build # 生成 dist 目录代码压缩、优化# 3. 生产预览模拟线上环境npm run preview # 启动本地服务器运行 dist测试生产构建效果五.web-viewWeb-View 是一个嵌入在原生应用中的浏览器组件允许在移动应用中显示网页内容。Web-View 前端 在手机App里运行的网页1.开发流程1. 用HTML/CSS/JS开发网页2.原生App开发者创建一个WebView组件3.把这个网页加载到WebView里4.网页和App可以互相通信2.技术栈// 前端开发者熟悉的HTML CSS JavaScriptVue.js / React / Angular移动端适配响应式设计// 加上一些特殊API与原生App通信的桥接设备功能调用相机、GPS等3.如何识别web-view页面页面顶部有“返回”按钮不是系统返回加载时有进度条某些手势操作可能不流畅分享功能是App自带的样式4.为什么要用优点快速开发 - 写网页比写App快无需审核 - 更新内容不用等应用商店审核跨平台 - 一套代码iOS和Android都能用热更新 - 随时修改用户立即看到缺点性能稍慢 - 不如原生App流畅功能限制 - 有些手机功能用不了体验差异 - 感觉像网页不像App六.介绍开发流程中的工具1.PRD产品需求文档Product Requirements Document文档类型作者内容给谁看PRD产品经理要做什么、为什么做全体团队原型图UI/产品长什么样、怎么交互开发、测试技术方案开发怎么实现、技术选型开发团队测试用例测试怎么验证、测哪些点测试团队2.FigmaFigma导出图片时一般设置为2x,图片是透明的话一般是png,图片不透明是jpeg之后可以用ilove压缩一下图片进入静态资源管理界面上传你刚才压缩的图片可以得到这个图片的链接。3.YApi在这里面可以查看接口定义旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API4.Lighthouse可以在浏览器检查的Lighthouse检测该页面的性能performance、accessibility、bestpractices、seo开发阶段:localhost:3100 → 测试验证 → 部署到一个网址↓ ↓ ↓编写代码 本地调试 生产发布 插件以及一些扩展工具
2026.1.15 周四一.vscode插件1.eslint语法检查2.prettier代码格式化3.tailwindcssintellisensetailwindcss的智能提示4.TypeScript Vue Plugin (Volar)支持ts语法5.GitLens — Git supercharged可以查看该行代码是谁写的6.xm-snippets代码片段插件TODOFIXEM等7.TODOHighlight高亮显示配合xm-snippets例如8.Volar 是 vue 3 语法支持的插件而 Vetur 是 vue 2 语法支持的插件两者不能共存否则会导致一些语法报错。二.谷歌浏览器扩展1.fe-help前端工具里面有二维码生成器等可以扫描在移动端看测试环境(链接加.qa) 线上环境(链接不加.qa)2.mock后端数据没返回时可以自己加一个先测试拦截请求并直接返回Mock数据三.Z-ShellZshZ Shell—— 一个强大的、功能丰富的 Shell现在已成为 macOS 的默认 Shell也是许多开发者的首选。Zsh 是一个用 C 语言编写的 Unix Shell它兼容 Bash但提供了更多高级功能智能自动补全- 不仅仅是文件名还包括命令、参数、路径等主题和插件系统- 通过 Oh My Zsh 等框架高度可定制更好的通配符匹配- 支持更强大的文件匹配模式拼写纠正- 自动纠正命令输入错误共享历史记录- 多个终端会话共享命令历史OhMyZsh是一个社区驱动的框架使终端看起来清晰明了用颜色区分不同部分提供了丰富的主题强大的插件以及自动纠错。四.开发模式与生产预览模式【问题】1.开发模式Development Mode方便开发者在本地编写、调试代码、实时看到修改效果1.不压缩代码保留可读性的原始代码方便断点调试2.热更新(HMR)文件修改后浏览器自动局部刷新无需整页重载。3.Source Map生成详细的源码映射浏览器控制台能直接映射到源代码位置4.错误提示友好5.启动命令Vite: npm run devVue-CLI: npm run serveCreate React App: npm start2.生产预览模式Production Preview Mode模拟生产环境用于最终的测试、验收和演示1.代码压缩与混淆js css被压缩变量名缩短减小文件体积2.树摇移除未使用的代码3.代码分割按需加载模块提高首屏速度4.无Source Map减少泄漏源码的风险5.关闭调试信息与警告6.性能优化启用缓存策略资源预加载7.启动命令Vite: npm run preview先执行build再启动预览服务器Vue-CLI: npm run build 部署到静态服务器CRAnpm run build 部署到静态服务器【实际工作流程】以Vite为例# 1. 开发模式npm run dev # 启动本地开发服务器热更新源码映射# 2. 生产构建npm run build # 生成 dist 目录代码压缩、优化# 3. 生产预览模拟线上环境npm run preview # 启动本地服务器运行 dist测试生产构建效果五.web-viewWeb-View 是一个嵌入在原生应用中的浏览器组件允许在移动应用中显示网页内容。Web-View 前端 在手机App里运行的网页1.开发流程1. 用HTML/CSS/JS开发网页2.原生App开发者创建一个WebView组件3.把这个网页加载到WebView里4.网页和App可以互相通信2.技术栈// 前端开发者熟悉的HTML CSS JavaScriptVue.js / React / Angular移动端适配响应式设计// 加上一些特殊API与原生App通信的桥接设备功能调用相机、GPS等3.如何识别web-view页面页面顶部有“返回”按钮不是系统返回加载时有进度条某些手势操作可能不流畅分享功能是App自带的样式4.为什么要用优点快速开发 - 写网页比写App快无需审核 - 更新内容不用等应用商店审核跨平台 - 一套代码iOS和Android都能用热更新 - 随时修改用户立即看到缺点性能稍慢 - 不如原生App流畅功能限制 - 有些手机功能用不了体验差异 - 感觉像网页不像App六.介绍开发流程中的工具1.PRD产品需求文档Product Requirements Document文档类型作者内容给谁看PRD产品经理要做什么、为什么做全体团队原型图UI/产品长什么样、怎么交互开发、测试技术方案开发怎么实现、技术选型开发团队测试用例测试怎么验证、测哪些点测试团队2.FigmaFigma导出图片时一般设置为2x,图片是透明的话一般是png,图片不透明是jpeg之后可以用ilove压缩一下图片进入静态资源管理界面上传你刚才压缩的图片可以得到这个图片的链接。3.YApi在这里面可以查看接口定义旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API4.Lighthouse可以在浏览器检查的Lighthouse检测该页面的性能performance、accessibility、bestpractices、seo开发阶段:localhost:3100 → 测试验证 → 部署到一个网址↓ ↓ ↓编写代码 本地调试 生产发布