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