Skip to content

Commit 0c00dee

Browse files
haoqunjianghaoqunjiang
committed
3.0.0-alpha.3
1 parent 62a70a5 commit 0c00dee

File tree

142 files changed

+4802
-461
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

142 files changed

+4802
-461
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-vue",
3-
"version": "3.0.0-alpha.2",
3+
"version": "3.0.0-alpha.3",
44
"description": "An easy way to start a Vue project",
55
"type": "module",
66
"main": "index.js",

‎playground/default/jsconfig.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,5 @@
1616
"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
1717
"skipLibCheck": true
1818
},
19-
"include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"],
20-
"exclude": ["src/**/__tests__/**"]
19+
"include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"]
2120
}

‎playground/default/src/App.vue

Lines changed: 178 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,187 @@
1-
<template>
2-
<img alt="Vue logo" src="./assets/logo.png" />
3-
<HelloWorld msg="Hello Vue 3 + Vite" />
4-
</template>
5-
61
<script setup>
72
import HelloWorld from './components/HelloWorld.vue'
3+
import IntroductionItem from './components/IntroductionItem.vue'
4+
import ColorSchemeSwitch from './components/ColorSchemeSwitch.vue'
85
9-
// This starter template is using Vue 3 experimental <script setup> SFCs
10-
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
6+
import DocumentationIcon from './components/icons/Documentation.vue'
7+
import ToolingIcon from './components/icons/Tooling.vue'
8+
import EcosystemIcon from './components/icons/Ecosystem.vue'
9+
import CommunityIcon from './components/icons/Community.vue'
10+
import SupportIcon from './components/icons/Support.vue'
1111
</script>
1212

13+
<template>
14+
<header>
15+
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
16+
17+
<div class="wrapper">
18+
<HelloWorld msg="You did it!" />
19+
<ColorSchemeSwitch />
20+
</div>
21+
</header>
22+
23+
<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>
98+
</main>
99+
</template>
100+
13101
<style>
102+
@import './assets/base.css';
103+
14104
#app {
15-
font-family: Avenir, Helvetica, Arial, sans-serif;
16-
-webkit-font-smoothing: antialiased;
17-
-moz-osx-font-smoothing: grayscale;
18-
text-align: center;
19-
color: #2c3e50;
20-
margin-top: 60px;
105+
max-width: 1280px;
106+
margin: 0 auto;
107+
padding: 2rem;
108+
109+
font-weight: normal;
110+
}
111+
112+
header {
113+
line-height: 1.5;
114+
}
115+
116+
.color-scheme-switcher {
117+
position: absolute;
118+
left: 0;
119+
top: 20px;
120+
121+
border: none;
122+
background: transparent;
123+
124+
color: var(--color-text);
125+
cursor: pointer;
126+
}
127+
128+
.logo {
129+
display: block;
130+
margin: 0 auto 2rem;
131+
}
132+
133+
a,
134+
.green {
135+
text-decoration: none;
136+
color: hsla(160, 100%, 37%, 1);
137+
transition: 0.4s;
138+
}
139+
140+
a:hover {
141+
background-color: hsla(160, 100%, 37%, 0.2);
142+
}
143+
144+
@media (min-width: 1024px) {
145+
body {
146+
display: flex;
147+
place-items: center;
148+
}
149+
150+
header {
151+
display: flex;
152+
place-items: center;
153+
padding-right: calc(var(--section-gap) / 2);
154+
}
155+
156+
header .wrapper {
157+
display: flex;
158+
place-items: flex-start;
159+
flex-wrap: wrap;
160+
}
161+
162+
.logo {
163+
margin: 0 2rem 0 0;
164+
}
165+
166+
#app {
167+
display: grid;
168+
grid-template-columns: 1fr 1fr;
169+
padding: 0 2rem;
170+
}
171+
172+
.router-links {
173+
margin-top: 1rem;
174+
text-align: left;
175+
}
176+
177+
.router-links a {
178+
padding: 0 0.5rem 0 0;
179+
background-color: transparent;
180+
}
181+
182+
.router-links a + a {
183+
border-left: 0;
184+
margin-left: 0.2rem;
185+
}
21186
}
22187
</style>

‎playground/default/src/assets/base.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* color palette from <https://github.com/vuejs/theme> */
2+
:root {
3+
--vt-c-white: #ffffff;
4+
--vt-c-white-soft: #f8f8f8;
5+
--vt-c-white-mute: #f2f2f2;
6+
7+
--vt-c-black: #181818;
8+
--vt-c-black-soft: #222222;
9+
--vt-c-black-mute: #282828;
10+
11+
--vt-c-indigo: #2c3e50;
12+
13+
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14+
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15+
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16+
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17+
18+
--vt-c-text-light-1: var(--vt-c-indigo);
19+
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20+
--vt-c-text-dark-1: var(--vt-c-white);
21+
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22+
}
23+
24+
/* semantic color variables for this project */
25+
:root {
26+
--color-background: var(--vt-c-white);
27+
--color-background-soft: var(--vt-c-white-soft);
28+
--color-background-mute: var(--vt-c-white-mute);
29+
30+
--color-border: var(--vt-c-divider-light-2);
31+
--color-border-hover: var(--vt-c-divider-light-1);
32+
33+
--color-heading: var(--vt-c-text-light-1);
34+
--color-text: var(--vt-c-text-light-2);
35+
36+
--section-gap: 160px;
37+
}
38+
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);
43+
44+
--color-border: var(--vt-c-divider-dark-2);
45+
--color-border-hover: var(--vt-c-divider-dark-1);
46+
47+
--color-heading: var(--vt-c-text-dark-1);
48+
--color-text: var(--vt-c-text-dark-2);
49+
}
50+
51+
*,
52+
*::before,
53+
*::after {
54+
box-sizing: border-box;
55+
margin: 0;
56+
position: relative;
57+
font-weight: normal;
58+
}
59+
60+
body {
61+
min-height: 100vh;
62+
color: var(--color-text);
63+
background: var(--color-background);
64+
transition: color 0.5s, background-color 0.5s;
65+
line-height: 1.6;
66+
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
67+
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
68+
font-size: 15px;
69+
text-rendering: optimizeLegibility;
70+
-webkit-font-smoothing: antialiased;
71+
-moz-osx-font-smoothing: grayscale;
72+
}

‎playground/default/src/assets/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy