ElectronElectron开发仿网易云音乐播放器electron microscope学会了吗，

下栽の地止：https://www.itwangzi.cn/4558.html

简介

freeCodeCamp 是一个在线学习编程的网站，完全免费，使用的是闯关模式，学习完可以立马实战，非常有利与对于知识点的学习和记忆。之前可乐君入门前端也是通过这个项目，还是挺感谢这个平台的。

使用

那么作为初学者应该怎么使用这个平台呢？首先我们要知道怎么进入这个网站，可以通过搜索 freeCodeCamp 找到这个平台，也可以通过 Github 的链接进入平台。通过右上角的 Menu 可以将网页转化为中文。

img

其实学习的类型是不限于前端的，这里主要示例前端，滚动到网站下方可以看到类型，我们选择 javascript 算法和数据结构，会进入到相关的知识点详情页，点击相应的知识点就可以到达学习和编码的区域了，左边是知识点讲解，右边是编程区。正确编写代码点击运行测试，通过之后即可进行下一个知识点的练习。

imgimg

这个项目本月的 star 数为 3,903。

freeCodeCampgithub.com/freeCodeCamp/freeCodeCamp[1]

MockingBird

简介

img

MockingBird 是一个 AI 拟声的工具，他可以 5 秒内克隆你的声音，也就是说只要对着它随便说几句话，它就记录下了你的声音，后面你可以把你的文案准备好，然后用之前克隆好的声音来阅读文案，真的是一个神器呢！

使用

在 Github 下载启动好本地项目之后本地启动，可以看到工具的页面，然后输入文本，并且点击录制，阅读文本完成录制上传。

img

然后启动工具箱，选择数据集，加载录音，选择模型等，具体操作大家可以参照 Github 的说明。

img

项目结构├─archived_untest_files 废弃文件

├─encoder encoder模型

│ ├─data_objects

│ └─saved_models 预训练好的模型

├─samples 样例语音

├─synthesizer synthesizer模型

│ ├─models

│ ├─saved_models 预训练好的模型

│ └─utils 工具类库

├─toolbox 图形化工具箱

├─utils 工具类库

├─vocoder vocoder模型（目前包含hifi-gan、wavrnn）

│ ├─hifigan

│ ├─saved_models 预训练好的模型

│ └─wavernn

└─web

├─api

│ └─Web端接口

├─config

│ └─ Web端配置文件

├─static 前端静态脚本

│ └─js

├─templates 前端模板

└─__init__.py Web端入口文件

这个项目本月的 star 数为 3,810。

MockingBirdgithub.com/babysor/MockingBird[2]

YesPlayMusic

简介

img

YesPlayMusic 是一个颜值比较高的第三方网易云播放器。使用 Vue 全家桶进行开发，对于前端开发来说是一个不错的开源项目。有如下一部分特性：

网易云账号登录（扫码/手机/邮箱登录）支持 MV 播放支持歌词显示支持私人 FM / 每日推荐歌曲支持音乐云盘等等

功能还是挺齐全的，对于入门前端的一些小伙伴来说是个值得研究的项目。

效果

imgimg

这个项目本月的 star 数为 1,673。

关注公众号：前端印象

YesPlayMusicgithub.com/qier222/YesPlayMusic[3]

drawio-desktop

简介

img

drawio-desktop 是一个绘制流程图的工具，使用 electron 进行开发，也就是可以使用 JavaScript 开发 PC 客户端的应用。它既可以用来作为一个开源项目进行研究，也可以当作工具进行使用，一举两得。

img

使用

使用方式比较简单。可以克隆 Github 仓库：

git clone --recursive https://github.com/jgraph/drawio-desktop.git

然后安装依赖并运行即可。

npm install

npm start

这个项目本月的 star 数为 1,228。

drawio-desktopgithub.com/jgraph/drawio-desktop[4]

React

简介

React 应该不用过多介绍，大家都比较熟悉了，它和 Vue 是现在前端开发领域比较受欢迎的两个框架。而这个项目是 typescript-cheatsheets/react，是一个 React + TypeScript 的备忘清单，以下是清单大致内容：

在 React 中安装 Typescript

起步

函数式组件HooksuseStateuseReduceruseEffectuseRef 等

类型

联合类型和类型守卫可选类型枚举类型类型断言等等

示例

函数式组件type AppProps = { message: string;}; const App = ({ message }: AppProps) => <div>{message}<

/div>;

可选类型class MyComponent extends React.Component<{ message?: string;}> { render() {const { message = "default" } = this.props;return <div>{message}<

/div>;

}

}

这个项目本月的 star 数为 1,390。

reactgithub.com/typescript-cheatsheets/react[5]

material-ui

简介

MUI 是一个 React 的 UI 组件库，它可以快速构建出很好看的 React App，使用简单而且有很强的定制化。它被很多家国外大型企业和机构使用，说明还是有很好的使用性的。

img

其实使用组件库最好的方式就是要有完备的文档和丰富的组件，MUI 做到了这一点，它有专门的文档来说明组件的使用。