前端子系统的启动依赖于后端子系统提供的接口服务，因此必须先启动后端子系统，否则程序会给出报错提示。

注意事项

已经设置过阿里云 npm镜像老域名的用户，请务必及时更新到新域名。
https://developer.aliyun.com/mirror/NPM?spm=a2c6h.25603864.0.0.7c303f19XVma3V
image.png

2.1 node 环境安装

Windows7 系统

1.nodejs 官方在v13.14.x系列之后已经不在支持win7系统，理论上很多新的功能win7环境下已经无法使用了，考虑到还有很多开发者在继续使用win7，因此我们花了一些时间适配win7.
2.这里我们通过一些额外的设置，可以在win7继续使用高版本的 nodejs ，只不过步骤稍显麻烦。

  1. //1. 下载nodejs16.2.0  系列，请勿继续使用更高版本，会报错。
  2. // 16.x历史版本：https://nodejs.org/download/release/v16.2.0/
  3. 我们需要下载的版本：https://nodejs.org/download/release/v16.2.0/node-v16.2.0-win-x64.7z
  5. // 2.下载后直接解压在D盘，然后对最外层目录修改名称为：node16，
  6. // 这样整个nodejs的位置为：  D:\node16\  ，特别提醒，必须对下载后的目录改名，因为原始目录存在特殊字符。
  9. //  3.在系统环境变量将   D:\node16\ 加入 path 中
  12. // 4.在系统环境变量新建变量，相关值设置为1：
  13.   NODE_SKIP_PLATFORM_CHECK=1
  15.   // 设置https不校验参数，避免发生证书校验错误
  16.   npm  config set "strict-ssl" false -g
  19. // 5.安装 yarn 包管理工具
  20. npm install  yarn  -g 
  22. // 检测一下 yarn 版本，确保 yarn 安装成功
  23. yarn --version
  25. // yarn设置镜像源为淘宝镜像源，提升依赖包下载速度
  26. yarn config set registry https://registry.npmmirror.com -g 
  27. yarn config set sass_binary_site http://cdn.npmmirror.com/dist/node-sass -g
  29. // 最后，在项目根目录执行以下命令启动
  30. yarn install  //  安装依赖
  33. // 命令执行完毕以后，需要手动在浏览器输入：127.0.0.1:3000
  34. yarn dev  // 启动服务
  36. // 6.以上配置完成才算是环境配置结束后。
  37. // 最后特别提醒一下，如果win7有老版本node js，请卸载。

以上关键步骤截图：
image.png
image.png

image.png

3.最后我们安装依赖包、启动服务
image.png

Windows10、11 系统

1.nodejs 使用最新安装版本，直接下一步安装即可： https://nodejs.org/zh-cn/download/

镜像源设置

配置 npm 避坑参数，防止一些报错发生.

  1.   // 设置https不校验参数，避免发生证书校验错误
  2.   npm  config set "strict-ssl" false -g

2.2 安装依赖与启动本项目

推荐大家使用 yarn 进行包管理、启动项目
如果您使用 yarn进行管理包、运行本项目，这里有一篇关于 yarn语法 比较详细的介绍：

  1. // 首先，安装 yarn 
  2. npm install  yarn  -g 
  4. // 检测一下 yarn 版本，确保 yarn 安装成功
  5. yarn --version
  7. // yarn设置镜像源为淘宝镜像源，提升依赖包下载速度
  8. yarn config set registry https://registry.npmmirror.com -g 
  9. yarn config set sass_binary_site https://cdn.npmmirror.com/binaries/node-sass -g
  11. // 最后，在项目根目录执行以下命令启动项目
  12. // 命令执行完毕以后，需要手动在浏览器输入：127.0.0.1:3000
  13. yarn install  //  安装依赖
  14. yarn dev  // 启动服务
  16. //  避坑指南：
  17. // 如果在安装依赖的过程中出现报错等，基本都是 yarn  install 安装依赖包有问题
  18. // 最主要的原因是网络引起的包安装部分失败情况
  19. // 请删除根目录内的 node_modules ，重新运行  yarn  install 安装依赖即可

前端服务启动效果：
server_start.png

2.3 其他说明

安装本套系统，首次登陆 127.0.0.1:3000 会被弹出登陆，因为有一些依赖vite需要优化，重新登陆即可。
编译、打包后的项目不会出现该问题。
可能大家觉得意外的地方截图如下：
image.png