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

Vue3.0项目实战+ElementUI从入门到实战_第1张图片

一.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全局

Vue3.0项目实战+ElementUI从入门到实战_第2张图片

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

Vue CLI 和 Vue的区别

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

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

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

查看VueCLI版本号: vue -v

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

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

Vue3.0项目实战+ElementUI从入门到实战_第3张图片

Vue3.0项目实战+ElementUI从入门到实战_第4张图片

Vue3.0项目实战+ElementUI从入门到实战_第5张图片Vue3.0项目实战+ElementUI从入门到实战_第6张图片

六.Vue3与Vue2 main.js对比

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

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

1.beforeCreate -> 使用 setup()

2.created -> 使用 setup()

3.beforeMount -> onBeforeMount

4.mounted -> onMou

你可能感兴趣的:(前端,html,elementui,vue.js,前端)