diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 80e1c27..0000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,14 +0,0 @@ -/* eslint-env node */ -require('@rushstack/eslint-patch/modern-module-resolution') - -module.exports = { - root: true, - extends: [ - 'plugin:vue/vue3-essential', - 'eslint:recommended', - '@vue/eslint-config-prettier', - ], - parserOptions: { - ecmaVersion: 'latest', - }, -} diff --git a/.gitignore b/.gitignore index 38adffa..a547bf3 100644 --- a/.gitignore +++ b/.gitignore @@ -8,19 +8,15 @@ pnpm-debug.log* lerna-debug.log* node_modules -.DS_Store dist dist-ssr -coverage *.local -/cypress/videos/ -/cypress/screenshots/ - # Editor directories and files .vscode/* !.vscode/extensions.json .idea +.DS_Store *.suo *.ntvs* *.njsproj diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index c3481a7..0000000 --- a/.prettierrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "singleQuote": true, - "semi": false -} \ No newline at end of file diff --git a/README.md b/README.md index 4bf93d7..e62e093 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,7 @@ -# real-world-vue +# Vue 3 + Vite -This template should help get you started developing with Vue 3 in Vite. +This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` - diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 71dc55a..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index bc826fe..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index c133f91..0000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import "./base.css"; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/assets/vue.svg b/src/assets/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue deleted file mode 100644 index 1e75c4d..0000000 --- a/src/components/EventCard.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - - - diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..f5e4f53 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/main.js b/src/main.js index fda1e6e..2425c0f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,12 +1,5 @@ import { createApp } from 'vue' -import { createPinia } from 'pinia' - +import './style.css' import App from './App.vue' -import router from './router' - -const app = createApp(App) - -app.use(createPinia()) -app.use(router) -app.mount('#app') +createApp(App).mount('#app') diff --git a/src/router/index.js b/src/router/index.js deleted file mode 100644 index 3f53b55..0000000 --- a/src/router/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import { createRouter, createWebHistory } from 'vue-router' -import EventListView from '../views/EventListView.vue' -import EventDetailsView from '../views/EventDetailsView.vue' -import AboutView from '../views/AboutView.vue' - -const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'event-list', - component: EventListView, - }, - { - path: '/event/:id', - name: 'event-details', - props: true, - component: EventDetailsView, - }, - { - path: '/about', - name: 'about', - component: AboutView, - }, - ], -}) - -export default router diff --git a/src/services/EventService.js b/src/services/EventService.js deleted file mode 100644 index 38b263a..0000000 --- a/src/services/EventService.js +++ /dev/null @@ -1,19 +0,0 @@ -import axios from 'axios' - -const apiClient = axios.create({ - baseURL: 'https://my-json-server.typicode.com/Code-Pop/Real-World_Vue-3', - withCredentials: false, - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, -}) - -export default { - getEvents() { - return apiClient.get('/events') - }, - getEvent(id) { - return apiClient.get('/events/' + id) - }, -} diff --git a/src/stores/counter.js b/src/stores/counter.js deleted file mode 100644 index b6757ba..0000000 --- a/src/stores/counter.js +++ /dev/null @@ -1,12 +0,0 @@ -import { ref, computed } from 'vue' -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore('counter', () => { - const count = ref(0) - const doubleCount = computed(() => count.value * 2) - function increment() { - count.value++ - } - - return { count, doubleCount, increment } -}) diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..bb131d6 --- /dev/null +++ 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/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index 8c6ca4e..0000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/views/EventDetailsView.vue b/src/views/EventDetailsView.vue deleted file mode 100644 index 7b1d849..0000000 --- a/src/views/EventDetailsView.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/src/views/EventListView.vue b/src/views/EventListView.vue deleted file mode 100644 index 47c18f6..0000000 --- a/src/views/EventListView.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - diff --git a/vite.config.js b/vite.config.js index de5cb31..05c1740 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,14 +1,7 @@ -import { fileURLToPath, URL } from 'node:url' - import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], - resolve: { - alias: { - '@': fileURLToPath(new URL('./src', import.meta.url)) - } - } })