From a851be3458a0b3c25a482c08d6f3ffb80053058f Mon Sep 17 00:00:00 2001 From: xiaosi <2652281683@qq.com> Date: Mon, 27 Nov 2023 16:48:00 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E5=89=AA=E3=80=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/base.css | 84 --------------------- src/assets/logo.svg | 4 - src/assets/main.css | 35 --------- src/components/HelloWorld.vue | 44 ----------- src/components/TheWelcome.vue | 88 ---------------------- src/components/WelcomeItem.vue | 86 --------------------- src/components/icons/IconCommunity.vue | 7 -- src/components/icons/IconDocumentation.vue | 7 -- src/components/icons/IconEcosystem.vue | 7 -- src/components/icons/IconSupport.vue | 7 -- src/components/icons/IconTooling.vue | 19 ----- src/router/index.js | 29 +++---- src/stores/counter.js | 13 ---- src/stores/index.js | 9 +++ src/stores/modules/exampleStore.js | 20 +++++ src/views/AboutView.vue | 15 ---- src/views/ExampleView/ExampleView.vue | 9 +++ src/views/HomeView.vue | 9 --- 18 files changed, 48 insertions(+), 444 deletions(-) delete mode 100644 src/assets/base.css delete mode 100644 src/assets/logo.svg delete mode 100644 src/assets/main.css delete mode 100644 src/components/HelloWorld.vue delete mode 100644 src/components/TheWelcome.vue delete mode 100644 src/components/WelcomeItem.vue delete mode 100644 src/components/icons/IconCommunity.vue delete mode 100644 src/components/icons/IconDocumentation.vue delete mode 100644 src/components/icons/IconEcosystem.vue delete mode 100644 src/components/icons/IconSupport.vue delete mode 100644 src/components/icons/IconTooling.vue delete mode 100644 src/stores/counter.js create mode 100644 src/stores/index.js create mode 100644 src/stores/modules/exampleStore.js delete mode 100644 src/views/AboutView.vue create mode 100644 src/views/ExampleView/ExampleView.vue delete mode 100644 src/views/HomeView.vue diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index e055f8d..0000000 --- a/src/assets/base.css +++ /dev/null @@ -1,84 +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; - 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 a228bdc..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index 38258c5..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/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 9189bed..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index c4f56a2..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index aa9c3e2..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 36348e2..0000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 0c0fa76..0000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index 0702bbb..0000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 908b94c..0000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 9e82068..0000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/router/index.js b/src/router/index.js index ff8fe9e..d73877e 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,23 +1,14 @@ -import {createRouter, createWebHistory} from 'vue-router' -import HomeView from '../views/HomeView.vue' +import { createRouter, createWebHistory } from 'vue-router'; + +const ExampleView = () => import('@/views/ExampleView/ExampleView.vue'); + +const routes = [ + { path: '/example', name: 'ExampleView', component: ExampleView }, +]; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: HomeView - }, - { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue') - } - ] -}) + routes, +}); -export default router +export default router; diff --git a/src/stores/counter.js b/src/stores/counter.js deleted file mode 100644 index 88e6402..0000000 --- a/src/stores/counter.js +++ /dev/null @@ -1,13 +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/stores/index.js b/src/stores/index.js new file mode 100644 index 0000000..0b0a4ed --- /dev/null +++ b/src/stores/index.js @@ -0,0 +1,9 @@ +/** + * stores + */ +import { createPinia } from 'pinia'; + +const store = createPinia(); + +export default store; +export * from './modules/exampleStore'; diff --git a/src/stores/modules/exampleStore.js b/src/stores/modules/exampleStore.js new file mode 100644 index 0000000..fbcef94 --- /dev/null +++ b/src/stores/modules/exampleStore.js @@ -0,0 +1,20 @@ +import { ref, computed } from 'vue'; +import { defineStore } from 'pinia'; +// 在 Setup Store 中： +// +// ref() 就是 state 属性 +// computed() 就是 getters +// function() 就是 actions +// Setup store 比 Option Store 带来了更多的灵活性，因为你可以在一个 store 内创建侦听器，并自由地使用任何组合式函数。 +export const useExampleStore = defineStore('example', () => { + const count = ref(0); + const doubleCount = computed(() => count.value * 2); + + function increment() { + count.value += 1; + } + + return { count, doubleCount, increment }; +}); + +export default {}; diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index f470365..0000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/views/ExampleView/ExampleView.vue b/src/views/ExampleView/ExampleView.vue new file mode 100644 index 0000000..cce3990 --- /dev/null +++ b/src/views/ExampleView/ExampleView.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue deleted file mode 100644 index ee8e477..0000000 --- a/src/views/HomeView.vue +++ /dev/null @@ -1,9 +0,0 @@ - - -