这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

  • Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
  • 需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
  • 迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 ​

  • 正文已经按 「Select 选择器」 等小节组织，阅读时可以先定位到当前问题对应的小节。
  • 保留了 1 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。

Select 选择器 ​

  • 数据回显 (一定要注意数据类型，不然会写会有问题)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    list: [
    	{ label: '数学', id: '1' },
        { label: '英语', id: '2' },
        { label: '语文', id: '3' }
    ]

    <el-select
        :popper-append-to-body="false"
        v-model="type"
        placeholder="请选择学科"
     >
        <el-option
            v-for="(item, key) in list"
            :key="key"
            :label="item.label"
            :value="item.id"
        />
        </el-select>
    </el-form-item>

    this.type = '2'

实践检查清单 &#8203;

  • 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
  • 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
  • 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 &#8203;

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。