feat(project): update readme.md

2024-03-29 13:41:51 +08:00
commit 5e7a3dc913
18 changed files with 871 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,172 @@
+# SOSD 前端开发测试项目
+
+## WINDOW开发指南
+
+哈喽，各位小伙伴们，大家好。本节主要介绍如何在Window环境下搭建前端需要的开发软件：
+
+### 宇宙最好用的编辑器
+
+首先你需要安装目前最流行的VSCode编辑器（当然如果你是Sublime Text选手也是可以自行探索，此外我们不推荐使用WebStorm这类重量级选手），其下载地址为：
+https://code.visualstudio.com/
+按照安装包的指示进行安装，这里推荐安装过程中`将code命令加入到PATH`这个选项钩上～
+
+### 安装NodeJS版本控制工具
+
+在日常的开发环境，我们主要使用的是NodeJS16、18这两个版本，因此我们需要一个NODEJS版本控制工具。在Linux或者Mac环境下我们可以选择
+```bash
+npm install -g n
+```
+但遗憾的是，window环境下并没有此工具包。
+因此，在Window下我们推荐使用nvm管理工具：
+打开https://github.com/coreybutler/nvm-windows网页，点击右侧的Releases
+![alt text](docs/image.png)  
+在对应版本下的Assets文件中选择nvm-setup.exe并下载。当下载完成后按照安装指示进行安装即可。
+
+### 安装Node18
+
+本项目采用了最新的Vite以及Vue2.7版本，Vite项目需要在Node18+以上的版本进行运行，因此我们需要先安装一个node18。
+```bash
+nvm install 18
+```
+当执行这段命令后会提示我们使用命令：
+```bash
+nvm use 18
+```
+来切换到node18版本
+
+### 安装包管理工具
+
+vite官方使用的是pnpm包管理，但由于本项目采用的是yarn包管理，并且有对应的yarn.lock文件，因此在开发本项目时仍需要下载yarn v1版本。
+https://classic.yarnpkg.com/en/docs/install
+按照官方经典版的文档使用
+```bash
+npm install --global yarn
+```
+执行此命令后将会安装yarn到全局的node_modules中（全局node_modules会保存在用户目录下）
+
+### 下载本项目的源码
+
+1. 首先你需要安装git这个版本控制软件（注意git是版本控制客户端软件、而github只是git的一个服务端网站，两者并不相同）   
+
+    官方网站：https://git-scm.com/
+    下载对应的软件即可（如果下载过慢，可以考虑使用科学兴国上网工具）
+
+2. GITHUB上FORK本项目（FORK将会在你自己的空间下创建一个跟本项目同名的项目，你的项目你做主）
+
+3. GITHUB上在你FORK的项目设置中邀请你的小伙伴一起加入开发，并设置小伙伴的权限为Maintainer。  
+![alt text](docs/image2.png)  
+
+4. 克隆（clone）你FORK的项目到本地中：  
+    ```bash
+    git clone {你的项目}
+    ```  
+    {你的项目}替换成你FORK项目github地址，请勿CLONE本项目！格式类似于这样的：https://github.com/Fuzhou-U-ACM-SOSD/SOSDfe_dev.git
+
+## 项目开发
+
+本节将介绍如何进行前端开发：
+1. 首先进入到项目所在的📁，并执行下述命令：
+    ```bash
+    code SOSDfe_dev
+    ```
+    该命令将会用VSCode打开本项目
+
+2. 根据提示安装好Vue的插件Volar
+
+3. 安装依赖
+    ```bash
+    yarn
+    ```
+    该命令执行后，此时项目下将会存在一个node_modules文件夹
+
+4. 观察项目的package.json
+    该文件将会包含项目的所有依赖信息以及脚本信息，其中项目的脚本都在scripts这个属性中
+    ```json
+    {
+        "scripts": {
+            "dev": "vite",
+            "build": "vite build",
+            "preview": "vite preview"
+        },
+    }
+    ```
+
+5. 启动调试服务器
+    ```bash
+    yarn dev
+    ```
+
+6. 🎉恭喜你成功地运行了本项目
+
+## 项目的结构介绍
+
+本节将主要介绍项目的结构：  
+项目的主要源码在📁`src`中，主要包括`assets`/`views`/`styles`/`components`/`routes`/`stores`  
+`views`放着页面，一个页面对应该文件夹下的一个文件；  
+`components`中放着`views`中使用到的组件，所有组件都放在这里，并和`views`中的路径一一对应；  
+`styles`放着全局的样式；  
+`assets`放着需要在代码中调用的静态资源；  
+`routes`放着路由信息； 
+`stores`放着全局存储信息。
+
+## 部署该项目（以下操作请确保在实验室网络下执行）
+
+本节中你需要安装好Docker Client端并已配置好了远程Context上下文。
+
+1. 构建本项目的生产代码
+    ```bash
+    yarn build
+    ```
+    执行命令后如果没有任何错误，则本项目下会有个dist文件夹
+
+2. 修改docker-compose.yml中的PORT
+    ```yaml
+    "8081:80"
+    ```
+    将8081修改为你要开放的端口，你可以通过使用`docker ps`命令查看服务端已有的服务的端口，将该端口设置为与服务端应用都不冲突的端口即可，通常设置的范围是8000-8999
+
+3. 执行不是
+    ```bash
+    docker compose up -d --build
+    ```
+    如果命令执行失败可以尝试
+    ```bash
+    docker-compose up -d --build
+    ```
+
+4. 访问测试服务器网站
+    http://59.77.134.42:{port}
+
+## 代码提交注释规范
+
+我们推荐使用https://github.com/commitizen/cz-cli 注释提示工具以规范git的注释；  
+在任务的分配上，请勿多人同时开发一个模块，同时请确保当天的代码当天提交。
+
+## 提问的艺术
+
+如果对本项目有任何疑问，可以在群里中进行提问，但提问之前你应该确保：
+1. 使用Google搜索过，但是没有找到对应的解决方案；
+2. 在Stackoverflow搜索过，但没有解决；
+3. 使用ChatGPT咨询过，但没有解决；
+4. 查阅官方文档，没有相应的解决方案。
+
+提问应满足：问题所在截图 + 如何复现这个问题。
+
+## 游乐场
+
+到此你已经掌握了项目的开发的入门了。  
+五星上将迈克阿瑟曾经评价过：“尤雨溪根本不懂Vue”。更多玩法就需要小伙伴自行探索了。
+https://www.zhihu.com/question/559867952/answer/2893173212
+
+## 关于项目
+
+本项目由福州大学服务外包创新创业实验室独家赞助。
+
+
+
+
+
+
+
+
+