面经 H5 端：Vant 与项目搭建（一）

本页对应 面经 H5 端：Vant 与项目搭建，共 7 段视频，约 1 小时 18 分。

学习目标

1. 能够说明默认插槽、具名插槽和作用域插槽的传值方式，并在父子组件中完成内容分发、具名匹配及作用域数据接收与使用。
2. 能够使用 vue create 创建新项目，选择 Router、Vuex、Babel、CSS 预处理器等自选功能，替换项目 src 目录并成功启动验证。
3. 能够区分 npm、yarn、pnpm 的用途、常用安装命令及锁文件标识，并根据项目现有锁文件选择对应包管理器完成依赖安装。
4. 能够依据 ESLint 报错定位规则名称，在配置文件中自定义规则并重启服务验证规则生效，同时使用格式化插件自动修复格式问题。
5. 能够区分 PC 端与移动端常用组件库（如 Element UI、Vant2）的适用场景，并按指定版本安装组件库后完成基础引入验证。

知识点

本节目标

这一节先不急着写业务代码，而是把准备好的移动端“面经”项目跑起来，完整看一遍成品效果，弄清楚接下来两天要做的功能模块有哪些。换句话说，先建立“项目地图”，再动手实现。

为什么需要先演示？因为如果一上来就写页面，很容易出现“知道要写登录，但不知道登录后跳哪里；知道要做列表，但不知道列表上有哪些操作”的问题。怎么想？把演示当成需求评审：按用户真实路径走一遍。怎么做？在项目目录中启动开发服务，常见命令如下：

npm run serve
# 或
yarn serve
# 或
pnpm run serve

启动后打开浏览器访问本地地址，先注册、再登录，然后依次查看首页、收藏/喜欢、我的等页面。易错点是：不要拿旧项目直接改，应该新建项目并替换 src 素材；启动命令要跟包管理器一致，项目中途不要随意更换包管理器。

演示流程与功能模块

演示时按“注册 → 登录 → 首页列表 → 点赞/收藏 → 收藏和喜欢 → 我的 → 频道编辑”的顺序走。首页可以看到“推荐”和“最新”两类面经列表；点开文章可以点赞、收藏；在“收藏”和“喜欢”里能查看刚才操作过的内容；“我的”页面展示头像、用户名，并提供退出登录；频道区域可以编辑，删除不需要的频道，也可以把“面试”等频道加回来。

为什么要按流程演示？因为功能不是孤立的，登录状态会影响点赞收藏，收藏结果又会在“我的”里体现。怎么想？把每个页面当成一个模块，记录“入口、数据来源、操作结果”。怎么做？演示时一边点一边记：注册登录对应表单和接口；首页对应列表请求和频道切换；点赞收藏对应文章 ID 和状态更新；我的页面只做头像、用户名和退出。转写稿里明确提到，“我的”页面中有些功能没做，当前要做的是获取头像、用户名以及退出到登录页。易错点是：演示环境可能使用测试手机号和默认验证码，具体以演示页和接口文档为准；点赞失败不一定是代码错，可能是账号被他人登录、文章被删除或服务器状态问题，先刷新或换一篇文章再试。

项目收获

这个项目的收获不是单独学一个 API，而是把前面学过的组件通信、路由跳转、接口请求、组件库使用、代码规范等串起来。为什么需要强调收获？因为项目课最容易变成“照着文档抄”，抄完不知道学了什么。怎么想？每完成一个模块，都问自己：数据从哪里来、传给哪个组件、通过什么接口、出错怎么排查。怎么做？提前准备好资料：移动端线上演示地址、接口文档、开发文档、Vant 组件库文档、axios 文档。转写稿里反复提醒把这些网址收藏到一起，避免用的时候到处找。易错点是：资料不要只存不读，接口文档决定请求参数和返回值；组件库要先看示例再改；开发文档里的步骤和代码要结合自己的项目路径使用。

调试与易错点补充

演示和准备阶段常见的调试过程要记住：配置类文件修改后，必要时重启开发服务；ESLint 报错先看鼠标悬停提示，带 ESLint 标志的通常只是格式问题，不是语法错误；自动格式化失败时，先检查是不是自己写出了语法错误，例如对象属性之间应该用逗号却加了分号；导入语句位置不规范时，自动保存可能调不过来，可以手动 Ctrl + S 再观察。为什么要讲这些？因为项目推进中最耗时的往往不是写功能，而是被格式、配置和小错误卡住。怎么想？先判断“是语法错、格式错，还是接口/环境问题”。怎么做？看报错位置、看规则名、看接口返回、换文章或重启服务验证。易错点是：不要把所有报错都当成业务错误；也不要在项目中途随意更换包管理器，否则锁文件和依赖容易混乱。

先确认脚手架与创建命令

本节要完成的是用 Vue CLI 生成 hm-vant-h5 项目骨架，并把目录初始化到可以启动的状态。

为什么需要：手写 Vue 项目要自己配 Babel、路由、CSS 预处理、ESLint 等，容易漏文件、版本对不上。脚手架把这些初始化工作一次做完。
怎么想：先确认全局有 @vue/cli，再用 vue create 创建项目；命令后面的名字就是项目目录名。
怎么做：笔记里脚手架已安装，命令为：

npm i @vue/cli -g

创建项目：

vue create hm-vant-h5

易错点：转写稿里提醒，终端路径不要有特殊符号，比如小括号等；npm 不是单独安装的，装好 Node 后一般就带 npm，不要到处找“单独装 npm”的办法。项目名也不要随意带特殊字符。

选择手动配置而不是默认预设

执行 vue create 后会出现预设选择：

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

为什么需要：默认预设只给 Babel、ESLint 等基础项，不一定包含路由、CSS 预处理等本项目要用的能力。
怎么想：本节要按项目需要逐项选，所以选 Manually select features，即“手动选择功能”。
怎么做：用方向键移动到 Manually select features 回车，进入功能勾选。

易错点：不要一上来就选 Default，否则后面发现少 Router、CSS 预处理器时还要重新补装。转写稿里也强调是“自选功能”，不是默认全套。

选择 Vue 版本与路由模式

功能勾选后，终端会问 Vue 版本。笔记中选的是 Vue 2：

  3.x
> 2.x

为什么需要：Vue 2 与 Vue 3 的语法、生态和组件库版本不同，项目初始化时必须先定版本。
怎么想：本节后续搭配的是 Vue 2 体系，所以按笔记选 2.x。
怎么做：移动到 2.x 回车。接着会问是否使用 history 模式：

易错点：history 模式需要服务端配合回退到 index.html，否则刷新子路由可能 404；如果部署环境不确定，先按截图和课程要求选择，不要随意改。转写稿里提到“有路由，它现在问你路由用什么模式”，说明这一步是在选路由模式，不是选 Vue 版本。

选择 CSS 预处理与 ESLint 风格

下一步选择 CSS 预处理：

为什么需要：项目里写 .vue 样式时可能用 less/sass 等预处理器，提前选好，脚手架会装对应依赖。
怎么想：按笔记截图和课程技术栈选择，不要多选不需要的预处理器。
怎么做：在终端里用方向键选中后回车。

随后选择 ESLint 风格：

笔记解释：ESLint 是代码规范检验工具，检验代码是否符合规范。比如 const age = 18; 多加了分号也可能报错；后面配置好工具后，一保存就格式化成规范样子。

为什么需要：团队代码风格要统一，减少合并冲突。转写稿里反复说，ESLint 检查的是“格式”，不是“语法错误”；双引号、分号、缩进这些语法本身可能没错，但不符合团队规则就会提示。
怎么想：初学先按笔记选标准风格，不要一开始自定义一堆规则。转写稿里提到默认可能要求字符串用单引号、语句结尾不加分号、缩进两个空格等，具体以项目规则为准。
怎么做：按截图选择 ESLint 风格，后续保存时用格式化工具自动修。
易错点：看到 ESLint 报错不要紧张，先鼠标悬浮看是否有 ESLint 标记；有标记多半是格式问题，不是代码写错。格式化插件也修不了真正的语法错误，比如对象里该用逗号却写分号，这种要自己改。

校验时机、配置文件与保存预设

接着选择校验时机：

笔记写“直接回车”。为什么需要：决定 ESLint 在什么时候检查，比如保存时检查。怎么做：按笔记直接回车即可。易错点：不要在这里乱改，初学阶段跟着课程走。

然后选择配置文件的生成方式：

笔记也写“直接回车”。为什么需要：决定 ESLint 等配置放在单独文件还是 package.json 里。怎么想：按截图默认项走，便于后续查看配置。怎么做：直接回车。

最后问是否保存预设，下次直接使用：

怎么做：不保存，输入 N。为什么：本次是练习项目，不必把当前选项存成全局预设。易错点：如果保存了，下次创建项目会多出一个预设项，容易混淆。

等待安装、检查完成并启动

等待依赖安装，出现完成提示：

为什么需要：依赖没装完就启动会报模块找不到。
怎么想：看到脚手架完成提示，再进入项目目录启动。
怎么做：按笔记启动：

npm run serve

易错点：转写稿里提到，配置类文件改完后如果没生效，要重启服务；另外终端路径要确认在项目目录内。启动成功后先确认页面能打开，再开始写业务。项目创建完成后，目录初始化才算真正完成。

为什么需要代码规范

为什么需要： 团队协作时，每个人写代码的习惯不同：有人喜欢加分号，有人不加；有人用单引号，有人用双引号；有人缩进两个空格，有人缩进四个空格。单看每一行可能都没语法错误，但合并到一起就容易混乱，甚至增加冲突。

怎么想： 代码规范不是“语法对错”，而是一套约定规则。笔记里说得很清楚：例如赋值符号左右是否需要空格、一句结束是否要加分号。没有规矩不成方圆，团队需要统一风格。

怎么做： 使用 ESLint 作为代码检查工具，检查代码是否符合指定规则。创建项目时使用的是 JavaScript Standard Style 代码风格规则。建议把 Standard Style 规则页看一遍，写的时候遇到错误再查询解决。

易错点： 不要把 ESLint 报错理解成“代码一定写错了”。转写稿里特别强调：ESLint 主要检查代码格式，不是检查代码错误；语法写错了要自己改，ESLint 帮不了。看到 ESLint 提示不要紧张，先判断是不是空格、分号、引号等风格问题。

JavaScript Standard Style 规范说明

为什么需要： 需要一套明确规则，才能让“检查”有依据。Standard Style 就是一套现成的代码风格约定。

怎么想： 先接受团队约定，再逐步熟悉规则。笔记列出的只是一小部分：字符串使用单引号，需要转义的地方除外；无分号；关键字后加空格，如 if (condition) { ... }；函数名后加空格，如 function name (arg) { ... }；坚持使用全等 ===，摒弃 ==，但在需要检查 null || undefined 时可以使用 obj == null。

怎么做： 写代码时按 Standard Style 执行；遇到报错就到规则表里查。转写稿还提到，可以用鼠标悬停看报错是否带 ESLint 标志，并看到具体规则名，例如分号相关规则叫 semi。

易错点： 这些规则不是固定死的，不同团队可以自行约定。转写稿举例：有的公司要求语句结尾加分号，有的要求不加分号。所以不要死记“必须怎样”，而要理解：当前项目采用哪套规则，就按哪套规则改。

复现错误：在 main.js 中随意改动

为什么需要： 只看概念不容易理解 ESLint 如何工作，需要制造一次报错来观察提示。

怎么想： 在 main.js 中随意添加一些空行、空格，让代码不符合 Standard 要求，保存后看控制台输出。

怎么做： 笔记中的示例代码是：

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')

按下保存代码之后，控制台中会输出错误：

易错点： 转写稿提醒，ESLint 是来帮助你的，心态要好，有错就改。不要看到一片红就慌；先看报错位置和规则名。还要注意：如果代码本身有语法错误，例如对象里该用逗号却加了分号，格式化工具也可能无法处理，这不是 ESLint 能自动修好的格式问题。

手动修正：从报错到规则表

为什么需要： 自动修复不是万能的，初学时必须学会根据提示定位问题，否则离开插件就不会改。

怎么想： 根据错误提示一项一项手动修正。如果不认识命令行中的语法报错是什么意思，就根据错误代码去 ESLint 规则列表中查找具体含义。转写稿的做法是：先故意制造报错，鼠标悬停看到 ESLint 标志和规则名，再打开规则表搜索该规则。

怎么做： 打开 ESLint 规则表，使用页面搜索（Ctrl + F）搜索错误代码，例如 func-call-spacing、space-in-parens 等，查找规则释义。规则表页面如图：

查到规则后，按规则要求修改代码，再保存观察报错是否消失。转写稿还演示了分号规则 semi 的配置：always 表示总是要求分号，never 表示不允许加分号；配置修改后通常需要重启服务才能生效。但本节先掌握手动修正即可，不要随意改项目默认规则。

易错点： 搜索规则时要看“规则名称”是否与报错中的名称一致，不要只看页面文字相似就点进去。转写稿特别提醒：搜 SEMI 会出现多个结果，要看名称完全一致的那个。另一个易错点是：改完配置或规则后如果页面没变化，先重启服务；如果是自己写出的语法错误，不要指望 ESLint 或格式化插件自动修好，要先修正语法。

课件图示

代码示例

示例一：main.js —— ESLint 报错与手动修正

// ❌ 改动后（笔记原文，故意加空格/空行，保存即报错）
import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')

// ✅ 手动修正后
import Vue from 'vue'
import App from './App.vue'
import './styles/index.less'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

关键行与易错点

• new Vue ( {：函数名与括号之间不能有空格，对应规则 func-call-spacing；括号内侧不能有空格，对应 space-in-parens。
• 三条 import 必须集中放在文件最前面，中间不能夹别的语句，对应 import/first（转写稿里 Ctrl+S 才生效的那类“顽固”报错）。
• 字符串统一用单引号，语句结尾不加分号 —— 这是 JavaScript Standard Style 的约定（不是语法错误，只是风格不符）。
• 判断报错性质：鼠标悬停提示里带 ESLint 字样就是格式问题，改空格/分号即可；不带的就是真正的语法错误，格式化插件救不了。
• 查报错含义：拿提示里的规则名（如 semi、func-call-spacing）去 ESLint 规则表 Ctrl+F 搜索。

---

示例二：.eslintrc.js —— 自定义 semi 规则

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 脚手架默认生成的两条，不要动
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 新增：要求语句结尾必须加分号（always 总是加分号 / never 不允许加分号）
    semi: ['error', 'always']
  }
}

关键行与易错点

• 规则名的来源：故意在 App.vue 末尾加一个分号 → 保存 → 看悬停提示小括号里的规则名 semi，再拿它去规则表搜（搜出来 6 条，要按名称完全一致去挑，不能只看提示文字）。
• 数组第一项 'error' 是错误级别，也可写成 'warn'；第二项 'always' / 'never' 才是具体行为。
• 改配置时字符串必须用单引号，写成双引号会立刻再报一条 quotes 错误。
• 任何配置改动后都要重启 npm run serve，否则规则不生效。
• 这条规则是可变的，不是固定死的；本项目按默认（不加分号）来，演示完要把这条规则删掉。

---

示例三：VS Code settings.json —— 保存即自动格式化

{
  "editor.tabSize": 2,
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "这里填你安装的格式化插件 ID"
  },
  "[javascript]": {
    "editor.defaultFormatter": "这里填你安装的格式化插件 ID"
  }
}

关键行与易错点

• editor.tabSize: 2 是必配项：ESLint 要求缩进两个空格，写三个空格直接报错。
• files.autoSave: "onFocusChange"：失焦（点编辑器外面、切到浏览器）即保存并格式化，不用按 Ctrl+S。
• editor.formatOnSave: true 让格式化在保存时触发；格式化插件必须在 VS Code 里先安装并启用，装完最好重启一次 VS Code 才能被识别。
• editor.defaultFormatter 里填插件 ID，插件不唯一：ESLint 自带格式化、Vetur 自带格式化、以及转写稿里用的那个插件，各有优劣（例如 Vetur 格式化后方法名与括号之间不加空格，反而违反 Standard 规范）。
• 粘贴配置时注意和已有配置之间用逗号分隔，出现黄线提示“重复配置”就把旧的那几条删掉。
• 极个别“顽固”代码（如 import 顺序）自动保存调不好，手动按一次 Ctrl+S 即可；但如果是自己写错的语法（比如对象里写成 ; 而不是 ,），格式化插件也救不了。

常见错误

1. 创建项目时脚手架直接报错退出 现象：执行 vue create xxx 后终端刷红字，或卡在拉取模板。 原因：终端所在路径含中文、空格或特殊符号；或 npm 源不可达。 修法：把终端切到纯英文无空格的目录再执行；确认镜像源已改为国内源后重试。

2. 保存后满屏红波浪线，误以为代码写错了 现象：一按保存控制台就输出一堆报错，但程序逻辑其实没问题。 原因：这些是 ESLint 的格式规则（semi、quotes、space-before-function-paren、func-call-spacing 等），不是语法错误。 修法：鼠标悬停报错处，带 ESLint 标记的就是风格问题；取出括号里的规则名，去 ESLint 规则表搜索该名称（Ctrl+F 搜规则名而不是中文提示），按文档改代码即可。

3. 改了 .eslintrc.js 规则却不生效 现象：已经把 semi 配成 always，代码里还是不加分号也不报错。 原因：配置文件只在服务启动时读取，热更新不会重新加载。 修法：Ctrl+C 停掉 npm run serve 再重新启动，然后故意写反规则验证是否生效。

4. 自动格式化后格式依旧不符合规范，甚至格式化失败 现象：保存后缩进、空格没变；或弹出"无法格式化"。 原因一：代码本身有语法错误（如在对象属性后面加分号、在 add (1,2) 的括号前多写空格），格式化器无从下手。 原因二：所用格式化插件与项目 ESLint 规则冲突（例如某插件默认不给函数名后加空格，而项目要求加）。 修法：先手动修掉真正的语法错误；再让格式化插件与项目规则对齐，冲突时以项目规则为准，顽固的地方按 Ctrl+S 强制格式化一次。

5. 往 settings.json 粘配置后出现大量黄线 现象：粘贴完配置，编辑器提示"重复键"。 原因：同名的配置项在文件里已存在，后粘的与旧的重复。 修法：删掉前面带黄线的旧项，只保留一份；settings.json 是 JSON，各项之间必须有逗号。

6. 中途更换包管理器导致项目起不来 现象：本来用 npm，后来换成 yarn/pnpm 装依赖，报模块找不到或版本错乱。 原因：三种包管理器生成的锁文件不同，混用会让依赖树不一致。 修法：看项目根目录的 package-lock.json / yarn.lock / pnpm-lock.yaml 判断该用哪个，一个项目自始至终只用一个；真要换，先删 node_modules 和旧锁文件再重装。

7. 装 Vant 后组件样式错乱或直接报错 现象：npm i vant 之后按 2.x 文档写组件，页面无效果或报兼容错误。 原因：不带版本号默认装最新大版本，与 Vue2 不匹配。 修法：指定大版本安装 npm i vant@2，装完在 package.json 里确认版本号落在 2.x。

练习

1. 在 main.js 里故意制造三类问题：字符串用双引号、语句末尾加分号、函数调用括号前加空格。保存后逐个记录 ESLint 报出的规则名，去官方规则表查出释义，再逐一改回合规写法，直到控制台干净。

2. 在 .eslintrc.js 的 rules 中加 'semi': ['error', 'always']，重启服务，观察项目里哪些文件立刻报错；再改成 'never' 重启，比较两次报错位置的差异，说明为什么必须重启才生效。

3. 准备一段缩进混乱、分号乱加的代码，分别用「右键 → 使用 ESLint 格式化」「Vetur 格式化」「自己配的格式化插件」各格式化一次，把三种结果截图对比，指出哪一处差异是由插件默认规则不同造成的。

4. 打开三个已有项目（或让同学提供），只通过根目录文件判断各自用的是哪个包管理器，并说明为什么不能在这三个项目里任意切换。

5. 新建一个测试页面，安装 vant@2 并引入 Button 组件渲染出来；再故意装一次不带版本号的 vant，对比两次 package.json 中的版本号和页面表现，写出结论。

原视频对照

#	视频	时长
1	回顾插槽	09:49
2	项目内容介绍	11:17
3	其他包管理器介绍	09:17
4	自选功能安装新项目	05:05
5	ESLint介绍和自定义规则	17:54
6	配置代码格式化插件	13:30
7	组件库介绍	11:14

小结

• 保存后报错先分类：带 ESLint 标记 = 风格问题，不带标记 = 真正的代码错误，后者 ESLint 帮不了你。
• 规则名是唯一可靠的检索入口，中文提示不可靠；查规则时搜名称，不搜描述。
• ESLint 规则没有绝对对错，只有团队是否统一；换公司、换项目规则就可能完全不同，不要把自己的习惯当标准。
• 改任何配置文件（.eslintrc.js、vue.config.js）之后，第一反应应该是重启服务。
• 格式化插件是"省事工具"而不是"纠错工具"，它只能整理格式，语法写错了它只会告诉你格式化失败。
• 包管理器三选一，一个项目一条线走到黑，判断依据是根目录的锁文件。
• 移动端 Vue2 项目配 Vant 2.x，安装时永远显式带上大版本号，避免默认装到不兼容的新版本。
• 脚手架生成的目录结构是起点不是终点，替换素材时要先清空原 src 再整体粘贴，别新旧混着用。