Vue 核心技术与实战day03

目录

Vue 生命周期 和 生命周期的四个阶段

Vue 生命周期函数（钩子函数）

工程化开发 & 脚手架 Vue CLI

脚手架目录文件介绍 & 项目运行流程

组件化开发 & 根组件

App.vue 文件（单文件组件）的三个组成部分

普通组件的注册使用

---

Vue 生命周期 和 生命周期的四个阶段

思考：

什么时候可以发送 初始化渲染请求 ？（越早越好）

什么时候可以开始 操作dom ？（至少dom得渲染出来）

Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

Vue 生命周期函数（钩子函数）

Vue生命周期过程中，会 自动运行一些函数， 被称为 【生命周期钩子】 → 让开发者可以在 【特定阶段】 运行 自己的代码 。

工程化开发 & 脚手架 Vue CLI

开发 Vue 的两种方式：

1. 核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。

2. 工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。

问题：

① webpack 配置 不简单

② 雷同 的基础配置

③ 缺乏 统一标准

基本介绍：

Vue CLI 是 Vue 官方提供的一个 全局命令工具。

可以帮助我们 快速创建 一个开发 Vue 项目的 标准化基础架子 。【集成了 webpack 配置】

好处：

1. 开箱即用，零配置

2. 内置 babel 等工具

3. 标准化

使用步骤：

1. 全局安装 (一次) ： yarn global add @vue/cli 或 npm i @vue/cli -g

2. 查看 Vue 版本： vue --version

3. 创建项目架子： vue create project-name （项目名-不能用中文）

4. 启动项目： yarn serve 或 npm run serve （找package.json）

1. 全局安装 (一次) npm i @vue/cli -g

报错如下

 A complete log of this run can be found in

解决方法

设置淘宝镜像源

npm config set registry https://registry.npmmirror.com/

脚手架目录文件介绍 & 项目运行流程

main.js        是项目的核心入口文件

作用：导入App.vue，基于App.vue创建结构渲染index.html

App.vue叫做根组件

提示当前处于什么环境

Vue.config.productionTip = true

true是开发环境

You are running Vue in development mode.

false 是生产环境

组件化开发 & 根组件

① 组件化： 一个页面可以拆分成 一个个组件 ，每个组件有着自己独立的 结构、样式、行为 。

好处：便于 维护 ，利于 复用 → 提升 开发效率 。

组件分类：普通组件、根组件。

② 根组件： 整个应用最上层的组件，包裹所有普通小组件。

App.vue 文件（单文件组件）的三个组成部分

 (2)npm i less less-loader

在app.vue中

export default

导出的是当前组件的配置项

普通组件的注册使用

组件注册的两种方式：

1. 局部注册：只能在注册的组件内使用

① 创建 .vue 文件 (三个组成部分)

② 在 使用的组件内 导入并注册

使用：

◆ 当成 html 标签使用 `<组件名></组件名>`

注意:

◆ 组件名规范 → 大驼峰命名法，如：HmHeader

2. 全局注册： 所有组件内都能使用

① 创建 .vue 文件 (三个组成部分)

② main.js 中进行全局注册

使用：

◆ 当成 html 标签使用 `<组件名></组件名>`

注意:

◆ 组件名规范 → 大驼峰命名法，如：HmHeader

技巧：

◆ 一般都用 局部注册 ，如果发现确实是 通用组件 ，再定义到全局。