Set up Vue

yunaimatsu · Feb 1, 2025 · 3834a33 · 3834a33
1 parent 9de95b1
commit 3834a33
Show file tree

Hide file tree

Showing 17 changed files with 319 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/README.md b/README.md
@@ -1,50 +1,5 @@
-# syllabus
+# Vue 3 + Vite
 
-## Requirements
-### 1. ダッシュボード
-- 知識のインプット
-- 問題の投稿
-    - 問題の誤り等へのFB
-- 知識のアウトプット(正誤判定)
-### 2. 問題投稿画面
-#### 一問一答
-- 問題文と解答を入力する
-#### コード
-- インプットとアウトプットのペアを作成
-### 3. 問題演習画面
-- 問題文
-- FB(誤り指摘)入力ボタン
-- 解答入力
-- 飛ばした問題を後からやる
-- 飛ばす
-- 解答をやめる
-- 最初からやり直す
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-※プロダクトに関する科目は対象外。
-
-## Tech Stuck
-### フロント
-- Vue.js
-- TypeScript 
-
-### バック
-- Goサーバを立てる
-- 皆のポストのデータ
-- ユーザ
-- InputとOutputの正誤表のデータ
-
-### 認証
-- OAuth
-
-### ホスティング
-- Vercel
-
-### CI/CD
-- CircleCI
-
-## Schedule 
-> 「個人アジャイル開発」のようなものをしようと考えています。
-
-- `App.vue`やレイアウトだけ作って(コンテンツなしで)デプロイ(1/26✘→1/31)
-- フロント/MBの初級のインプット資料を作成・デプロイ(1/31✘→2/8)
-- AtCoderやLeetCodeがどのようにACを出しているのか調べ、実装(2/28)
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "syllabus-front",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.11"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,30 @@
+<script setup>
+import Header from './components/Header.vue';
+import SearchBtn from './components/SearchBtn.vue';
+</script>
+
+<template>
+  <Header></Header>
+  <div>
+    <h1>シラバス</h1>
+  </div>
+  <SearchBtn />
+</template>
+
+<style scoped>
+body {
+  margin-top: 9em;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -0,0 +1,6 @@
+<template>
+    <footer>
+    </footer>
+</template>
+<style>
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -0,0 +1,55 @@
+<template>
+    <header>
+        <a href="/"><h1>daX syllabus</h1></a>
+        <nav>
+            <a href="/a"><h2>About</h2></a>
+            <a href="/b"><h2>Blog</h2></a>
+            <a href="/c"><h2>Contact</h2></a>
+        </nav>
+    </header>
+</template>
+<style>
+    header {
+        /* そもそもの位置の確定 */
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        /* height: var(--header-height); */
+        height: 9em;
+
+        /* Design */
+        /* background-color: var(--bg-color-l); */
+        background-color: #333;
+        
+        /* Flexbox properties */
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: space-between;
+        
+        /* color: var(--font-color-l); */
+        color: #000;
+
+        /* Border */
+        /* border-bottom: var(--border-color) 1px solid; */
+
+        /* padding-right: var(--side-space); */
+        padding-right: 4em;
+        /* padding-left: var(--side-space); */
+        padding-left: 4em;
+    }
+
+    nav {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        justify-content: space-between;
+        column-gap: 1em;
+    }
+
+    a {
+		text-decoration: none;
+	}
+</style>
diff --git a/src/components/SearchBtn.vue b/src/components/SearchBtn.vue
@@ -0,0 +1,35 @@
+<template>
+    <button class="search-button" @mouseover="hover = true" @mouseleave="hover = false">
+      検索
+    </button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hover: false,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.search-button {
+  width: 200px;
+  height: 100px;
+  font-size: 48px;
+  font-weight: bold;
+  color: #0077a9;
+  background-color: #cceeff;
+  border: none;
+  border-radius: 20px;
+  transition: background-color 0.3s, color 0.3s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.search-button:hover {
+  background-color: #ffeb66; /* ホバー時の黄色 */
+  color: #0077a9; /* テキストの色 */
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router';
+
+createApp(App).mount('#app')
+const app = createApp(App);
+
+app.use(router); // Use the router
+app.mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,25 @@
+// src/router/index.js
+
+import { createRouter, createWebHistory } from 'vue-router';
+// import HomeView from '../views/HomeView.vue';
+import AboutView from '../views/AboutView.vue';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    // component: HomeView,
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // component: AboutView,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/src/web/html-css.vue b/src/web/html-css.vue
@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <h1>HTML/CSS</h1>
+        <p>HTML/CSSの基本的な使い方を学びます。</p>
+    </div>
+</template>
+<style>
+</style>
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})