开发前期的一些准备【持续更新ing】

本文档部分工具主要适用于react+node开发

---

前期准备——相关前端样式工具

插一个UI设计中的技巧，如果你决定用某个框架写前端eg.react，那么将经常用到antd的插件，则在设计界面的时候可以从antd官网下载库到Axure软件里，这样antd原生样式的控件就触手可得了，而且这样画出来的UI和实际开发出来的页面相似度高，也可以在前期设计的时候更多的了解和选择更合适的控件~

1、按钮悬浮样式

有较多细节话按钮样式

2、数据可视化图表

文档较为齐全、学习成本较低

3、阿里巴巴图标库

大部分图标精美、成套好用，ui（甚至做海报、ppt都可以用）如果是开发可以选择库自带的例如antd里的icon

4、渐变色配色

适合简单网页中的调色搭配，避免纯色过于呆板

5、免费高清图片网站

图片大多独立不成套，适合找少量图片做轮播或者背景用

注意：

（1）参考现成的组件时，文档介绍很重要，需要多渗透官方文档，具体实现可以参考一些实例 （2）一些国外网站可能加载比较慢可以尝试网上找镜像地址，可以快速访问(eg.antd的镜像网址) （3）一个系统的配色最好提前定下基调和重复地方的颜色搭配，写到公共文档里大家方便查阅，例如按钮的大小颜色，一些框内文字开始位置（上下左右间距）可以在ui设计环节就定好统一合理的样式，尽量少地一边开发一边改ui

前期准备——相关前后端问题

1、API参考文档

主要用来参考格式，整洁通俗易懂

2、登录前后端短信验证

开源代码，便于学习，一般用于登录验证信息

前期准备——学习路径

1、react视频学习

提取码：cfdb

2、react组件图片上传

关于antd的上传踩坑

3、慕课平台

学习以下相关章节5-1 5-2 6-1 7-2 8-1

4、node开发b站视频

建议最少看6节，熟悉大致流程 ，可以下载项目代码实践一下（和数据库连接的操作参考例子）

5、10种跨域解决方案（附终极大招）

重点看CORS 后端通常会使用，前端这里使用在 package.json中标注proxy 的方法，参考这里

6、Restful API规范

RESTful 是目前最流行的 API 设计规范，用于 Web 数据接口的设计。

7、ES6

简单了解：React 4-2 加深印象：6-11

前期准备——开发工具（VS Code）

1、开发工具的配置

配置推荐文章一

配置推荐文章二

拓：1、头部注释：koroFileHeader 2、github相关的配置 3、用npm、node等开发也需要一定的安装，可以自行按需搜索一下

主要推荐大家安装一些代码自动补全和自动生成注释的一些功能，自动补全可以提醒代码的编写，可以自动补上一对标签的另一半，可以修改一个标签时自行修改另一半标签等，这些功能都可以提高编写效率。（关于整体颜色看个人习惯，不建议“尝新”，另外送大家一个vscode背景图插件：background-cover，可以给自己vscode设一个自己喜欢的背景）

---

菜鸡学习积累，如果错误欢迎大佬指正