Skip to content

Arknights-yituliu/frontend-v2-plus

Repository files navigation

明日方舟一图流 网站前端

原域名https://yituliu.site因政策原因已被公安拿下
可通过临时域名:https://ytl.viktorlab.cn访问
也可通过新域名:https://ark.yituliu.cn访问

欢迎加入开发群(QQ)交流讨论:938710832


此项目从前端的 v2 版本 发展而来,保留大部分原有代码时,升级了工具链。在 v2-plus 中,主要用到了以下的库或工具:

  • 工具链:Vite,开发服务器启动快,修改反馈及时。
  • 框架:Vue 3,尽管 Vue 2.7 加入了 Vue 3 的一些新功能,但是仍有一些限制,不如 Vue 3 使用方便。
  • 服务端渲染:vite-plugin-ssr,v2 虽然使用了 Nuxt 2,却没有充分利用 SSR 特性,只将页面中的固定部分在服务端渲染,数据仍然在浏览器中渲染。v2-plus 没有使用 Nuxt 3,转向更为轻量的 vite-plugin-ssr,避免了 Nuxt 的包装与抽象,以降低学习成本、更直观地控制打包过程。
  • 组件库:Element Plus,v2 使用 element-ui,v2-plus 使用 element-plus,减少对原来代码的修改。
  • 图表:Apache ECharts,在攒抽、公招统计页面画图。
  • Polyfill:Polyfill.io,兼容旧版本的浏览器。

运行项目

首先安装 Node.js。项目可以在 16、18 和 20 版本上运行,但推荐的版本是 16,在开发时要避免使用 16 不支持的功能或特性。

git clone https://github.com/Arknights-yituliu/frontend-v2-plus.git
cd frontend-v2-plus
npm install

如果网络环境不佳,可以换用国内的镜像源:

npm config set registry https://registry.npm.taobao.org

开发

npm run dev

然后在浏览器中打开 http://localhost:3000

部署

直接运行

npm run prod

默认运行在 3000 端口上。如果要改变端口,可以添加 PORT 环境变量:

PORT=10000 npm run prod  # 在 10000 端口上运行

使用容器运行

直接运行打包好的镜像:

docker run -d --rm --name v2plus -p 3000:3000  zhaozuohong/yituliu-frontend-v2-plus:latest

或者从本地构建镜像:

docker build . -t v2-plus
docker run -d --rm --name v2plus -p 3000:3000  v2-plus:latest

打包

vite.config.js 中,调用了 rollup-plugin-external-globals。为生产环境打包时,将 vue 与 element-plus 等库排除在产物以外,在渲染网页时,通过 CDN 引入这些库,以减小产物的体积。相关代码

添加了 rollup-plugin-visualizer。运行 npm run buildnpm run prod 时,会在项目的根目录生成 stats.html,有助于直观地分析打包产物。

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published