# DailyTrace **Repository Path**: hacon/daily-trace ## Basic Information - **Project Name**: DailyTrace - **Description**: 日程管理网站 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 3 - **Created**: 2023-05-10 - **Last Updated**: 2024-05-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目概览 > 项目概览看看就好，不要被吓住了。项目管理开始才有需要操作的地方，会给出清晰的操作步骤。 ## 技术栈 + Vue - 网页框架 + SCSS - CSS超集，兼容CSS，提供更多功能。 + Node - 后端服务器 ## 工具 + VS Code - 写前端神级IDE，插件丰富 + Vue cli - 构建工具，主要功能为页面的热重载（类似Live Server）和打包 + ESLint - 代码规范化工具 + Yarn - 包管理工具 # 项目管理 ## 管理工具 + Git - 版本控制系统，用于代码储存和版本控制 + Gitee - 基于Git实现的**国内**在线代码仓库，代替GitHub用于协同开发 ## 准备工作 + 下载[Git](https://gitforwindows.org)，并安装 + 安装完成后打开Git Bash，设置配置用户名和邮箱 + ```bash git config --global user.name "zzz" # 设置用户名为zzz git config --global user.email "zzz@zz.zzz" # 设置邮箱为zzz@zz.zzz ``` + 由于Yarn 包本身问题，在Win11环境下，需要手动允许运行脚本。在管理员模式下打开命令提示符，敲入下面的命令。 + ```bash get-ExecutionPolicy #显示Restricted，表示状态是禁止的; set-ExecutionPolicy RemoteSigned #执行命令修改策略 get-ExecutionPolicy #再执行查询 ``` + 注册[Gitee](https://gitee.com/)账号 ## 协作开发流程（补充） 1. 管理员创建 Gitee 或 GitHub 代码仓库，可以添加成员 2. 项目成员 `Fork` 一份仓库 3. 及时 `Sync Fork`，与主仓库更新同步，即使用`git pull` 4. 确定完成一个 feature 或者修复一个 bug 后，`git fetch + git merge`（相当于 `git push`）到自己的远程分支 5. 该 Gitee 的 Pull requests 页面 `New pull request` 到主仓库分支 6. 大家一起 review 更改内容，确保没问题都知晓后 `merge` 7. 顺序重复 2、3、4、5、6 步使项目逐渐完善 # 项目配置 ## 项目环境 ### Node > > 基础的`JavaScript`运行环境 + 目前使用版本为[Node v18.16.0 LTS](https://nodejs.org/dist/v18.16.0/node-v18.16.0-x64.msi) + 请先一路确认安装Node + ```shell node -v # 查看是否安装成功并查看版本号 ``` ### npm > > npm为Node下的包管理软件 + 在Node安装完成后打开命令提示符，执行以下命令 + ``` shell npm -v # 检查npm是否正常安装 npm config set registry https://registry.npmmirror.com/ # 设置国内镜像源 npm i -g yarn # 全局安装进阶包管理工具 yarn ``` ## VSCode 插件 > 作者习惯使用 VS Code 编写页面代码，下面为 VS Code 的插件配置 ### ESLint > > 提供代码规范检查和自动修改 + ![image-20230425035817153](README.assets/image-20230425035817153.png) + 安装完成后按`Ctrl+Shift+P`输入`setting.json`打开用户配置,并在文件中添加 + ```json { // ... // ... // 保存后自动修复格式来自 ESLint "eslint.format.enable": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 添加vue支持 "eslint.validate": [ "javascript", "javascriptreact", "vue", ], } ``` ### Volar > Vue官方出品，提供`Vue`语言特性，如语法识别、代码格式化 + ![image-20230425035845813](README.assets/image-20230425035845813.png) + 安装完成后在`setting.json`配置文件中添加配置 + ```json { // ... // ... // 将 vue 文件的默认代码格式化工具设为 volar "[vue]": { "editor.defaultFormatter": "Vue.volar" }, } ``` ### Vue 3 Snippets > 提供Vue代码补全 + ![image-20230425040724347](README.assets/image-20230425040724347.png) ### SCSS > 提供Sass(Scss)语言特性 + ![image-20230425040614557](README.assets/image-20230425040614557.png) ### Path Intellisense > 我们知道，`Vue cli`构建工具提供了路径别名的功能。一般会将`@`符号设为`src`目录的别名，这样就不用使用`../`返回上级目录了，所有需要引入的文件都用`@/...`从上至下引入。 > 为了VS Code也能识别路径别名`@`，于是安装本插件 + ![image-20230425035741891](README.assets/image-20230425035741891.png) + 安装完成后在`setting.json`配置文件中添加配置 + ```json { // ... // ... // 关了 js 和 ts 的原生代码路径提示，使用 path intellisense 插件 "typescript.suggest.paths": false, "javascript.suggest.paths": false, "path-intellisense.extensionOnImport": true, "path-intellisense.mappings": { "@": "${workspaceFolder}/src", }, } ``` ### GitLens > VS Code 提供 GitLens 插件将 Git 的功能集成进IDE中。是VS Code用户人手一个的基建项目。 ![image-20230510005444120](README.assets/image-20230510005444120.png) # 项目拉取 > 分为创建分支、拉取项目、提交修改、更新代码及部分。遵循前面提到的[协作开发流程](#协作开发流程（补充）) ## 加入开发者 + 成为[DailyTrace](https://gitee.com/hacon/daily-trace/invite_link?invite=2d023af822c5a9f33364ec2c5bf5cf95683e2ed3c7a1acb7e511b1509403e86ef79e2f0845801c4d5a8eecda7e932207)的协同开发者（可选） ## 创建分支 + 进入已经创建好的项目仓库[DailyTrace](https://gitee.com/hacon/daily-trace) + 点击`Fork`，在自己的仓库中创建一份分支 + ![image-20230510015412780](README.assets/image-20230510015412780.png) ## 拉取项目 + 复制项目的链接 + ![image-20230510020719733](README.assets/image-20230510020719733.png) + 使用VS Code打开存放代码的父文件夹，快捷键`Ctrl+ ~`调出终端，使用下面的命令 + ```bash git clone xxx # 注意这里将 xxx 替换为刚刚复制到的链接 ``` + ![image-20230510021319038](README.assets/image-20230510021319038.png) + 当前是在存放代码的父目录下，我们应该直接打开 `daily-trace`文件夹。 + ![image-20230510022251725](README.assets/image-20230510022251725.png) # 项目运行 + 以项目文件夹作为工作文件夹打开，即直接在VS Code中`打开文件夹`，然后选项目的文件夹。 + `Ctrl+ ~`调出终端。保证路径为项目文件夹下。如下图所示。 + ![image-20230510022851687](README.assets/image-20230510022851687.png) + 在终端里分别敲入下面的命令。先安装包，然后起调试服务器。 + ```shell yarn intall # 安装所有依赖包 yarn serve # 开启调试服务器，在浏览器中输入网址即可实时查看代码效果 ``` + ![image-20230510023712495](README.assets/image-20230510023712495.png) + 如果想要打包发布，即编译成纯**HTML+CSS+JS**，让用户不用安装Node也可以浏览。请使用下面的命令 + ```bash yarn build # 打包到项目的dist目录下 yarn build --report # 打包顺便生成报告，可以玩一玩 ``` # 项目提交 + 先将Hacon的主仓库设为上游仓库，然后将上游仓库最新代码同步到本地 + ```bash git remote add upstream https://gitee.com/hacon/daily-trace.git git fetch upstream # 拉取上游仓库的最新修改文件 git merge upstream/master # 将上游仓库的最新修改合并到本地的master分支 ``` + 可以尝试随便新建一个文本文件夹。然后提交到本地。 + ![image-20230510024033778](README.assets/image-20230510024033778.png) + ![image-20230510024308566](README.assets/image-20230510024308566.png) + 至此，本地提交完成了，目前所有代码都没有上传到云端，接下来可以点击同步更改，将代码提交到云端自己的仓库 + ![image-20230510024733896](README.assets/image-20230510024733896.png) + 然后便可以在自己的云端仓库请求与Hacon主仓库合并了，这个过程叫做`Pull Request` + ![image-20230510150220442](README.assets/image-20230510150220442.png) # 项目简介 ## 主要页面 + 首页Home：图标+产品介绍 [![](https://img.shields.io/badge/Gitee-Starry-green.svg)](https://gitee.com/starryyyyy) + 日历Clander：以日历为主体的日程规划页面（月、周、日） [![](https://img.shields.io/badge/Gitee-Hacon-blue.svg)](https://gitee.com/hacon) + 清单Item：以事件为主题的日程规划页面 [![](https://img.shields.io/badge/Gitee-Hacon-blue.svg)](https://gitee.com/hacon) + 日记Daily：记事、贴图、生成今日打卡图？ [![](https://img.shields.io/badge/Gitee-Starry-green.svg)](https://gitee.com/starryyyyy) + 统计Statistic：统计每天花的时间分布，事件的数量 [![](https://img.shields.io/badge/Gitee-Hacon-blue.svg)](https://gitee.com/hacon)