前端在DeepSeek中提问的典型模板

一、为什么前端开发者需要提问模板？

1. 前端开发特性

   • 技术栈碎片化（框架/库/工具链）

   • 运行环境多样性（浏览器/Node.js/跨端）

   • 兼容性问题复杂性（不同设备/分辨率/内核）

2. 典型问题场景

   • 框架使用问题（React/Vue/Angular）

   • 样式兼容问题（CSS/响应式布局）

   • 性能优化问题（渲染性能/包体积）

   • 构建工具问题（Webpack/Vite）

二、通用提问模板结构

1. 基础信息

   [框架] React 18.2
   [构建工具] Vite 4.3
   [运行环境] Chrome 115 / Node.js 16.14

2. 问题描述

   [现象] 页面在____情况下出现____问题
   [复现步骤] 
   1. 安装依赖：npm install ____
   2. 运行命令：npm run ____
   3. 操作步骤：点击____按钮

3. 代码示例

   // 最小可复现代码
   function ProblemComponent() {
     const [state, setState] = useState(null);
     // 问题相关代码段
   }

   错误信息

   [控制台报错]
   Warning: Can't perform a React state update...
   [网络请求]
   GET https://api.example.com 404 (Not Found)

   已尝试方案

   - 参考官方文档：https://____
   - 搜索关键词：____
   - 尝试方案：____（结果：失败/部分解决）

三、细分场景模板库

1. 框架使用问题

• React状态管理

  [问题类型] 状态更新未触发重新渲染
  [代码示例]
  const [list, setList] = useState([]);
  // 问题操作
  list.push(newItem);
  setList(list);

• Vue响应式问题

  [问题类型] 数组更新视图未刷新
  [代码示例]
  data() {
    return {
      items: []
    }
  }
  // 问题操作
  this.items[0] = newValue;

2. 样式布局问题

• Flex布局异常

  [问题类型] 子元素宽度超出容器
  [代码示例]
  .container {
    display: flex;
    width: 100%;
  }
  .item {
    flex: 1;
  }

• 响应式布局失效

  [设备信息] iPhone 14 Pro Max
  [媒体查询]
  @media (max-width: 768px) {
    .header { display: none; }
  }

3. 性能优化问题

• 渲染卡顿

  [性能分析]
  - React Profiler：组件____渲染耗时____ms
  - Chrome Performance：____函数占用____ms

• 包体积过大

  [构建分析]
  - 使用工具：source-map-explorer
  - 最大模块：____（占用____KB）

4. 构建工具问题

• Webpack配置

  [问题类型] 生产环境CSS未提取
  [配置文件]
  module.exports = {
    // 相关配置片段
  }

• Vite热更新失效

  [问题类型] 修改文件后页面未刷新
  [运行命令] npm run dev
  [终端输出] HMR update failed...

四、高级提问技巧

1. 性能问题诊断

   • 提供Performance面板截图

   • 包含关键指标：FCP/LCP/TTI

2. 跨端兼容问题

   • 设备列表：iOS/Android具体版本

   • 内核信息：WebKit版本/Chromium版本

3. 安全问题排查

   • CSP报错信息

   • 跨域错误详情

五、模板使用最佳实践

1. 问题归档规范

   • 按技术栈分类（React/Vue/构建工具）

   • 添加解决状态标签（待解决/已解决/需跟进）

2. 知识库建设

   • 将典型问题转化为团队FAQ

   • 定期更新模板库

3. 协作流程

   • 代码片段使用CodeSandbox/CodePen链接

   • 错误信息附带完整堆栈跟踪

六、实用工具推荐

1. 问题诊断工具

   • React DevTools

   • Vue DevTools

   • Lighthouse

2. 代码共享平台

   • CodeSandbox

   • StackBlitz

   • JSFiddle

3. 性能分析工具

   • Webpack Bundle Analyzer

   • Chrome Performance

   • React Profiler