ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 一、从零开始配置前端开发环境 1、下载VSCode及安装; ![](https://img.kancloud.cn/8f/46/8f462fdfeb40605936a93c83157884e5_1334x648.png) ![](https://img.kancloud.cn/e4/f1/e4f1d472f6d9b5914df3b1857b78171f_612x471.png) ![](https://img.kancloud.cn/35/0f/350f49873219c614ced931a0078030a6_612x471.png) 安装vetur和prettier插件; 参考:[开发工具/前端调试/VSCode/安装](../../%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/%E5%89%8D%E7%AB%AF%E8%B0%83%E8%AF%95/VSCode/%E5%AE%89%E8%A3%85.md) 2、安装nodejs、vue-cli、webpack及ESLint; [nodejs安装](../../%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/Node.js/%E5%AE%89%E8%A3%85.md) [vueCli安装](../../%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/vueCli/%E5%AE%89%E8%A3%85.md) [webpack安装](../../%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7/webpack/%E5%AE%89%E8%A3%85.md) [ESLint安装](../../%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/%E5%BC%80%E5%8F%91%E6%B5%8B%E8%AF%95/ESLint.md) 3、安装git; [git安装](../%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/git.md) 4、导入git工程 新建一个空的工程目录,放到vscode的工作区根目录下: 然后参考: [快速开始一个工程](../../%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/%E5%89%8D%E7%AB%AF%E8%B0%83%E8%AF%95/VSCode/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B.md) 5、与github工程关联; 工程建好后,内容是空的,打开工程后,打开终端,拉取工程代码; ``` 如:git clone https://github.com/4170804/rayfront ``` ![](https://img.kancloud.cn/4e/17/4e177dc178e2b33cc5f8c862b00d0b13_1059x238.png) ![](https://img.kancloud.cn/c4/77/c477969a56ce47488a4fe3b204fa27d7_1024x392.png) 安装依赖库: ``` npm install ``` ![](https://img.kancloud.cn/64/04/6404164ef49bb0c07d5fa707b86cbac0_1045x424.png) 运行: ``` npm run serve ``` ![](https://img.kancloud.cn/1f/21/1f21996c33d27ffb7128423bdee119e6_1060x443.png) ![](https://img.kancloud.cn/17/08/1708039b81bd6f0631da45ff3dbc2ef1_1366x665.png) 即可启动运行了,到这里,全部前端开发环境完整的走完了; ## 二、从零开始配置后端开发环境 1、下载eclipse及jdk开发包; ![](https://img.kancloud.cn/81/a9/81a9f7c31c02a8cb2ec71f45191ed624_1242x314.png) ![](https://img.kancloud.cn/e9/49/e949a7652e1d0c4faafaa7ddf056b2f3_893x510.png) 2、解压文件包,配置好环境之后,下载工程文件,新建工程: ![](https://img.kancloud.cn/8b/72/8b72126615ec8ab68d66c4305c56803c_1366x736.png) ![](https://img.kancloud.cn/1b/b0/1bb0196a357bd7ed81d6f31cd97fbe1c_525x550.png) ![](https://img.kancloud.cn/9b/d2/9bd2fa82849508e93de85d7cc9171672_653x646.png) ![](https://img.kancloud.cn/6e/16/6e16c67981c33e39795ceec2359b1a51_683x480.png) ![](https://img.kancloud.cn/41/f2/41f20ecc9639457b1745f77ff309eaec_653x646.png) ![](https://img.kancloud.cn/37/3d/373dbc2c87e1c3a954188596cba12886_1366x736.png) 到这里,工程就完成了搭建了,接着,它会自动下载依赖库到本地; ![](https://img.kancloud.cn/98/20/98201217a54abf7ab157a05cfc3c6cad_1366x736.png) 下载完毕,就可以开始干活了; ![](https://img.kancloud.cn/bf/07/bf07841b07c5117eab3d0ec5bc6d628a_1366x736.png) 3、配置开发环境; 包括格式化等; 参考:[项目实战/后端开发/从零开始开发/开发环境搭建](../%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%BC%80%E5%8F%91/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md)