一、基本概念
前端基础：前端开发的基础语言为HTML、CSS和JavaScript， 其中，HTML用于搭建页面的内容结构；CSS用于美化页面的显示效果；JavaScript用于处理用户和页面之间的交互行为。
jQuery简化DOM操作和减少开发过程中的浏览器兼容性问题，深受开发人员的欢迎。但前后端分离使得前端越来越重要，大量的Dom操作使得开发效率较低。
为了提高开发效率，市面上出现了基于MVVM模式的前端开发框架，例如Angular、React、Vue等。
开发框架对比
|----|------------|----------|-----------|
| | Angular | React | VUE |
| 作者 | Google | FaceBook | 国人尤雨溪个人项目 |
| 特点 | 模块化 | 虚拟Dom | 渐进式 |
| 成本 | TypeScript | JSX语言 | JS/TS |
二、vue
1、Vue（读音：/Vjuː/）是一款用于构建用户界面的渐进式框架。其中，"渐进式"是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。
Vue是基于MVVM模式的框架。
lModel是指数据部分，负责业务数据的处理；
lView是指视图部分，即用户界面，负责视图处理；
lViewModel用于连接视图与数据模型，负责监听Model或者View的改变。
View和Model不能直接通信，它们需要借助ViewModel才能进行通信。ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。
2、Node.js是一个基于V8引擎的JavaScript运行环境，提供了一些功能性的API，例如文件操作API、网络通信API等。
三、创建第一个vue项目
工具：VSCODE、 node.js安装包
1、安装VSCODE.
2、安装node.js
npm 是 Node.js 的包管理工具，安装 npm 的核心是先安装 Node.js（因为 Node.js 安装包默认会自带 npm）。
在下载npm安装包时，下载速度可能会比较慢，这是因为提供包的服务器在国外。为了加快包的下载速度，建议将下载源切换成国内镜像服务器。为npm设置镜像地址的具体命令如下。
npm config set registry https://registry.npmmirror.com
为了验证镜像地址是否设置成功，可以通过如下命令进行验证。
npm config get registry
执行上述命令后，若输出了设置的镜像地址，则表示设置成功。
3、安装yarn
设置yarn镜像源地址
yarn config set registry https://registry.npmmirror.com
yarn config get registry
4、使用Vite创建Vue3****项目
Vite提供了两种创建项目的命令。
- l手动创建项目的命令
- 4.1 npm手动创建项目
- g盘目录创建一个G:\vue\chapter01 文件夹
- 4.2 yarn手动创建项目
- l通过模板自动创建项目的命令
- yarn create vite hello-vite --template vue
4.3 在vscode 中运行创建好的 项目
vscode 中打开终端 输入命令
npm isntall
npm run dev
5、总结
