这是我参与「第五届青训营」伴学笔记创作活动的第 9 天，今天在开发组队大项目的过程中，学习了如何从头开发一个 Vue 3 的项目，包括 Vite 的使用，Vue 3 的基础语法等。
什么是 Vue
Vue 是一款用于构建用户界面的 JavaScript 框架。Vue 的核心功能是声明式渲染以及响应性。声明式渲染使得我们可以使用 Vue 的模板语法构建复杂的组件，响应性可以使得数据更新时能够自动更新页面。
Vue 3 官方文档：Vue.js
创建一个 Vue 单页应用
基于 Vite 的构建的单页应用可以使我们能够使用 Vue 的单文件组件 (SFC)。
前置条件：安装 Node.js
使用 Vite 首先需要安装最新版本的 Node.js。
安装 Node.js 后，可以在命令行中使用 npm 命令。
创建项目
使用 Vue 官方的项目脚手架工具 create-vue 创建 Vite 项目。
在命令行中运行以下命令：
npm init vue@latest
根据命令行中的可选功能提示完成配置后，会在当前目录生成项目文件夹。
进入项目文件夹，安装依赖：
npm install
运行项目
在编写完成代码后，运行下面命令，启动开发服务器来运行 Vite 项目：
npm run dev
构建项目
在项目准备部署时，运行下面命令，为你的应用创建一个生产环境的构建版本：
npm run build
创建完成后，会在 ./dist 文件夹中生成可部署代码，将此文件夹直接放在服务器上就可以进行访问。
编写 Vue 代码
每个单文件组件都是一个 .vue 文件，其中包含三个部分 <script> <template> 以及 <style>。
<script> 中用于编写组件的脚本代码，使用 JavaScript 编写。
<template> 中用于编写组件的模板代码，使用 HTML 以及 Vue 模板语法进行编写。
<style> 中用于编写组件的样式代码，一般使用 CSS 进行编写。
Vue 模板语法
Vue 使用一种基于 HTML 的模板语法，在模板中除了 HTML 代码外，还可以编写文本插值和指令。
文本插值
文本插值使用双大括号包裹起来，其中的内容为 JavaScript 表达式，可以访问组件实例的数据、函数等。
<span>Message: {{ msg }}</span>
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令。
v-html 指令
文本插值会将数据解析为纯文本，使用 v-html 指令可以将数据解析为 HTML。
<span v-html="rawHtml"></span>
span 的内容将会被替换为 rawHtml 属性的值，作为 HTML 显示在页面上。
v-bind 指令 ( : 指令)
文本插值不可以使用在标签内为标签定义属性，使用 v-bind 指令可以为标签动态定义属性。
<div v-bind:id="dynamicId"></div>
为标签 div 定义一个动态属性 id ，属性的值为 dynamicId 变量的值。
v-bind 可以简写为 : 。
<div :id="dynamicId"></div>
