一个更简洁的框架——Vue
Vue 是一个现代 JavaScript 框架提供了有用的设施渐进增强——不像许多其他框架，你可以使用 Vue 增强现有的 HTML。这使你可以使用 Vue 作为 jQuery 等库的直接替代品。
话虽如此，你也可以使用 Vue 编写完整的单页应用程序（SPA）。这允许你创建完全由 Vue 管理的标记，当处理复杂应用程序时可以提高开发人员的体验和性能。它还允许你在需要时利用用于客户端路由和状态管理的库。此外，Vue 对于客户端路由和状态管理等工具采取了“中间立场”的方法。虽然 Vue 核心团队维护这些功能的建议库，但它们并未直接捆绑到 Vue 中。这允许你选择不同的路由/状态管理库，以使其更适合你的应用程序。
除了允许你逐步将 Vue 集成到你的应用程序中，Vue 还提供了一种渐进的方式编写标记。像大多数框架，Vue 通过组件允许你创建可重用块标记。大多数时候，Vue 组件是使用一个特殊的 HTML 模板的语法写的。当你需要比 HTML 语法允许的更多的控制时，你可以编写 JSX 或纯 JavaScript 函数来定义组件。
在学习本教程的过程中，你可能希望在其他选项卡中打开 Vue 指南和 API 文档，以便在需要了解任何子主题的更多信息时参考它们。
安装 Vue
要在现有站点中使用 Vue，可以通过
生产环境版本（经过优化的版本，控制台警告最小化，建议你在站点上包含 Vue 时指定版本号，这样任何框架更新都不会在不知情的情况下破坏实时网站。）
html
然而，这种方法有一些局限性。要构建更复杂的应用程序，你需要使用 Vue NPM 包。这将允许你使用 Vue 的高级功能并利用 Vite 或 webpack 等捆绑包。为了让使用 Vue 构建应用程序变得更容易，我们提供了一个 CLI 脚手架工具 create-vue，以简化开发流程。要使用 create-vue，你需要：
安装 Node.js 版本 20。
已安装 npm 或 yarn。
备注：如果你还没有安装上述软件，有关安装 NPM 和 Node.js 的方法在这里。
要安装 Vue 并初始化新项目，请在终端运行以下命令：
bashnpm create vue@latest
如果你使用 yarn:
bashyarn create vue@latest
该命令将为你提供一份可使用的项目配置列表。其中有一些默认设置，但你也可以选择自己的项目特定设置。通过这些选项，你可以配置 TypeScript、linting、vue-router、测试等。我们将在下面的初始化步骤中逐步介绍这些选项。
初始化一个新项目
为了探索 Vue 中各种各样的特征，我们将建立一个简单的任务清单应用。首先，我们将使用 create-vue 为应用程序构建一个新的脚手架。
在终端，用 cd 命令进入你想要创建示例的文件夹，然后执行 npm create vue@latest（如果使用 Yarn，则运行 yarn create vue@latest）。
交互式工具会让你选择一些选项，然后按下 Enter 即可。在本项目中，我们将使用以下配置：
✔ Project name: … todo-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
? Add Prettier for code formatting? › Yes
选择这些选项后，你的项目结构就配置完成了，依赖项也定义在了 package.json 文件中。接下来的步骤是安装依赖项和启动服务器，工具会方便地打印出所需的命令：
Scaffolding project in /path/to/todo-vue...
Done. Now run:
cd todo-vue
npm install
npm run format
npm run dev
项目结构
如果前面的步骤都执行顺利的话，脚手架工具应该已经在你的项目中创建了一系列的文件和目录，我们接下来列举一些比较重要的：
package.json：该文件包含项目的依赖项列表，以及一些元数据和 eslint 配置。
yarn.lock：如果你选择 yarn 作为你的包管理器，将生成此文件，其中包含项目所需的所有依赖项和子依赖项的列表。
jsconfig.json：这是一份用于 Visual Studio Code 的配置文件，它为 VS Code 提供了关于项目结构的上下文信息，并帮助自动完成。
vite.config.js：这是 Vite 开发服务器的配置文件，用于在本地计算机上构建和提供项目。Vite 服务器会密切关注源文件的更改，并在进行更改时热启动项目。
public：该目录包含在构建过程中发布的静态资源，
favicon.ico：这个是项目的图标，当前就是 Vue 的 logo。
index.html：你的 Vue 应用会从这个 HTML 页面运行。
src：这个是 Vue 应用的核心代码目录。
main.js：这是应用的入口文件。目前它会初始化 Vue 应用并且指定将应用挂载到 index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
App.vue：这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
components：这是用来存放自定义组件的目录，目前里面只有一个示例组件。
assets：这个目录用来存放像 CSS、图片这种静态资源，但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些像 Sass/SCSS 或者 Stylus 这样的预处理器。
备注：根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 views 的文件夹）。
.vue 文件（单文件组件）
就像很多其他的前端框架一样，组件是构建 Vue 应用中非常重要的一部分。组件可以把一个很大的应用程序拆分为独立创建和管理的不相关区块，然后彼此按需传递数据，这些小的代码块可以方便更容易的理解和测试。
在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候，Vue 却反其道行之。使用单文件组件，Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具（例如 Vite 或 webpack）处理，这意味着你可以使用构建时工具。你可以使用比如 Babel、TypeScript、SCSS 等来创建更多复杂的组件。
另外，使用 Vue CLI 创建的项目被配置为在开箱即用的情况下借助 Webpack 使用 .vue 文件。实际上，如果你查看我们使用 CLI 创建的项目中的 src 文件夹，你会看到第一个.vue 文件：App.vue。
让我们查看用 CLI 创建的项目中的 src 文件夹，检查第一个 .vue 文件：App.vue。
App.vue
打开 App.vue 文件，可以看到它由 、
备注：如果想要使用 TypeScript 语法，你应该将