小组项目前端经验
不断更新中，想到一点写一点
为何你需要好的前端
叠甲：我并非专业写前端的。内容基于小组作业的体验，为和我一样不专攻前端但希望能有一个不俗界面的同学给出一些实践建议
在南软的一众需要写前后端的项目中，前端不可不谓重要。khy 曾在软工三课上强调：大家要多花时间去考虑最终展示的质量。诚然，大家过多地关注于看不到的后端实现上了，前端以及展示这种定下得分基调的基本盘却少有人注意。
期末往往是这样的情况：后端花了很多精力，然而前端仍旧是软工二经典 element-ui 的 card 套 card，无人在意 css 样式、字体、排版等等。更不要说界面背景还是一张花里胡哨的二次元老婆了。最终遗憾获得一个平均分退场。
在小组作业中水得一个好的前端有三大要素：工具链、灵感和 AI。
实用工具
包管理器
推荐使用 pnpm 而不是 npm。二者命令基本相同，但是前者使用了链接的方式来管理包，存储占用更小。
Vue3 ts
响应式前端框架。这是软工二课程指定的框架，也是第一次接触前端的起点。
- 推荐使用 ts 而不是 js，类型安全和类型补全很重要
- 一定要保证类型安全，不要写满屏爆红的代码
- 了解一下 ts 的异步函数
- ts 有着很强的函数式风格，大部分情况下偏向于使用匿名函数（lambda 函数）
- 强烈建议写之前过一遍 vue 的文档，内容不多但是都是干货。大部分内容对写小组作业的前端都有帮助
组件库
组件库把一些常见的设计元素封装成了组件，有着预制好的样式和逻辑。
功能性（组件代码逻辑）上，各家都做得相当不错。
这一套工具链其实已经相对好用了。默认样式这一块就见仁见智。我认为总体做的不错的组件库有：
- Element ui：上限一般，但是下限是真低……不过功能性和易用性很强。使用建议是尽量少堆 Card，否则真的很难看
- Bootstrap：老牌经典样式，基本是 google 的风格。但是文档比较难啃
- Primevue：最近发现的一个很不错的组件库，自定义程度很高，功能性也足够
虽然用组件库狂堆组件很爽，但写出来的样子真的难以恭维……建议非必要不要使用组件库，很多组件（比如按钮）手搓也很方便，而且能够确保风格统一。
- pnpm：和 npm 基本一样的包管理器。但
- pinia：状态管理库。可以理解为可以创建一个全局的单例模式的对象，里面可以存储任意成员、方法，以实现全局的共享和状态控制。用这个可以省去一些路由传参的麻烦，也可以将一部分共享的逻辑从 script 中解耦出来。
- tailwind css：一个 css 框架。能将你从写 css 的繁琐工作中解放出来，谁用谁说好。
灵感
借鉴
软院课程项目要求做的东西，在市面上都能找到重合度百分之一百甚至九十的竞品。设计不来难道还抄不来吗？
前端人的事，那能叫抄袭吗。所谓好的设计总是心有灵犀云云，不过是灵感的借鉴罢了。不过认真的，借鉴也是一大难事。我的一个建议是尽量先只做主要的元素（和业务流程强相关的），一些细枝末节的可以先放一边。
设计
总有找不到的竞品或者难以借鉴的场景。如果要自己设计界面，一大核心要义是奥卡姆剃刀——如无必要，勿增实体。
在设计实践中的体现为简约的风格。除此之外，我个人对页面风格的偏好为：
- 界面的骨架用简单的浅色线条勾勒。界面主要的分区用线条而不是 card，视觉负担比较小而且写起来很省事
- 界面背景使用几何进行构图。这不是必要的，有时纯色背景会更好看。
- 界面元素为扁平风格。去除装饰性元素，强调简洁、功能性。直观要素为无阴影、纯色块、图标简化。
Best practice
- 谨慎使用阴影。阴影是增加层次感的工具。
- 善用光标 hover 动画。
- 如有必要，可以让界面的元素动起来，而不是像一个静态网页一样。
- 借鉴，借鉴，还是 xxx 借鉴！
资源推荐
取色
Color Palette Generator - ColorDrop
背景
Svg Wave - A free & beautiful gradient SVG wave Generator.
Pattern Monster - SVG Pattern Generator
图片素材
免费正版高清图片素材库 超过5.4百万张优质图片和视频素材可供免费使用和下载 - Pixabay
icon
Emoji