编程导航 - leikooo
下载源码
首先我们需要安装 Git 链接: https://pan.baidu.com/s/1c8w8FPbm-6b7vSS02dSD7w 提取码: 7fz9
下载下来直接无脑下一步即可安装成功，安装成功之后找到一个 非中文、路径没有空格的文件夹右键 （win11 shift + 右键）
输入命令 或者直接 CV 粘贴快捷键是 Ctrl + Ins
git clone https://github.com/liyupi/yu-picture.git
在对应目录可以看到 yu-picture ，下面的截图就是正常下载下来包含的内容
我们使用的是 yu-picture-fronted
如果没有看到 .git 文件应该是默认隐藏起来了 ，跟着下面图片把 隐藏选线取消勾选即可
安装依赖
1、使用 WebStorm 打开（VSCode 也是可以的）
用 WebStorm 打开前端源码
回弹出一个是否相信，选择相信即可
2、找到 Terminal 选项
如果没有看到看这里有没有
还是没有的话找到 Settings -> plugins -> Terminal
3、执行
npm install --force
最后执行效果:
运行前端
找到根目录下的 pakage.json
Run dev 就是正常启动，如果是想要 debug 的话建议先 dev 启动然后找到对应的 url 使用快捷键 Ctrl + Alt + Shift + 点击 url 地址 即可进入 debug 模式
官方文档： https://www.jetbrains.com/help/webstorm/react.html#react_debug_from_tw
启动成功
pakage.json
"scripts": {
"dev": "vite",
"pure-build": "vite build",
"build": "run-p type-check \"build-only {@}\" --",
"openapi": "node openapi.config.js",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint . --fix",
"format": "prettier --write src/"
},
- dev 开发化境启动，会热更新（如果有修改会立刻体现）
- buid 构建模式，会生成 dist 文件方便前端部署
只要是功能正常使用一些 ts 相关的报错就不用管比如这种
修改请求路径
修改 DEV_BASE_URL 就是前端请求后端的路径
本地就使用 localhost 部署到服务器上就修改成 IP 或者域名
- http://localhost:8101
- http://192.122.11.11:8101
- http://leikooo.com:8101 域名相当于平替 IP
- http://leikooo.com 没有端口？别慌
http默认请求80端口只需要在Nginx进行反向代理即可 - https://leikooo.com 和上面的区别？这个是
https安全的连接，默认端口也变成443
打包
要选择 build-only 如果直接使用 build 会爆很多 TS 相关的错误 ❌
build 成功
可以看到出现了 dist 目录
如果没有出现 dist 目录，那么就按照下面进行操作一下，就可以看到了
File -> Reload All from Disk
