Skip to content

Commit 6fabade

Browse files
haoqunjianghaoqunjiang
committed
chore: simplify the folder structure of default templates
1 parent 5bce07e commit 6fabade

File tree

22 files changed

+196
-814
lines changed

22 files changed

+196
-814
lines changed

‎template/code/default/src/App.vue

Lines changed: 2 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
<script setup>
22
import HelloWorld from './components/HelloWorld.vue'
3-
import IntroductionItem from './components/IntroductionItem.vue'
4-
import ColorSchemeSwitch from './components/ColorSchemeSwitch.vue'
5-
6-
import DocumentationIcon from './components/icons/IconDocumentation.vue'
7-
import ToolingIcon from './components/icons/IconTooling.vue'
8-
import EcosystemIcon from './components/icons/IconEcosystem.vue'
9-
import CommunityIcon from './components/icons/IconCommunity.vue'
10-
import SupportIcon from './components/icons/IconSupport.vue'
3+
import Welcome from './components/Welcome.vue'
114
</script>
125

136
<template>
@@ -16,85 +9,11 @@ import SupportIcon from './components/icons/IconSupport.vue'
169

1710
<div class="wrapper">
1811
<HelloWorld msg="You did it!" />
19-
<ColorSchemeSwitch />
2012
</div>
2113
</header>
2214

2315
<main>
24-
<IntroductionItem>
25-
<template #icon>
26-
<DocumentationIcon />
27-
</template>
28-
<template #heading>Documentation</template>
29-
30-
Widely regarded as one of the best, Vue’s
31-
<a target="_blank" href="https://v3.vuejs.org/">official documentation</a>
32-
will provide you with all information you need to get started. Whether you’re already a Vue
33-
veteran or just trying the framework out, great chances are you’ll find the answer to your
34-
next question there.
35-
</IntroductionItem>
36-
37-
<IntroductionItem>
38-
<template #icon>
39-
<ToolingIcon />
40-
</template>
41-
<template #heading>Tooling</template>
42-
43-
This project is served and bundled with
44-
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
45-
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
46-
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to
47-
test your components and web pages, check out
48-
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
49-
<a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
50-
>Cypress Component Testing</a
51-
>.
52-
53-
<br />
54-
55-
More instructions are available in <code>README.md</code>.
56-
</IntroductionItem>
57-
58-
<IntroductionItem>
59-
<template #icon>
60-
<EcosystemIcon />
61-
</template>
62-
<template #heading>Ecosystem</template>
63-
64-
Get official tools and libraries for your project:
65-
<a target="_blank" href="https://next.vuex.vuejs.org/">Vuex</a>,
66-
<a target="_blank" href="https://next.router.vuejs.org/">Vue Router</a>,
67-
<a target="_blank" href="https://next.vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
68-
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need
69-
more resources, we suggest paying
70-
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
71-
a visit.
72-
</IntroductionItem>
73-
74-
<IntroductionItem>
75-
<template #icon>
76-
<CommunityIcon />
77-
</template>
78-
<template #heading>Community</template>
79-
80-
Got stuck? Ask your question on
81-
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
82-
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
83-
You should also subscribe to
84-
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> for latest news in the
85-
Vue world.
86-
</IntroductionItem>
87-
88-
<IntroductionItem>
89-
<template #icon>
90-
<SupportIcon />
91-
</template>
92-
<template #heading>Support Vue</template>
93-
94-
As an independent project, Vue relies on community backing for its sustainability. You can
95-
help us by
96-
<a target="_blank" href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
97-
</IntroductionItem>
16+
<Welcome />
9817
</main>
9918
</template>
10019

‎template/code/default/src/assets/base.css

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
1414
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15-
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
15+
--vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65);
1616
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
1717

1818
--vt-c-text-light-1: var(--vt-c-indigo);
@@ -36,16 +36,18 @@
3636
--section-gap: 160px;
3737
}
3838

39-
[data-color-scheme='dark'] {
40-
--color-background: var(--vt-c-black);
41-
--color-background-soft: var(--vt-c-black-soft);
42-
--color-background-mute: var(--vt-c-black-mute);
39+
@media (prefers-color-scheme: dark) {
40+
:root {
41+
--color-background: var(--vt-c-black);
42+
--color-background-soft: var(--vt-c-black-soft);
43+
--color-background-mute: var(--vt-c-black-mute);
4344

44-
--color-border: var(--vt-c-divider-dark-2);
45-
--color-border-hover: var(--vt-c-divider-dark-1);
45+
--color-border: var(--vt-c-divider-dark-2);
46+
--color-border-hover: var(--vt-c-divider-dark-1);
4647

47-
--color-heading: var(--vt-c-text-dark-1);
48-
--color-text: var(--vt-c-text-dark-2);
48+
--color-heading: var(--vt-c-text-dark-1);
49+
--color-text: var(--vt-c-text-dark-2);
50+
}
4951
}
5052

5153
*,

‎template/code/default/src/components/ColorSchemeSwitch.vue

Lines changed: 0 additions & 137 deletions
This file was deleted.

‎template/code/default/src/components/Welcome.vue

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<script setup>
2+
import WelcomeItem from './WelcomeItem.vue'
3+
import DocumentationIcon from './icons/IconDocumentation.vue'
4+
import ToolingIcon from './icons/IconTooling.vue'
5+
import EcosystemIcon from './icons/IconEcosystem.vue'
6+
import CommunityIcon from './icons/IconCommunity.vue'
7+
import SupportIcon from './icons/IconSupport.vue'
8+
</script>
9+
10+
<template>
11+
<WelcomeItem>
12+
<template #icon>
13+
<DocumentationIcon />
14+
</template>
15+
<template #heading>Documentation</template>
16+
17+
Widely regarded as one of the best, Vue’s
18+
<a target="_blank" href="https://v3.vuejs.org/">official documentation</a>
19+
will provide you with all information you need to get started. Whether you’re already a Vue
20+
veteran or just trying the framework out, great chances are you’ll find the answer to your next
21+
question there.
22+
</WelcomeItem>
23+
24+
<WelcomeItem>
25+
<template #icon>
26+
<ToolingIcon />
27+
</template>
28+
<template #heading>Tooling</template>
29+
30+
This project is served and bundled with
31+
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
32+
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
33+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
34+
your components and web pages, check out
35+
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
36+
<a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
37+
>Cypress Component Testing</a
38+
>.
39+
40+
<br />
41+
42+
More instructions are available in <code>README.md</code>.
43+
</WelcomeItem>
44+
45+
<WelcomeItem>
46+
<template #icon>
47+
<EcosystemIcon />
48+
</template>
49+
<template #heading>Ecosystem</template>
50+
51+
Get official tools and libraries for your project:
52+
<a target="_blank" href="https://next.vuex.vuejs.org/">Vuex</a>,
53+
<a target="_blank" href="https://next.router.vuejs.org/">Vue Router</a>,
54+
<a target="_blank" href="https://next.vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
55+
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
56+
resources, we suggest paying
57+
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
58+
a visit.
59+
</WelcomeItem>
60+
61+
<WelcomeItem>
62+
<template #icon>
63+
<CommunityIcon />
64+
</template>
65+
<template #heading>Community</template>
66+
67+
Got stuck? Ask your question on
68+
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
69+
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
70+
You should also subscribe to
71+
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> for latest news in the Vue
72+
world.
73+
</WelcomeItem>
74+
75+
<WelcomeItem>
76+
<template #icon>
77+
<SupportIcon />
78+
</template>
79+
<template #heading>Support Vue</template>
80+
81+
As an independent project, Vue relies on community backing for its sustainability. You can help
82+
us by
83+
<a target="_blank" href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
84+
</WelcomeItem>
85+
</template>

‎template/code/default/src/components/IntroductionItem.vue renamed to ‎template/code/default/src/components/WelcomeItem.vue

File renamed without changes.

‎template/code/default/src/components/__tests__/ColorSchemeSwitch.spec.js

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)