43、使用Vue.js创建LyricsFinder

使用Vue.js创建LyricsFinder

在开发音乐相关的应用程序时，我们常常需要实现搜索功能来查找艺术家和歌曲，并显示相应的歌词。本文将详细介绍如何使用Vue.js创建一个名为LyricsFinder的应用程序，实现这些功能。

1. 准备工作

在使用 MusicService 进行搜索之前，我们需要将其注入到 Home 视图中。由于已经配置了 InversifyJS ，可以快速完成注入：
1. 打开 src/views/Home.vue 文件，添加以下导入：

import {MusicService} from '@/services';
import {TYPES} from '@/ioc/types';
import {lazyInject} from '@/ioc/config';

2. 在类中创建一个新的服务字段，并使用 @lazyInject 进行装饰：

@lazyInject(TYPES.MUSIC_SERVICE)
private musicService!: MusicService;

3. 修改 mounted 生命周期钩子，验证服务是否正确注入：