Vue3.0项目实战+ElementUI从入门到实战

课程地址:Vue3.0项目实战2021｜Vue差异化对比+实操公司后台管理系统｜零基础入门前端开发教程(C#/.Net/Vue基础/Vue3技术入门讲解/Vue实战)_哔哩哔哩_bilibili https://www.bilibili.com/video/BV17V411j76p?p=1

ElementUI从入门到实战【升职加薪，只争朝夕】-学习视频教程-腾讯课堂 https://ke.qq.com/course/3547529

零.开篇介绍

Vue3 vs Vue2

Vue-cli构建Vue3项目

初尝Vue3 compositon Api

实战Element-plus + Axios +Vue3

一.Vue运行环境安装,为什么需要安装运行环境

预装环境 ：node v8+

为什么需要运行环境 VUE项目==文件类型是.vue他是需要被编译成.js文件，才可以被浏览器识别 安装复杂度 一键安装 会不会增加学习成本 我们只是运用node环境，不需要单独学习

安装node环境下载 | Node.js 中文网 http://nodejs.cn/download/

查看node版本： node –v

此次课程Vue3需要node 版本8以上

二.npm镜像安装

npm 是node内置的资源管理器

查看npm版本： npm -v npm

镜像： 淘宝npm镜像 registry地址：http://registry.npm.taobao.org/

cnpmjs镜像 registry地址：http://registry.cnpmjs.org/

设置镜像源：npm config set registry 地址

查看镜像源： npm config get registry

三.VueCli脚手架安装

安装Vue-cli npm install -g @vue/cli

-g全局

四.使用Vue-Cli构建Vue3项目

Vue CLI 和 Vue的区别

脚手架是一个基于 Vue.js 进行快速开发的完整系统,通过@vue/cli 实现快速搭建标准化项目的脚手架

Vue的版本和VueCLI的版本的关系

Vue版本不受脚手架版本的影响 使用VueCLI构建项目过程，可以根据需求选择相应版本的Vue

查看VueCLI版本号： vue -v

五.使用Vue-Cli构建Vue3项目

在项目文件下下运行命令: vue creatre 项目名

六.Vue3与Vue2 main.js对比

七.Vue3生命周期变化以及setup函数

与 2.x 版本生命周期相对应的组合式 API

1.beforeCreate -> 使用 setup()

2.created -> 使用 setup()

3.beforeMount -> onBeforeMount

4.mounted -> onMounted

5.beforeUpdate -> onBeforeUpdate

6.updated -> onUpdated

7.beforeDestroy -> onBeforeUnmount

8.destroyed -> onUnmounted

9.errorCaptured -> onErrorCaptured

onRenderTracked 检查依赖被追踪。当render函数被调用时，会检查哪个响应式数据被收集依赖 onRenderTriggered 当执行update操作时，会检查哪个响应式数据导致组件重新渲染。

setup是compositon Api在Vue3中的入口

beforeCreate和created会在setup中