Vue-day03

day 03

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

生命周期四个阶段：

1. 创建 (响应式数据)
2. 挂载 (渲染模板)
3. 更新 (数据修改，更新视图)
4. 销毁 (销毁实例)

工程化开发 & 脚手架 Vue CLI

基本介绍：

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 server 或 npm run serve (找 package. json)

普通组件的注册使用

组件注册的两种方式：

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

   1. 创建 .vue 文件(三个组成部分) , 路径：src/components

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

      // 导入需要注册的组件
      import 组件对象 from '.vue文件路径'
      import HmHeader from './components/HmHeader'
      
      export default {
      	//局部注册
      	components:{
      	'组件名':组件对象,
      	HmHeader:HmHeader
      	}
      }

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

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

   2. main.js 中进行全局注册

      // 导入需要全局注册的组件
      import 组件对象 from '.vue文件路径'
      import HmButton from './components/HmButton'
      
      
      // 调用 Vue.component 进行全局注册
      // Vue.component('组件名',组件对象)
      Vue.component('HmButton',HmButton)

使用：当成 html 标签使用 ‘<组件名></组件名>’

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

技巧：一般都是用局部注册，如果发现确实是通用组件，再抽离到全局。