什么是 Vue？

官方的定义是：渐进式 JavaScript 框架。易学易用，性能出色，适用场景丰富的 Web 前端框架。同时他还有三个特点：

1.易学易用：
基于标准 HTML、CSS 和 JavaScript 构建，加上一流的文档介绍和易懂的 API ，相较于其它框架能快速上手。

2.性能出色
经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

3.灵活多变
丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

简单来说 Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

为什么学习 Vue3？

Vue 2 将于 2023 年 12 月 31 日 停止维护，且大部分工作要求前端开发者能掌握这项技能。学习 Vue 3 不需要 Vue 2 的前置知识，对于初学者完全可以直接上手 Vue 3 。

渐进式框架

Vue.js 只提供组件系统、双向绑定等最核心的功能，其它的功能则是围绕Vue.js 开发的库（例如vuex、vue-router等），这样开发者就可以根据需求场景进行渐进式添加了。

如果上述的介绍你还一知半解，不用担心，相信后面学完之后再回看，就会有不一样的体会。

安装代码编辑器 VSCode

VSCode 是前端使用最多的代码编辑器，他有很多优点：

• OpenSource：免费开源，开箱即用。
• IntelliSense：智能代码补全。提供基于变量类型、函数定义和导入模块的智能补全。
• Debug：直接从编辑器调试代码。启动或附加到正在运行的应用程序，并使用断点、调用堆栈和交互式控制台进行调试。
• Git：内置 Git 命令。使用 Git 变得更加简单。可以查看差异、暂存文件并直接从编辑器进行提交等。
• Extensible：可扩展。丰富的插件生态，添加新语言、主题、调试器并连接到其他服务等拓展更多支持。扩展在单独的进程中运行，不会减慢您的编辑器。
• Customizable：自定义。可以通过简单的配置调整来满足编辑习惯，并且可以通过登录 GitHub 账号实现配置自动同步。

安装 VSCode：Visual Studio Code

添加 VSCode 插件

VSCode本身值提供最基础的功能，想要有更好的体验的话，需要通过VSCode插件实现。

具体方式点击最左侧的图标，搜索对应名称的插件点击安装即可。
安装成功后则变成一个工具设置的小图标，后面我们可以在进行插件的卸载等操作。

这里推荐本次实战项目装的一些插件：

必装：

• Chinese (Simplified)：汉化。让vscode显示变为简体中文。
• Volar：Vue 官方推荐的 VSCode 扩展。vue3 版本的 Vetur，提供 Vue3 语言支持。

规范相关，推荐装：

• EditorConfig for VSCode：让编辑器遵守协作规范的插件。
• Prettier for VSCode：VSCode 使用 Pretter 进行代码格式化。
• ESLint for VSCode：ESLint 在 VSCode 的一个扩展，以便获得更好的代码提示。

节省时间，推荐装：

• Vue VSCode Snippets：快捷生成 Vue 代码模板片段。
• Auto Close Tag： HTML 标签自动闭合。
• Auto Rename Tag：自动重命名标签。修改前半部分修改，后面闭合部分同步修改，不需要自己找到闭合标签。

创建Vue应用

创建 Vue 应用的方式有两种，第一种是通过官方的脚手架创建，第二种是通过 CDN 使用 Vue。这里我们用常见的第一种创建方式。

在创建前请确认自己的 Node.js 版本，需要是 16.0 及以上版本。node 安装。

我们选择一个文件进入控制台（创建后的应用将会被放在这个文件夹下），我们执行这个命令：

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

create-vue：Vue 官方的项目脚手架工具，将开发过程中要用到的工具、环境都配置好了，这样就可以方便地直接开始做开发，专注业务。

指令运行之后，首先决定自己的项目名称，这里我取名为 vue3-learning，确定后会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，根据需要开启。

最后的项目实战，将在学完 Vue3 、 TypeScript 及 Pinia 之后开展，届时需要将除 Vitest 和 Cypress 的其它可选功能都加上。

完成之后，可以执行下面三段指令，运行项目：

cd vue3-learning
npm install 
npm run dev

编写第一个HelloWorld

光说不练假把式，我们用一个最简单的例子，感受一下 Vue。

官方的脚手架给我写了一些样例，我把不需要的页面都去掉，项目结构可以保留。删除 components 文件夹下的文件（此文件夹下一般用来放通用组件），如果有 views 文件夹，也删除 views 文件夹下的文件（用来放视图展示页面），将 App.vue 改造为如下：

创建单文件组件

我们编写了一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

编写模板

在 App.vue 文件里，我们用了