https://github.com/cycu-ice-pl/website

CYCU ICE PL Test Website， ​PL 可視化是一個基於 Quasar 和 Vue 的應用，用於程式語言(OurScheme, OurC)的可視化和執行追蹤。
https://github.com/cycu-ice-pl/website

giscus interpreter visualization

Last synced: 10 months ago
JSON representation

CYCU ICE PL Test Website， ​PL 可視化是一個基於 Quasar 和 Vue 的應用，用於程式語言(OurScheme, OurC)的可視化和執行追蹤。

• Host: GitHub
• URL: https://github.com/cycu-ice-pl/website
• Owner: CYCU-ICE-PL
• Created: 2024-12-13T13:23:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-21T04:06:18.000Z (11 months ago)
• Last Synced: 2025-05-13T13:16:37.783Z (10 months ago)
• Topics: giscus, interpreter, visualization
• Language: Vue
• Homepage: https://cycu-ice-pl.github.io/website/
• Size: 478 KB
• Stars: 8
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Quasar 應用程式 (quasar-project)

> PL 可視化是一個基於 Quasar 的應用，用於程式語言的可視化和執行追蹤。

[![Build](https://github.com/CYCU-ICE-PL/website/actions/workflows/deploy.yml/badge.svg)](https://github.com/CYCU-ICE-PL/website/actions)

## 🛠️ 開發流程

1. 在 `main` branch 上創建新的分支

2. 在新分支上進行開發

3. 開發完成後，發起 Pull Request

4. 確認無問題後，合併到 `main` branch

5. GitHub Action 會自動構建並部署到 GitHub Pages

   

## 🚀 使用技術（Tech Stack）

![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

![NPM](https://img.shields.io/badge/NPM-CC3534?logo=npm&logoColor=white)

![Quasar](https://img.shields.io/badge/Quasar-1E90FF?logo=quasar&logoColor=white)

![Vue.js](https://img.shields.io/badge/Vue.js-42b883?logo=vue.js&logoColor=white)

![D3.js](https://img.shields.io/badge/D3.js-F9A03C?logo=d3.js&logoColor=black)

![WebSocket](https://img.shields.io/badge/WebSocket-35495E?logo=websocket&logoColor=white)

![GitHub Pages](https://img.shields.io/badge/Deploy-GitHub%20Pages-blue?logo=github)

## 安裝依賴項

```bash

npm install

```

在開發模式下啟動應用程式 (熱代碼重載、錯誤報告等)

```bash

quasar dev

```

在生產模式下構建應用程式 (原則不需要，會交由github action自動構建)

```bash

quasar build

```

## ✨主要功能

- 📊 PL 可視化: 用於程式語言的可視化和執行追蹤

- 🔁 WebSocket 支援: 使用 WebSocket 進行即時通訊

- 📈 D3.js: 使用 D3.js 進行數據可視化