forked from SOSD/SOSDfe_dev
173 lines
5.8 KiB
Markdown
173 lines
5.8 KiB
Markdown
# 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
|
||
|
||
在对应版本下的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。
|
||
|
||
|
||
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
|
||
|
||
## 关于项目
|
||
|
||
本项目由福州大学服务外包创新创业实验室独家赞助。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|