create-vue 0.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +11 -0
- package/outfile.cjs +5700 -0
- package/package.json +46 -11
- package/template/base/.vscode/extensions.json +3 -0
- package/template/base/_gitignore +27 -0
- package/template/base/index.html +13 -0
- package/template/base/package.json +19 -0
- package/template/base/public/favicon.ico +0 -0
- package/template/base/vite.config.js +25 -0
- package/template/code/default/cypress/integration/example.spec.js +8 -0
- package/template/code/default/src/App.vue +83 -0
- package/template/code/default/src/assets/base.css +74 -0
- package/template/code/default/src/assets/logo.svg +1 -0
- package/template/code/default/src/components/HelloWorld.vue +44 -0
- package/template/code/default/src/components/TheWelcome.vue +86 -0
- package/template/code/default/src/components/WelcomeItem.vue +86 -0
- package/template/code/default/src/components/__tests__/HelloWorld.spec.js +13 -0
- package/template/code/default/src/components/icons/IconCommunity.vue +7 -0
- package/template/code/default/src/components/icons/IconDocumentation.vue +7 -0
- package/template/code/default/src/components/icons/IconEcosystem.vue +7 -0
- package/template/code/default/src/components/icons/IconSupport.vue +7 -0
- package/template/code/default/src/components/icons/IconTooling.vue +19 -0
- package/template/code/router/cypress/integration/example.spec.js +13 -0
- package/template/code/router/src/App.vue +120 -0
- package/template/code/router/src/assets/base.css +74 -0
- package/template/code/router/src/assets/logo.svg +1 -0
- package/template/code/router/src/components/HelloWorld.vue +44 -0
- package/template/code/router/src/components/TheWelcome.vue +86 -0
- package/template/code/router/src/components/WelcomeItem.vue +86 -0
- package/template/code/router/src/components/__tests__/HelloWorld.spec.js +13 -0
- package/template/code/router/src/components/icons/IconCommunity.vue +7 -0
- package/template/code/router/src/components/icons/IconDocumentation.vue +7 -0
- package/template/code/router/src/components/icons/IconEcosystem.vue +7 -0
- package/template/code/router/src/components/icons/IconSupport.vue +7 -0
- package/template/code/router/src/components/icons/IconTooling.vue +19 -0
- package/template/code/router/src/router/index.js +27 -0
- package/template/code/router/src/views/AboutView.vue +15 -0
- package/template/code/router/src/views/HomeView.vue +9 -0
- package/template/code/typescript-default/cypress/integration/example.spec.ts +8 -0
- package/template/code/typescript-default/src/App.vue +83 -0
- package/template/code/typescript-default/src/assets/base.css +74 -0
- package/template/code/typescript-default/src/assets/logo.svg +1 -0
- package/template/code/typescript-default/src/components/HelloWorld.vue +41 -0
- package/template/code/typescript-default/src/components/TheWelcome.vue +86 -0
- package/template/code/typescript-default/src/components/WelcomeItem.vue +86 -0
- package/template/code/typescript-default/src/components/__tests__/HelloWorld.spec.ts +13 -0
- package/template/code/typescript-default/src/components/icons/IconCommunity.vue +7 -0
- package/template/code/typescript-default/src/components/icons/IconDocumentation.vue +7 -0
- package/template/code/typescript-default/src/components/icons/IconEcosystem.vue +7 -0
- package/template/code/typescript-default/src/components/icons/IconSupport.vue +7 -0
- package/template/code/typescript-default/src/components/icons/IconTooling.vue +19 -0
- package/template/code/typescript-router/cypress/integration/example.spec.ts +13 -0
- package/template/code/typescript-router/src/App.vue +120 -0
- package/template/code/typescript-router/src/assets/base.css +74 -0
- package/template/code/typescript-router/src/assets/logo.svg +1 -0
- package/template/code/typescript-router/src/components/HelloWorld.vue +41 -0
- package/template/code/typescript-router/src/components/TheWelcome.vue +86 -0
- package/template/code/typescript-router/src/components/WelcomeItem.vue +86 -0
- package/template/code/typescript-router/src/components/__tests__/HelloWorld.spec.ts +13 -0
- package/template/code/typescript-router/src/components/icons/IconCommunity.vue +7 -0
- package/template/code/typescript-router/src/components/icons/IconDocumentation.vue +7 -0
- package/template/code/typescript-router/src/components/icons/IconEcosystem.vue +7 -0
- package/template/code/typescript-router/src/components/icons/IconSupport.vue +7 -0
- package/template/code/typescript-router/src/components/icons/IconTooling.vue +19 -0
- package/template/code/typescript-router/src/router/index.ts +27 -0
- package/template/code/typescript-router/src/views/AboutView.vue +15 -0
- package/template/code/typescript-router/src/views/HomeView.vue +9 -0
- package/template/config/cypress/cypress/fixtures/example.json +5 -0
- package/template/config/cypress/cypress/jsconfig.json +8 -0
- package/template/config/cypress/cypress/plugins/index.js +28 -0
- package/template/config/cypress/cypress/support/commands.js +25 -0
- package/template/config/cypress/cypress/support/index.js +20 -0
- package/template/config/cypress/cypress.json +7 -0
- package/template/config/cypress/package.json +14 -0
- package/template/config/pinia/package.json +5 -0
- package/template/config/pinia/src/stores/counter.js +16 -0
- package/template/config/router/package.json +5 -0
- package/template/config/typescript/env.d.ts +16 -0
- package/template/config/typescript/package.json +11 -0
- package/template/config/typescript/tsconfig.json +24 -0
- package/template/entry/default/src/main.js +12 -0
- package/template/entry/pinia/src/main.js +15 -0
- package/template/entry/router/src/main.js +14 -0
- package/template/entry/router-and-pinia/src/main.js +17 -0
package/package.json
CHANGED
|
@@ -1,16 +1,51 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-vue",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"description": "
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "An easy way to start a Vue project",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"create-vue": "outfile.cjs"
|
|
8
8
|
},
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"vue工具"
|
|
9
|
+
"files": [
|
|
10
|
+
"outfile.cjs",
|
|
11
|
+
"template"
|
|
13
12
|
],
|
|
14
|
-
"
|
|
15
|
-
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": "^14.13.1 || >=16.0.0"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"prepare": "husky install",
|
|
18
|
+
"format": "prettier --write .",
|
|
19
|
+
"build": "esbuild --bundle index.js --format=cjs --platform=node --outfile=outfile.cjs",
|
|
20
|
+
"snapshot": "node snapshot.js",
|
|
21
|
+
"pretest": "run-s build snapshot",
|
|
22
|
+
"test": "node test.js",
|
|
23
|
+
"prepublishOnly": "run-s build snapshot"
|
|
24
|
+
},
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "git+https://github.com/vuejs/create-vue.git"
|
|
28
|
+
},
|
|
29
|
+
"keywords": [],
|
|
30
|
+
"author": "Haoqun Jiang <haoqunjiang+npm@gmail.com>",
|
|
31
|
+
"license": "MIT",
|
|
32
|
+
"bugs": {
|
|
33
|
+
"url": "https://github.com/vuejs/create-vue/issues"
|
|
34
|
+
},
|
|
35
|
+
"homepage": "https://github.com/vuejs/create-vue#readme",
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"esbuild": "^0.13.15",
|
|
38
|
+
"husky": "^7.0.4",
|
|
39
|
+
"kolorist": "^1.5.0",
|
|
40
|
+
"lint-staged": "^12.1.2",
|
|
41
|
+
"minimist": "^1.2.5",
|
|
42
|
+
"npm-run-all": "^4.1.5",
|
|
43
|
+
"prettier": "^2.4.1",
|
|
44
|
+
"prompts": "^2.4.2"
|
|
45
|
+
},
|
|
46
|
+
"lint-staged": {
|
|
47
|
+
"*.{js,ts,vue,json}": [
|
|
48
|
+
"prettier --write"
|
|
49
|
+
]
|
|
50
|
+
}
|
|
16
51
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Logs
|
|
2
|
+
logs
|
|
3
|
+
*.log
|
|
4
|
+
npm-debug.log*
|
|
5
|
+
yarn-debug.log*
|
|
6
|
+
yarn-error.log*
|
|
7
|
+
pnpm-debug.log*
|
|
8
|
+
lerna-debug.log*
|
|
9
|
+
|
|
10
|
+
node_modules
|
|
11
|
+
.DS_Store
|
|
12
|
+
dist
|
|
13
|
+
dist-ssr
|
|
14
|
+
*.local
|
|
15
|
+
|
|
16
|
+
/cypress/videos/
|
|
17
|
+
/cypress/screenshots/
|
|
18
|
+
|
|
19
|
+
# Editor directories and files
|
|
20
|
+
.vscode
|
|
21
|
+
!.vscode/extensions.json
|
|
22
|
+
.idea
|
|
23
|
+
*.suo
|
|
24
|
+
*.ntvs*
|
|
25
|
+
*.njsproj
|
|
26
|
+
*.sln
|
|
27
|
+
*.sw?
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" href="/favicon.ico" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite App</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
<script type="module" src="/src/main.js"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"scripts": {
|
|
3
|
+
"dev": "vite",
|
|
4
|
+
"build": "vite build",
|
|
5
|
+
"preview": "vite preview --port 5050"
|
|
6
|
+
},
|
|
7
|
+
"dependencies": {
|
|
8
|
+
"@vue/composition-api": "^1.4.0",
|
|
9
|
+
"vue": "^2.6.14"
|
|
10
|
+
},
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"@vitejs/plugin-legacy": "^1.6.3",
|
|
13
|
+
"@vue/runtime-dom": "^3.2.22",
|
|
14
|
+
"unplugin-vue2-script-setup": "^0.7.1",
|
|
15
|
+
"vite": "^2.6.14",
|
|
16
|
+
"vite-plugin-vue2": "^1.9.0",
|
|
17
|
+
"vue-template-compiler": "^2.6.14"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { fileURLToPath } from 'url'
|
|
2
|
+
|
|
3
|
+
import { defineConfig } from 'vite'
|
|
4
|
+
import legacy from '@vitejs/plugin-legacy'
|
|
5
|
+
import { createVuePlugin as vue2 } from 'vite-plugin-vue2'
|
|
6
|
+
import scriptSetup from 'unplugin-vue2-script-setup/vite'
|
|
7
|
+
|
|
8
|
+
// https://vitejs.dev/config/
|
|
9
|
+
export default defineConfig({
|
|
10
|
+
plugins: [
|
|
11
|
+
vue2({
|
|
12
|
+
jsx: true
|
|
13
|
+
}),
|
|
14
|
+
scriptSetup(),
|
|
15
|
+
legacy({
|
|
16
|
+
targets: ['ie >= 11'],
|
|
17
|
+
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
|
|
18
|
+
})
|
|
19
|
+
],
|
|
20
|
+
resolve: {
|
|
21
|
+
alias: {
|
|
22
|
+
'@': fileURLToPath(new URL('./src', import.meta.url))
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
})
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import HelloWorld from './components/HelloWorld.vue'
|
|
3
|
+
import TheWelcome from './components/TheWelcome.vue'
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<template>
|
|
7
|
+
<div id="app">
|
|
8
|
+
<header>
|
|
9
|
+
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
|
|
10
|
+
|
|
11
|
+
<div class="wrapper">
|
|
12
|
+
<HelloWorld msg="You did it!" />
|
|
13
|
+
</div>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<main>
|
|
17
|
+
<TheWelcome />
|
|
18
|
+
</main>
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
@import './assets/base.css';
|
|
24
|
+
|
|
25
|
+
#app {
|
|
26
|
+
max-width: 1280px;
|
|
27
|
+
margin: 0 auto;
|
|
28
|
+
padding: 2rem;
|
|
29
|
+
|
|
30
|
+
font-weight: normal;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
header {
|
|
34
|
+
line-height: 1.5;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.logo {
|
|
38
|
+
display: block;
|
|
39
|
+
margin: 0 auto 2rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
a,
|
|
43
|
+
.green {
|
|
44
|
+
text-decoration: none;
|
|
45
|
+
color: hsla(160, 100%, 37%, 1);
|
|
46
|
+
transition: 0.4s;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (hover: hover) {
|
|
50
|
+
a:hover {
|
|
51
|
+
background-color: hsla(160, 100%, 37%, 0.2);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@media (min-width: 1024px) {
|
|
56
|
+
body {
|
|
57
|
+
display: flex;
|
|
58
|
+
place-items: center;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#app {
|
|
62
|
+
display: grid;
|
|
63
|
+
grid-template-columns: 1fr 1fr;
|
|
64
|
+
padding: 0 2rem;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
header {
|
|
68
|
+
display: flex;
|
|
69
|
+
place-items: center;
|
|
70
|
+
padding-right: calc(var(--section-gap) / 2);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
header .wrapper {
|
|
74
|
+
display: flex;
|
|
75
|
+
place-items: flex-start;
|
|
76
|
+
flex-wrap: wrap;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.logo {
|
|
80
|
+
margin: 0 2rem 0 0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
@@ -0,0 +1,74 @@
|
|
|
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-dadarkrk-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-1);
|
|
35
|
+
|
|
36
|
+
--section-gap: 160px;
|
|
37
|
+
}
|
|
38
|
+
|
|
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);
|
|
44
|
+
|
|
45
|
+
--color-border: var(--vt-c-divider-dark-2);
|
|
46
|
+
--color-border-hover: var(--vt-c-divider-dark-1);
|
|
47
|
+
|
|
48
|
+
--color-heading: var(--vt-c-text-dark-1);
|
|
49
|
+
--color-text: var(--vt-c-text-dark-2);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
*,
|
|
54
|
+
*::before,
|
|
55
|
+
*::after {
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
margin: 0;
|
|
58
|
+
position: relative;
|
|
59
|
+
font-weight: normal;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
body {
|
|
63
|
+
min-height: 100vh;
|
|
64
|
+
color: var(--color-text);
|
|
65
|
+
background: var(--color-background);
|
|
66
|
+
transition: color 0.5s, background-color 0.5s;
|
|
67
|
+
line-height: 1.6;
|
|
68
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
|
69
|
+
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
70
|
+
font-size: 15px;
|
|
71
|
+
text-rendering: optimizeLegibility;
|
|
72
|
+
-webkit-font-smoothing: antialiased;
|
|
73
|
+
-moz-osx-font-smoothing: grayscale;
|
|
74
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
defineProps({
|
|
3
|
+
msg: {
|
|
4
|
+
type: String,
|
|
5
|
+
required: true
|
|
6
|
+
}
|
|
7
|
+
})
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<template>
|
|
11
|
+
<div class="greetings">
|
|
12
|
+
<h1 class="green">{{ msg }}</h1>
|
|
13
|
+
<h3>
|
|
14
|
+
You’ve successfully created a project with
|
|
15
|
+
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
|
|
16
|
+
<a target="_blank" href="https://vuejs.org/">Vue 2</a>.
|
|
17
|
+
</h3>
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<style scoped>
|
|
22
|
+
h1 {
|
|
23
|
+
font-weight: 500;
|
|
24
|
+
font-size: 2.6rem;
|
|
25
|
+
top: -10px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h3 {
|
|
29
|
+
font-size: 1.2rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.greetings h1,
|
|
33
|
+
.greetings h3 {
|
|
34
|
+
text-align: center;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media (min-width: 1024px) {
|
|
38
|
+
.greetings h1,
|
|
39
|
+
.greetings h3 {
|
|
40
|
+
display: block;
|
|
41
|
+
text-align: left;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
@@ -0,0 +1,86 @@
|
|
|
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
|
+
<div>
|
|
12
|
+
<WelcomeItem>
|
|
13
|
+
<template #icon>
|
|
14
|
+
<DocumentationIcon />
|
|
15
|
+
</template>
|
|
16
|
+
<template #heading>Documentation</template>
|
|
17
|
+
|
|
18
|
+
Vue’s
|
|
19
|
+
<a target="_blank" href="https://v3.vuejs.org/">official documentation</a>
|
|
20
|
+
provides you with all information you need to get started.
|
|
21
|
+
</WelcomeItem>
|
|
22
|
+
|
|
23
|
+
<WelcomeItem>
|
|
24
|
+
<template #icon>
|
|
25
|
+
<ToolingIcon />
|
|
26
|
+
</template>
|
|
27
|
+
<template #heading>Tooling</template>
|
|
28
|
+
|
|
29
|
+
This project is served and bundled with
|
|
30
|
+
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
|
|
31
|
+
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
|
|
32
|
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to
|
|
33
|
+
test your components and web pages, check out
|
|
34
|
+
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
|
|
35
|
+
<a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
|
|
36
|
+
>Cypress Component Testing</a
|
|
37
|
+
>.
|
|
38
|
+
|
|
39
|
+
<br />
|
|
40
|
+
|
|
41
|
+
More instructions are available in <code>README.md</code>.
|
|
42
|
+
</WelcomeItem>
|
|
43
|
+
|
|
44
|
+
<WelcomeItem>
|
|
45
|
+
<template #icon>
|
|
46
|
+
<EcosystemIcon />
|
|
47
|
+
</template>
|
|
48
|
+
<template #heading>Ecosystem</template>
|
|
49
|
+
|
|
50
|
+
Get official tools and libraries for your project:
|
|
51
|
+
<a target="_blank" href="https://vuex.vuejs.org/">Vuex</a>,
|
|
52
|
+
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
|
|
53
|
+
<a target="_blank" href="https://vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
|
|
54
|
+
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need
|
|
55
|
+
more resources, we suggest paying
|
|
56
|
+
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
|
|
57
|
+
a visit.
|
|
58
|
+
</WelcomeItem>
|
|
59
|
+
|
|
60
|
+
<WelcomeItem>
|
|
61
|
+
<template #icon>
|
|
62
|
+
<CommunityIcon />
|
|
63
|
+
</template>
|
|
64
|
+
<template #heading>Community</template>
|
|
65
|
+
|
|
66
|
+
Got stuck? Ask your question on
|
|
67
|
+
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
|
|
68
|
+
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
|
|
69
|
+
You should also subscribe to
|
|
70
|
+
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
|
|
71
|
+
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
|
|
72
|
+
twitter account for latest news in the Vue 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
|
|
82
|
+
help us by
|
|
83
|
+
<a target="_blank" href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
|
|
84
|
+
</WelcomeItem>
|
|
85
|
+
</div>
|
|
86
|
+
</template>
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="item">
|
|
3
|
+
<i>
|
|
4
|
+
<slot name="icon"></slot>
|
|
5
|
+
</i>
|
|
6
|
+
<div class="details">
|
|
7
|
+
<h3>
|
|
8
|
+
<slot name="heading"></slot>
|
|
9
|
+
</h3>
|
|
10
|
+
<slot></slot>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<style scoped>
|
|
16
|
+
.item {
|
|
17
|
+
margin-top: 2rem;
|
|
18
|
+
display: flex;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.details {
|
|
22
|
+
flex: 1;
|
|
23
|
+
margin-left: 1rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
i {
|
|
27
|
+
display: flex;
|
|
28
|
+
place-items: center;
|
|
29
|
+
place-content: center;
|
|
30
|
+
width: 32px;
|
|
31
|
+
height: 32px;
|
|
32
|
+
|
|
33
|
+
color: var(--color-text);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
h3 {
|
|
37
|
+
font-size: 1.2rem;
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
margin-bottom: 0.4rem;
|
|
40
|
+
color: var(--color-heading);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (min-width: 1024px) {
|
|
44
|
+
.item {
|
|
45
|
+
margin-top: 0;
|
|
46
|
+
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
i {
|
|
50
|
+
top: calc(50% - 25px);
|
|
51
|
+
left: -26px;
|
|
52
|
+
position: absolute;
|
|
53
|
+
border: 1px solid var(--color-border);
|
|
54
|
+
background: var(--color-background);
|
|
55
|
+
border-radius: 8px;
|
|
56
|
+
width: 50px;
|
|
57
|
+
height: 50px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.item:before {
|
|
61
|
+
content: ' ';
|
|
62
|
+
border-left: 1px solid var(--color-border);
|
|
63
|
+
position: absolute;
|
|
64
|
+
left: 0;
|
|
65
|
+
bottom: calc(50% + 25px);
|
|
66
|
+
height: calc(50% - 25px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.item:after {
|
|
70
|
+
content: ' ';
|
|
71
|
+
border-left: 1px solid var(--color-border);
|
|
72
|
+
position: absolute;
|
|
73
|
+
left: 0;
|
|
74
|
+
top: calc(50% + 25px);
|
|
75
|
+
height: calc(50% - 25px);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.item:first-of-type:before {
|
|
79
|
+
display: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.item:last-of-type:after {
|
|
83
|
+
display: none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
</style>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { mount } from '@cypress/vue'
|
|
2
|
+
import HelloWorld from '../HelloWorld.vue'
|
|
3
|
+
|
|
4
|
+
describe('HelloWorld', () => {
|
|
5
|
+
it('playground', () => {
|
|
6
|
+
mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } })
|
|
7
|
+
})
|
|
8
|
+
|
|
9
|
+
it('renders properly', () => {
|
|
10
|
+
mount(HelloWorld, { propsData: { msg: 'Hello Cypress' } })
|
|
11
|
+
cy.get('h1').should('contain', 'Hello Cypress')
|
|
12
|
+
})
|
|
13
|
+
})
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
3
|
+
<path
|
|
4
|
+
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
7
|
+
</template>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
|
3
|
+
<path
|
|
4
|
+
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
7
|
+
</template>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
|
3
|
+
<path
|
|
4
|
+
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
7
|
+
</template>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
3
|
+
<path
|
|
4
|
+
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
|
5
|
+
/>
|
|
6
|
+
</svg>
|
|
7
|
+
</template>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
|
2
|
+
<template>
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
6
|
+
aria-hidden="true"
|
|
7
|
+
role="img"
|
|
8
|
+
class="iconify iconify--mdi"
|
|
9
|
+
width="24"
|
|
10
|
+
height="24"
|
|
11
|
+
preserveAspectRatio="xMidYMid meet"
|
|
12
|
+
viewBox="0 0 24 24"
|
|
13
|
+
>
|
|
14
|
+
<path
|
|
15
|
+
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
|
16
|
+
fill="currentColor"
|
|
17
|
+
></path>
|
|
18
|
+
</svg>
|
|
19
|
+
</template>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// https://docs.cypress.io/api/introduction/api.html
|
|
2
|
+
|
|
3
|
+
describe('My First Test', () => {
|
|
4
|
+
it('visits the app root url', () => {
|
|
5
|
+
cy.visit('/')
|
|
6
|
+
cy.contains('h1', 'You did it!')
|
|
7
|
+
})
|
|
8
|
+
|
|
9
|
+
it('navigates to the about page', () => {
|
|
10
|
+
cy.visit('/about')
|
|
11
|
+
cy.contains('h1', 'This is an about page')
|
|
12
|
+
})
|
|
13
|
+
})
|