现在是22年7月8日晚上11点，在高强度码代码两天后我决定休息一下，来写一下项目的开发日志。

写项目的动机

虽然仿网易云的项目因为开源的node后端项目而烂大街了，但是这不影响该项目是一个优秀的学习素材这一事实。并且网上大多数的版本都是vue2的，即使是vue3的，也基本上都是那一套从mac端迁移来的。此外，在我写了先前一个vue3项目之后，我深知自己的能力尚有不足，看了两天b站上京东大佬小满zs的教学视频之后，我认为应该把学到的应用到自己的项目中。所以我选择写一个外观同windows客户端几乎一致并且使用尽可能时尚的技术的项目。

技术选型

vue3、typescript、vite2肯定是必备的。这一次会以更严格的要求使用typescript，上个项目中写着写着往js方向发展了，这不对。css我选用了tailwindCSS配合scss构筑，同时在一定程度上辅以Element Plus。虽然这个vue3的框架相当好用，但是我始终坚信不能过度依赖这类框架并且这类框架的弊端也很明显，它的可DIY程度较差。

值得一提的是我在这次项目中首次使用了自动导入的辅助包。在这两天开发中我发现在导入某个模块或者组件的时候，它会动态地去抽取导入的内容。这一过程是很消耗时间的。同时也有一些报错比如组件缺少后缀也是由于它的存在。目前我体会到的唯一好处大概就是可以很方便地使用Element Plus的icon。这方面网上资料比较少，如果感兴趣可以去我项目里看一下用法。当然我不建议用这个插件。

全局状态管理我选择使用pinia来取代以往项目中的vuex。看官方文档说是本来想出vuex5结果发现pinia已经基本实现了他们想要的功能。使用pinia也算是弥补了我上个项目的不足。pinia用起来确实相当方便。

细节方面

这里来描述一些我在写代码时候遇到的问题以及解决方案。

1. 尽早git管理项目

这回上来就把仓库初始化了，避免像之前一样把项目玩坏了修个两三天的悲剧。

2. 项目结构规划

Api请求接口单独成块。在先前观摩的几个项目中，有一部分是这么封装的。我认为让这一部分逻辑独立出来更清晰。

通用样式通过如下方式导入：

// vite.config.ts
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/common/css/base";`
      }
    }
  }
})

在尝试了在main.ts中导入scss文件我发现并不能完全生效。比如从第二层组件开始就无法读取到导入的全局样式中定义的颜色变量等。所以以配置的方式导入。便于后续做换肤功能。

封装一个统一的axios请求格式来处理登录未登录的情况。但是后续开发中发现，网易云的那个接口用不了了。

封装所有的router跳转函数。这么做是为了复用，在上一个项目中我没有这么做，发现很多地方写的都是重复的跳转，也就是指向同一个目标的跳转。这显然是应该复用的。

pinia的store负责请求以及存储所有的数据，并且各个store之间保证逻辑独立。组件只负责在dom生成的时候调用store的action。这么做是为了更好的状态管理。如前文所述，在interfaces文件夹中定义好所有接口，保证在编写代码的时候有提示和校验。

3. 解决获取歌单需要发起多个请求的问题

起因是网易云接口给歌单只能10个10个给，所以需要调整offset发起多次请求才能获得完整歌单。但是for循环里的异步操作会立刻返回（在我关于Promise的笔记中有写）。在解决该问题的时候我没有选择古早的Promise.all的方法，而是使用了for循环语句的await语法糖。

今天就先到这儿，我去写代码了。