42、使用 Vue.js 创建 LyricsFinder

使用 Vue.js 创建 LyricsFinder

1. 项目概述

在构建 LyricsFinder 应用程序时，我们将使用 Vue.js 框架，并结合 TypeScript 进行开发。为了处理视图之间的导航，我们会使用 Vue Router 库。同时，我们还会使用 InversifyJS 进行依赖注入，以及 RxJS 和 Axios 来处理异步操作和 HTTP 请求。

2. 项目搭建

2.1 创建项目

我们已经为项目准备了一个骨架，你可以在指定位置找到它。按照以下步骤进行操作：
1. 将指定文件夹复制到你的工作区。
2. 使用 npm install 安装项目依赖。
3. 在项目根目录执行 npm test 验证一切是否正常，所有测试应该通过。

2.2 启动开发服务器

在项目根目录执行 npm run serve 启动服务器，查看控制台获取服务器监听的端口号。

2.3 项目结构和约定

为了便于定位元素，我们需要合理组织代码。以下是项目 src 文件夹的结构：

├── api-key.ts     # 存放 MusixMatch 的 API 密钥
├── App.vue        # 应用程序的根组件
├── main.ts        # 入口点
├── assets/        # 图片、字体等
├── compone