bowbowww/SOSDfe_dev

Fork 0

forked from SOSD/SOSDfe_dev

Files

minskiter 30fb2533e3 feat(routers): update routers and vuex

2024-03-29 15:06:16 +08:00

5.8 KiB

Raw Blame History

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将会在你自己的空间下创建一个跟本项目同名的项目，你的项目你做主）
GITHUB上在你FORK的项目设置中邀请你的小伙伴一起加入开发，并设置小伙伴的权限为Maintainer。
克隆（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

关于项目

本项目由福州大学服务外包创新创业实验室独家赞助。

5.8 KiB Raw Blame History Unescape Escape