Vue-vue生命周期 , vue工程化开发简述
一.生命周期
Vue 生命周期 和 生命周期的四个阶段
Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
Vue 生命周期函数（钩子函数）
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。
beforeCreate()(创建前) / created()(创建后)
beforeMount()(挂载前) / mounted()(挂载后)
beforeUpdate()(更新前) / updated()(更新后)
beforeDestroy()(销毁前) / destroyed()(销毁后)
二.工程化开发入门
工程化开发 & 脚手架 Vue CLI
工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。
基本介绍： Vue CLI 是 Vue 官方提供的一个全局命令工具。 可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】
好处：
- 开箱即用，零配置 2. 内置 babel 等工具 3.标准化
使用步骤：
-
全局安装 (一次) ：npm i @vue/cli -g
-
查看 Vue 版本：vue --version
-
创建项目架子：vue create project-name（项目名-不能用中文）
-
启动项目： npm run serve（找package.json）
组件化开发 & 根组件
① 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。 好处：便于维护，利于复用 → 提升开发效率。 组件分类：普通组件、根组件。 ② 根组件(App.vue)：整个应用最上层的组件，包裹所有普通小组件。
App.vue 文件（单文件组件）的三个组成部分
-
语法高亮插件：
Vetur
-
三部分组成： template：结构 （有且只能一个根元素） script: js逻辑 style： 样式 (可支持less，需要装包)
-
让组件支持 less （1） style标签，lang="less" 开启less功能 （2） 装包: npm i less less-loader -D
普通组件的注册使用
组件注册的两种方式：
1.局部注册：只能在注册的组件内使用
① 创建 .vue 文件 (三个组成部分) ② 在使用的组件内导入并注册
// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'
export default { // 局部注册
components: {
'组件名': 组件对象,
HmHeader
}
}
2.全局注册：所有组件内都能使用
① 创建 .vue 文件 (三个组成部分) ② main.js 中进行全局注册
// 导入需要全局注册的组件
import HmButton from './components/HmButton'
// 调用 Vue.component 进行全局注册
// Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)
使用：
当成 html 标签使用 <组件名></组件名>
注意:
组件名规范 → 大驼峰命名法，如：HmHeader
技巧：
一般都用局部注册，如果发现确实是通用组件，再定义到全局。
