生命周期与工程化开发（三）

本页对应 生命周期与工程化开发，共 6 段视频，约 51 分钟。

学习目标

• 能说明传统开发与工程化开发的主要区别，并描述 Vue CLI 脚手架在创建标准化 Vue 项目中的作用。
• 能在无特殊符号的目录下使用 Vue CLI 创建 Vue2 项目、选择 npm 包管理器并启动项目，通过终端提示的 localhost 地址访问页面。
• 能解释 main.js、App.vue、index.html 中 #app 的运行关系，说明根组件内容如何被渲染到页面。
• 能按多词格式规范命名 Vue 组件，并正确编写 template、script、style 三部分，保证 template 只有一个根元素、data 以函数形式返回对象。
• 能分别完成普通组件的局部注册和全局注册，并在综合案例中正确使用已注册组件。
• 能为组件样式配置 lang="less"，并说明使用 Less 所需安装的依赖包。

知识点

1. 根组件 App.vue 的定位

为什么需要：工程化开发后，页面结构要能复用，不能把所有内容都堆在一个 HTML 文件里。根组件 App.vue 就是整个应用最上层的组件，用来包裹所有普通小组件。

怎么想：先理清入口链路。转写里反复提到的“慢点DS”就是 main.js，它是项目入口；index.html 里只有一个 id="app" 的空 div；main.js 导入 App.vue，再通过 render 把 App 渲染到 #app 中。所以页面最终看到的内容，主要来自 App.vue，不是 index.html 里凭空写出来的。

怎么做：把 App.vue 当作根组件，其他组件放在它下面。调试时可以验证：在 main.js 中把导入的 App 换成自己写的组件，页面就显示新组件内容，这说明入口文件负责“导入谁、渲染谁”。

易错点：不要把 App.vue 和 index.html 混为一谈；index.html 提供挂载点，App.vue 提供根组件内容。转写里“APP是最大的组件、根组件”就是这个意思。

2. 组件的三部分构成

为什么需要：一个页面组件要同时管理结构、逻辑和样式，分成三部分才清晰、可维护。

怎么想：template 放 HTML 结构，script 放 JS 逻辑，style 放样式。转写里说组件“三个部分组成”，正好对应页面结构、JS 代码和样式。

怎么做：在 App.vue 中按三部分书写：

<template>
  <div>页面结构</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

易错点：本节是 Vue2 场景，template 有且只能有一个根元素，所有内容要放在这个根元素里面；根元素外不能再并列放一个 p 标签，哪怕放空格文本也不行。转写里特意演示了多写一个标签就报错。script 中 Vue 相关代码要写在导出对象里；data 要写成函数并返回对象，不能直接写对象。

3. 语法高亮插件

为什么需要：没有高亮和提示，App.vue 里的模板、脚本、样式不容易检查，写错也不容易发现。

怎么想：先确认编辑器是否正确识别 .vue 文件。转写里说安装代码高亮插件和代码提示插件即可，不要完全照 PPT 装旧版 Vetur；旧插件和新版插件可能冲突，按群内说明装新版高亮插件。

怎么做：安装后展开 src，打开 App.vue，看代码是否有颜色；有颜色说明高亮生效，再配合提示插件写代码。

易错点：如果 App.vue 是纯色、没有高亮，说明插件没装好或没生效。转写里明确提醒：不要按 PPT 装旧版 Vetur，优先用群内说明的新版插件。

4. 让组件支持 less

为什么需要：普通 CSS 写嵌套和变量不方便，项目里常用 less 提高样式编写效率。

怎么想：Vue 组件默认按 CSS 处理样式，要支持 less，必须做两件事：样式标签声明 lang="less"，项目安装 less 和 less-loader。

怎么做：把 style 标签改成：

<style lang="less">
</style>

再安装依赖，二选一：

yarn add less less-loader -D
# 或
npm i less less-loader -D

易错点：只写 lang="less" 不装包会报错；只装包不写 lang="less" 也不会按 less 编译。转写里强调这是开发依赖，所以命令后面带 -D。

5. 小结：App 组件包含哪三部分

App.vue 是根组件，包含 template 结构、script 逻辑、style 样式三部分。template 在 Vue2 中只能有一个根元素；script 写 Vue 逻辑；style 需要 less 时写 lang="less" 并安装 less、less-loader。页面显示链路是：main.js 导入 App.vue，把 App 渲染到 index.html 的 #app 中，所以调试根组件时，先看入口文件导入的是谁，再看 App.vue 里写了什么。

为什么需要局部注册

为什么需要： 工程化开发的核心目的之一，是让页面结构可以复用。转写稿里反复提到“组件化就是为了实现页面的复用”，否则每个页面都从头写 HTML/CSS/JS，结构难复用、维护也麻烦。局部注册就是让某个组件只在“使用它的组件内部”可用，避免所有组件都变成全局可用。

怎么想： 先分清“创建组件”和“注册组件”不是一回事。创建 .vue 文件只是写好了一个组件；要在另一个组件里使用它，还必须先导入、再注册。局部注册的关键限制是：只能在注册的组件内使用。A 组件内部注册的局部组件，不能在 B 组件里直接使用。

怎么做： 在使用方组件里完成三步：创建 .vue 文件 → 导入 → 在 components 中注册 → 模板中当标签使用。

易错点： 不要把“创建了文件”误认为“已经能使用”。没有导入和注册，模板里写 <HmHeader></HmHeader> 也不会按组件生效。局部注册的组件也不能跨组件随便用。

局部注册的核心思路

为什么需要： 组件要能被模板识别，Vue 需要知道“这个标签对应哪个组件对象”。局部注册就是把组件对象登记到当前组件的 components 配置里。

怎么想： 把组件当成一个可复用的 HTML 标签来用。标签名对应注册名，注册名对应导入的组件对象。本节笔记要求组件名采用大驼峰命名法，如 HmHeader。

怎么做： 基本语法如下图，先导入组件对象，再在 components 中注册：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

上面是笔记原代码。注意 HmHeader:HmHeaer 里的 HmHeaer 是笔误，实际应写成 HmHeader: HmHeader；更常见的简写是 HmHeader。注册后，在模板中当成 HTML 标签使用：

<HmHeader></HmHeader>

易错点： 导入名、注册名、模板标签名要对应；不要照抄拼写错误。组件名要是多词格式，转写稿里创建 ABC.vue 会报错，就是因为组件名不是多词格式；App 是根组件，属于特殊存在。

在 App.vue 中完成练习

为什么需要： 练习的目的是把“局部注册”真正落到页面布局里：头部、主体、底部三个组件在 App.vue 中使用，拼出页面结构。

怎么想： 先分别创建 HmHeader.vue、HmMain.vue、HmFooter.vue，每个文件都包含 template、script、style 三部分；然后在 App.vue 中导入并局部注册这三个组件，最后在模板中按标签使用。

怎么做： 笔记给出的三个组件代码如下，需要保留：

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>

目标布局如下图：

在 App.vue 中按局部注册步骤写：

<template>
  <div>
    <HmHeader></HmHeader>
    <HmMain></HmMain>
    <HmFooter></HmFooter>
  </div>
</template>

<script>
import HmHeader from './components/HmHeader'
import HmMain from './components/HmMain'
import HmFooter from './components/HmFooter'

export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

易错点： 三个组件文件路径要正确；模板里组件标签要用注册名；template 在 Vue2 中只能有一个根元素，转写稿里在根 div 外再写一个 p 标签会立即报错。调试时也可以借助入口理解：main.js 导入 App 并渲染到 index.html 的 #app，页面最终显示的是根组件里的内容。

组件命名与使用易错点

为什么需要： 组件名不规范会直接报错或造成使用混乱。转写稿里创建 ABC.vue 后报错，就是在提醒组件名必须是多词格式。

怎么想： 本节笔记明确注意“组件名规范 → 大驼峰命名法，如 HmHeader”。转写稿还补充：小驼峰、大驼峰、中横线可以体现多词，但下划线不行；ABC 这种一个词的名字不行。

怎么做： 推荐直接使用大驼峰，如 HmHeader、HmMain、HmFooter。如果文件名不符合多词格式，转写稿提到可以在 export default 中通过 name 指定多词格式作为补救，但初学阶段优先把文件名和组件名起规范。

易错点： 不要把组件名起成单个单词；不要忘记局部注册只能在当前组件内使用；不要把笔记示例里的拼写错误带进项目。

小结与自测

为什么需要： 局部注册的规则不多，但步骤顺序和命名限制最容易出错，需要用总结问题自测。

怎么想： 记住一条主线：创建组件文件 → 在使用方组件内导入 → 在 components 中注册 → 模板中当标签使用。

怎么做： 回答笔记总结：A 组件内部注册的局部组件不能在 B 组件使用；局部注册步骤是创建 .vue 文件、导入、注册、使用；使用组件时本节按大驼峰命名法，如 HmHeader。

易错点： 忘记注册、导入路径写错、组件名不是多词格式、template 出现多个根元素，都是常见调试点。

本节讲普通组件的全局注册。结合转写稿里反复强调的入口文件、组件三部分和命名规范来理解：组件要被页面或其他组件使用，必须先“注册”；全局注册就是把组件登记到 Vue 根实例这一层，让项目里的任何组件都能直接使用。转写稿中的“功能化开发”应理解为“工程化开发”，“VOE”即 Vue，“wifipack”即 webpack，这些同音或口误不影响本节结论：在 Vue 工程中，main.js 是入口，组件由 template、script、style 三部分组成。

全局注册解决什么问题

为什么需要：局部组件只能在注册它的父组件里使用；如果多个局部组件都要展示同一个通用按钮，每个组件都导入、注册一遍会很重复。全局注册后，项目的任何组件中都能使用。

怎么想：把通用组件看成项目级“公共标签”。它只注册一次，其他组件模板里直接写标签即可，不需要各自 import 和 components 注册。

怎么做：先创建 .vue 组件文件，再在 main.js 中导入并调用 Vue.component 注册。

易错点：不要以为写了组件文件就自动可用；没有注册，模板里写标签不会按组件渲染。全局注册适合通用、复用面广的组件，不要把所有组件都无脑全局注册。

创建组件文件

为什么需要：全局注册登记的是“组件对象”，所以必须先有合法的 .vue 组件。转写稿中组件由三部分组成：template 放页面结构，script 放 JS 代码，style 放样式。

怎么想：先保证组件自己能独立描述一块 UI，再考虑注册。本节练习的通用按钮就是一个典型组件。

怎么做：创建 HmButton.vue，写入按钮结构、脚本和样式。注意 Vue2 的 template 只能有一个根元素，转写稿中特别强调“只能有一个根元素”。

易错点：template 外层并列多个根标签会报错；组件文件名和组件名建议使用多词格式，避免单词名带来的命名问题。

在 main.js 中全局注册

为什么需要：main.js 是项目入口，转写稿中说明它最先执行，并负责导入 Vue、导入根组件、创建 Vue 实例。把全局注册放在这里，注册关系对全项目生效。

怎么想：注册分两步：先 import 组件对象，再把它交给 Vue.component。注册名要和模板标签对应。

怎么做：按笔记语法：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

易错点：忘记 import；导入变量名与注册时传入变量不一致；把 Vue.component 写到组件内部；注册名随意写成单词名。调试时先看 main.js 是否有这两行，再看标签名是否一致。

在模板中直接使用

为什么需要：注册的目的是使用。全局注册后，不需要在当前组件里再写 components。

怎么想：把已注册组件当成 HTML 标签写。笔记给出的使用方式是：

<组件名></组件名>

怎么做：在任意组件模板中写 <HmButton></HmButton>。本节练习要求“在以下 3 个局部组件中展示一个通用按钮”，因此三个局部组件都不必重复注册，直接使用全局按钮组件即可。

易错点：标签名与注册名大小写不一致；在局部组件里又重复导入注册；误以为全局注册后还要在 components 中声明。

组件命名规范

为什么需要：转写稿中组件命名有明确要求：组件名必须是多词格式，Vue2 中 APP 是特殊根组件。全局注册名也应遵循可读、可区分的命名。

怎么想：推荐大驼峰命名法，如 HmHeader、HmButton。多词能避免与 HTML 标签或单词组件混淆。

怎么做：注册时写 Vue.component('HmButton', HmButton)，模板中使用 <HmButton></HmButton>。

易错点：只写一个单词作为组件名；注册名和文件名完全无关导致排查困难；把“大驼峰”误写成下划线式命名。

练习：通用按钮组件

为什么需要：通过练习把“创建—注册—使用”串起来。

怎么想：HmButton.vue 只负责按钮外观；三个局部组件只负责摆放它。

怎么做：保留笔记中的组件代码：

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

然后在 main.js 中注册，再到三个局部组件模板里写 <HmButton></HmButton>。

易错点：按钮样式写在局部组件里而不是按钮组件里，导致复用后样式丢失；注册后页面没变化时，先检查终端是否重新编译、浏览器是否刷新、main.js 是否保存。

小结

全局注册组件应在 main.js 中注册，语法是 Vue.component('组件名', 组件对象)；注册前先导入组件。全局组件在项目中的任何一个组件中都可以使用。实际排查时抓住入口链路：main.js 是否导入并注册、组件名是否多词大驼峰、模板标签是否与注册名一致。

启动项目演示：先让“小兔仙首页”跑起来

为什么需要：前面我们多在单个 HTML 里引入 Vue，页面结构不容易复用；综合案例要按公司里常见的工程化方式开发。先启动项目，是为了确认脚手架环境、依赖和入口文件都正常，再谈拆分组件和写页面。

怎么想：安装脚手架工具是一次性操作，项目装好后，日常开发主要是“进入项目根目录 → 启动本地服务 → 浏览器访问”。不要一上来就改配置，先用默认项目跑通，看到页面后再动 src 里的代码。

怎么做：在项目根目录打开终端，执行启动命令：

npm run serve

启动后看终端提示，通常是访问 http://localhost:8080；如果端口被占用，可能是 8081、8082，以终端提示为准。安装项目时转写稿里用的是：

vue create demo -m npm

安装时选择 Vue2，等待完成即可。启动成功后，浏览器能看到默认页面，说明工程化环境正常。

易错点：终端路径必须是项目文件夹，不是它的上一层；项目路径不要有括号等特殊符号；不要用 Git Bash 做需要上下键选择的安装交互；VS Code 在 Vue2 项目里应只打开项目根目录，不能把“课堂代码”这种上层目录当根目录打开，否则后面容易报一些看似和代码无关的错。端口号也不要死记，始终看终端输出。

组件拆分示意：先搭架子，再填结构样式

为什么需要：综合案例页面不会只有一个大文件。按模块拆组件，才能让结构可复用、可维护；通用小组件以后还能通过 JS 动态渲染数据。

怎么想：开发思路笔记里给了三步：先分析页面，按模块拆分组件并搭架子，做局部或全局注册；再根据设计图编写组件的 HTML 结构和 CSS 样式；最后把重复出现的小块拆成通用小组件。也就是“先大后小、先骨架后细节”。

怎么做：在 src/components 中放组件文件，组件名建议用多词格式，例如大驼峰 AbcDef.vue、小驼峰 abcDef.vue 或中横线 abc-def.vue。一个 Vue2 单文件组件通常包含三部分：

<template>
  <div>页面结构</div>
</template>

<script>
export default {
  name: 'AbcDef',
  data() {
    return {}
  }
}
</script>

<style lang="less">
</style>

如果样式要用 Less，需要两步：style 上写 lang="less"，并安装依赖：

npm install less less-loader -D

易错点：组件名必须是多词格式，ABC.vue 这种单词名会报错；如果文件名不合规，可以在 export default 里写多词 name 补救，但 App.vue 是根组件，比较特殊。template 在 Vue2 中只能有一个根元素，外面不能再并列放 <p> 等标签。data 必须写成函数并返回对象，不能直接写对象。组件里学过的 data、方法、计算属性、watch、生命周期等 Vue 代码，都要写在导出对象中。

开发思路与运行过程：从入口文件理解页面显示

为什么需要：知道项目为什么能显示页面，调试时才能判断问题在入口、根组件还是某个子组件。综合案例后续拆组件，也依赖这条运行链路。

怎么想：项目入口是 main.js，它导入 Vue 和根组件 App.vue，再把 App 渲染到 index.html 里 id="app" 的 div 中。页面打开看到的内容，本质上来自 App 组件及其子组件。

怎么做：可以先改 App.vue 的模板内容，刷新页面验证；也可以新建一个组件，在 main.js 中导入并替换 App 做试验。转写稿里演示过：把 main.js 中导入的 App 换成自己写的组件，页面就显示新组件内容。render: h => h(App) 和 el: '#app' 的作用都是把根组件挂载到页面上，写法不同但效果一致。

易错点：不要随意改 index.html 和 main.js 的结构；导入组件时路径要写对；Vue2 的 template 不能多根；控制台那几行生产提示可通过 Vue.config.productionTip = false 关闭，但它不影响功能。调试时先看终端路径和浏览器地址，再看组件命名、根元素和 data 写法，基本就能定位常见问题。

课件图示

代码示例

1. 根组件 App.vue（三部分构成 + less）

<template>
  <!-- 结构：有且只能有一个根元素 -->
  <div class="app">
    我是 App 根组件
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<!-- 支持 less：加 lang="less"，并安装 less less-loader -->
<style lang="less">
.app {
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #8064a2;
  color: white;
}
</style>

要点解释：

• template / script / style 三段构成一个组件：结构、js 逻辑、样式。
• template 里只能有一个根元素（Vue2 限制），多个并列标签或根元素外多写一个 <p>、一个   都会报错。
• 使用 less 需两步：<style lang="less"> + 装包 yarn add less less-loader -D（或 npm i less less-loader -D），只改 lang 不装包会编译报错。
• 组件文件名必须是多词格式（大驼峰 HmHeader、小驼峰 hmHeader、中横线 hm-header 均可，下划线不行）；App 是唯一例外。

---

2. 局部注册：在 App.vue 中使用 HmHeader / HmMain / HmFooter

<!-- components/HmHeader.vue -->
<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

<!-- App.vue -->
<template>
  <div>
    <HmHeader></HmHeader>
    <HmMain></HmMain>
    <HmFooter></HmFooter>
  </div>
</template>

<script>
// 1. 导入需要注册的组件
import HmHeader from './components/HmHeader'
import HmMain from './components/HmMain'
import HmFooter from './components/HmFooter'

export default {
  // 2. 局部注册
  components: {
    HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

要点解释：

• 局部注册三步：创建 .vue 文件 → import 导入 → components 里注册 → 模板中当 HTML 标签用 <HmHeader></HmHeader>。
• components: { HmHeader } 是 HmHeader: HmHeader 的简写，键是组件名、值是组件对象。
• 局部注册的组件只能在注册它的组件内使用，在别的组件（如 HmMain 内部）直接用会报"未注册组件"。
• 标签写在 template 里时，整个模板仍只能有一个根元素，所以外面要包一个 <div>。

---

3. 全局注册：main.js 中注册 HmButton

<!-- components/HmButton.vue -->
<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

// main.js
import Vue from 'vue'
import App from './App.vue'
// 1. 导入需要全局注册的组件
import HmButton from './components/HmButton'

Vue.config.productionTip = false

// 2. 全局注册：Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)

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

要点解释：

• 全局注册的代码写在 main.js（项目入口）中，语法是 Vue.component('组件名', 组件对象)。
• 注册后项目里任何组件都能直接 <HmButton></HmButton>，无需再 import 和 components 注册，适合通用按钮这类小组件。
• render: h => h(App) 等价于 el: '#app'，作用都是把 App 组件渲染到 index.html 里 id 为 app 的 div 中；改 h(App) 里的组件就能换页面显示内容。
• 易错点：Vue.component 的组件名同样要用多词格式（大驼峰），单词名（如 ABC）会报错，可在 export default { name: 'AbcDef' } 中补多词名。

常见错误

1. 新建 HmHeader.vue 后编辑器一片纯白/纯黑，没有语法高亮，控制台也没报错

• 现象：文件能打开，但模板和脚本全是单色文本，看起来"没生效"。
• 原因：只装了 PPT 里提到的旧插件（Vetur），或者插件装了但当前文件未被识别为 Vue 文件；Vetur 与 Vue3 的 Volar 冲突，两者只能启用一个。
• 修法：禁用 Vetur，安装并启用 Vue Language Features (Volar)，重开文件确认 App.vue 中的代码是否已着色。

2. npm run serve 起不来，或起在 8081/8082 端口，浏览器打开 8080 是旧页面

• 现象：命令执行成功但访问 localhost:8080 看不到新内容，或提示端口被占用。
• 原因：终端路径不在项目根目录；或上一个 dev server 没关，新实例自动顺延端口。
• 修法：先确认终端路径就是项目文件夹（地址栏输入 cmd 打开最稳），关掉残留终端窗口，再执行 npm run serve，并以终端输出的实际端口为准。

3. VS Code 打开后代码莫名报红，但代码本身没问题

• 现象：单文件组件里出现与内容无关的波浪线，删了重写依旧报。
• 原因：VS Code 打开的根目录是"项目文件夹的上一层"（如把整个课堂代码目录拖进去了），Vue2 的插件在非根目录下解析异常。
• 修法：关掉窗口，只把项目文件夹本身拖进 VS Code，使侧边栏顶层目录就是项目根目录。

4. 组件在页面里写了 <HmHeader /> 却没渲染，控制台提示组件未注册

• 现象：标签当成了普通未知 HTML 元素，页面上什么都不显示。
• 原因：只在某个组件里 components 注册过，却在另一个组件中使用；或忘记 import；或注册时键名与标签名大小写/中横线写法不一致。
• 修法：局部注册要在"使用它的那个组件"里 import + 注册；跨组件通用则改到 main.js 用 Vue.component() 全局注册；标签写法与注册名保持对应。

5. 新建 Abc.vue 立刻报错，改内容也不消失

• 现象：文件名一确定就报红，与文件内代码无关。
• 原因：Vue2 要求组件名为多词格式，单个单词（Abc、Header）不合法；App 是唯一例外。
• 修法：改成大驼峰 AbcDef、小驼峰 abcDef 或中横线 abc-def；文件名实在不能改，就在 export default 里补 name: 'AbcDef'（下划线写法无效）。

6. template 里多写了一个并列标签，编译直接失败

• 现象：在根 div 后面又写了个 <p>，保存即报错。
• 原因：Vue2 的 template 只能有一个根元素，div 外面不能再有兄弟节点，连   也不行。
• 修法：把所有内容收进同一个最外层容器里，多余节点挪到该容器内部。

7. data 写成对象后页面数据不生效或报错

• 现象：data: { msg: 'hi' } 写法在组件里出问题。
• 原因：工程化开发下组件是可复用的，data 必须是函数返回对象，否则多个实例共享同一份数据。
• 修法：改为 data() { return { msg: 'hi' } }；其余 methods、computed、watch、生命周期照旧写在导出对象里。

8. lang="less" 写了却报样式解析错误

• 现象：样式不生效，终端提示缺少 less 相关 loader。
• 原因：只改了标签属性，没装依赖。
• 修法：npm i less less-loader -D，装完重启 dev server。

练习

练习 1（注册方式选择） 现有 HmHeader、HmMain、HmFooter 三个组件只在 App.vue 里用；另有 HmButton 要在多个页面组件里复用。请分别说明该用局部注册还是全局注册，并写出关键代码位置（哪个文件、写在哪一段）。

练习 2（排错） 下面代码保存后页面空白且控制台报组件未注册，请指出至少两处问题并改正：

<template>
  <div>
    <hm-header></hm-header>
  </div>
</template>
<script>
import HmHeader from './HmHeader'
export default { components: { HmHeader } }
</script>

（提示：思考文件所在目录与导入路径的关系，以及标签名与注册名的对应关系。）

练习 3（命名合规） 以下组件文件名哪些在 Vue2 工程中会报错？报错的请给出两种合规改法。 App.vue、Header.vue、HmHeader.vue、hm_header.vue、hm-header.vue、Hmheader.vue

练习 4（结构改造） 把下面这段改造成合法的单文件组件（补全三部分，并让样式支持 less）：

<h2>标题</h2>
<p>内容</p>

练习 5（综合拆分） 参照小兔仙首页，把页面拆成 HomeHeader、HomeBanner、HomeNav、HomeFooter 四个组件并在 App.vue 中组装。要求写出：拆分依据、每个组件的注册方式、App.vue 中 script 部分的关键代码。

原视频对照

#	视频	时长
1	工程化开发介绍（14-15）	09:53
2	安装vue-cli脚手架	06:49
3	安装一个vue项目	04:25
4	安装启动项目细节问题	05:28
5	了解vue项目的运行过程	13:18
6	vue组件的命名和写法	11:49

小结

1. 工程化开发的价值是"结构可复用 + 依赖走包管理"，不是换一套语法；写组件仍是你熟悉的 template/script/style。
2. 脚手架只需装一次，之后每天的动作只有两个：进项目目录、npm run serve；终端路径错是最高频的失败原因。
3. VS Code 只打开项目根目录，插件用 Volar 而非 Vetur——这两个环境问题会伪装成"代码写错了"。
4. 组件名必须多词，大驼峰是团队默认选择；App 是唯一豁免项，其余单词名一律报错。
5. 局部注册解决"我自己的页面我用"，全局注册解决"到处都要用"；判断标准是复用范围，不是组件大小。
6. template 单根元素、data 必须返回对象，这两条是组件化开发与之前页面写法的分水岭，必须形成肌肉记忆。
7. 项目启动链路只有一条：main.js 导入根组件 → 渲染进 index.html 的 #app；页面看不到你的代码，先查这条链路。
8. 拆分组件先"搭架子再填样式"，通用按钮类小组件优先考虑全局注册，为后续动态渲染留出空间。