9、使用Vue.js 3构建实用食谱应用

使用Vue.js 3构建实用食谱应用

在开发过程中，我们已经在常见技术和原则上取得了不错的进展。下面我们将详细介绍如何使用第三方组件库Vuetify构建一个食谱应用，同时会涉及到应用状态管理、路由设置、API连接等内容。

技术准备

在开始构建应用之前，我们需要了解一些必要的技术和工具：
- Vuetify ：一个流行的Vue.js 3组件库，可帮助我们快速搭建用户界面，官网为https://vuetifyjs.com/en/ 。
- Spoonacular API ：用于获取食谱数据，需要在https://spoonacular.com/ 注册获取API密钥。
- Pinia ：用于管理应用状态，官网为https://pinia.vuejs.org/ 。
- VueUse ：我们会使用其中的组合式函数来利用浏览器的localStorage，官网为https://vueuse.org/ 。
- 代码仓库 ：相关代码可在https://github.com/PacktPublishing/Building-Real-world-Web-Applications-with-Vue.js-3/tree/main/05.mealplanner 找到。

初始化项目

我们将使用Vuetify安装程序来初始化一个新的Vue项目，在命令行中执行以下操作：
1. 运行命令 npm create vuetify