此项目PC端的网页设计参考了旧的UCSD CSSA官网 。但仅仅是样式设计参考了原来的模板，代码基本上都是全部重写。只有部分CSS样式可能复制了旧版的代码。此次重构的目的是为了提高代码的可读性与可维护性， 以及提高网站的性能。同时实现前后端分离与网站模块化，以便于后续的功能扩展与前后端同步开发。
- 使用了Vue 3的组合式API，并启用了响应式语法糖。
- 使用了Vite前端构建工具。
- 在PC端使用了Element Plus组件库。
- 在移动端使用了Vant 3组件库。
JavaScript相关代码中的变量命名应使用驼峰命名法(camelCase)。- 组件在
JavaScript中引用是应使用帕斯卡命名法(PascalCase)。例如MobileHome，组件export中的名称也应为同样格式。 - 组件在页面中使用和文件名本身的命名应用短横线命名法(
kebab-case)，例如mobile-home，以提高可读性。 - 其他文件命名尽量使用蛇形命名法(
snake_case)以提高可读性。 - 手机相关页面与组件命名应由
mobile开头，例如mobile-home.vue。 - 详情可参考Vue.js命名风格指南（易记） 与史上最全 Vue 前端代码风格指南。
- 在
HTML、CSS和Less代码里，除个别属性如border-radius可以使用px外，其他尺寸单位都应尽可能使用vw作为单位。 .vue文件中的style部分应尽量使用Less语法编写，以提高可读性。- 用不到的引用(import)语句应该删除。
在克隆项目后，需要在项目src目录下新建classified.js文件，内容如下：
export const classified = {
backendAddress: "更换为后端地址，例如如果在本地跑，就写'http://127.0.0.1:{flask服务端口号}'。如果在服务器跑就写'https://api.ucsd.com'。"
}然后需要在项目根目录下运行npm install安装依赖。
使用npm run dev启动项目。
可以使用npm run build打包构建项目。打包后的文件在dist目录下。
- 代码提交前需要先在本地运行一遍，确保没有报错。
- 每次提交都应使用
gitmoji，即一个表情加更新的内容概述。 - 表情的挑选需要依照gitmoji官网。选择最符合每次提交内容的表情，例如 “:rocket: 部署了课友群功能。”。注意表情与文字之间有一个空格，而且必须以句号结尾。建议多次小量的提交代码更改，尽量避免一次更新过多代码。
- 首先确保更改都已经发布到
GitHub上。 - 打开网站的宝塔面板，在左侧侧边栏中找到“文件”页面并打开。然后打开网站目录：
/www/wwwroot/ucsdcssa-website-vue。 - 点击上方的终端，并在终端中运行
git pull按回车，然后根据提示输入相关用户名与密码或口令。 git抓取成功后，在左侧侧边栏中选中“网站”页面，并在上方选中“Node项目”。- 找到项目
ucsdcssa_website_vue并点击服务状态列的||未启动以启动项目。 - 点击后，
Node会构建项目并更新项目根目录下的dist文件夹。 - 刷新网页，如果项目状态回到
||未启动时，则表示更新完成。
Q：照着步骤更新了，但是网站没有变化。
A：这可能是因为根目录下的dist文件夹中原有的内容没有被覆盖。可以把dist
文件夹删除，然后从维护指南的第4步开始操作至结束。操作完成后，项目根目录中会重新出现dist文件夹。
因为有些同学代码是和其搭档一起完成的，所以GitHub提交记录中可能看不到他们的贡献。因此，这里列出了所有参与项目的同学，以及他们的贡献。
排序是按照页面设计时，页面与页面板块出现的先后顺序排列的。
- 例如主页先于部门页面设计，因此主页的贡献者排在了部门页面的贡献者前面。
- 同时因为主页页眉板块出现在头图板块的上方，因此主页页眉板块的贡献者排在了头图板块的贡献者前面。
如果两人共同参与了一个板块的设计，那么项目贡献者表格中会按照姓名字母顺序排列。
| 姓名 | 个人邮箱 | UCSD邮箱 | 项目贡献 |
|---|---|---|---|
| 吴俊霖 | [email protected] | [email protected] | 项目搭建者，同时制定了项目规范。构建了项目以及确认了项目所使用的依赖包等。设计了路由路径。负责了PC端的页面框架搭建。同时也负责整合PC端其他人的代码，修改bug、调整样式与代码风格等。还负责了移动端页面搭建、设计与实现。同时通过实现了前端动态获取后端数据，从而将前端与后端结合到了一起。具体贡献可查询GitHub提交历史。 |
| 舒欣 | [email protected] | [email protected] | 负责了PC端页眉板块(the-header.vue)的HTML、样式与部分JavaScript代码。 |
| 陈嵲淏 | [email protected] | [email protected] | 负责了PC端主页头图板块(home-headline.vue)的HTML、样式与部分JavaScript代码。 |
| 陈子轩 | [email protected] | [email protected] | 负责了PC端主页头图板块(home-headline.vue)的HTML、样式与部分JavaScript代码。 |
| 蒋澜 | [email protected] | [email protected] | 负责了PC端主页社团介绍板块(home-intro.vue)的HTML、样式与部分JavaScript代码。 |
| 鈕臻真 | [email protected] | [email protected] | 负责了PC端主页社团介绍板块(home-intro.vue)的HTML、样式与部分JavaScript代码。 |
| 李昱增 | [email protected] | [email protected] | 负责了PC端主页文章板块(home-articles.vue与home-article-tab.vue)部分的HTML、样式与部分JavaScript代码。 |
| 吴不为 | [email protected] | [email protected] | 负责了PC端主页文章板块(home-articles.vue与home-article-tab.vue)部分的HTML、样式与部分JavaScript代码。 |
| 谷悦萌 | [email protected] | [email protected] | 负责了PC端主页问答板块(home-faq.vue)的HTML、样式与部分JavaScript代码。 |
| 舒畅 | [email protected] | [email protected] | 负责了PC端页尾板块(the-footer.vue)的HTML、样式与部分JavaScript代码。 |
| 曾亦嘉 | [email protected] | [email protected] | 负责了PC端页尾板块(the-footer.vue)的HTML、样式与部分JavaScript代码。 |
| 陈佳钰 | [email protected] | [email protected] | 负责了PC端部门页面的面包屑导航板块(department-breadcrumb.vue)、部门介绍板块(department-intro.vue)和部门成员板块(department-members.vue与department-tab.vue)的HTML、样式与部分JavaScript代码。 |
| 王晓玥 | [email protected] | [email protected] | 负责了PC端部门页面的面包屑导航板块(department-breadcrumb.vue)、部门介绍板块(department-intro.vue)和部门成员板块(department-members.vue与department-tab.vue)的HTML、样式与部分JavaScript代码。 |