Hooke / print-web

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7ef11270 1 parent 7011975c

🎉 init: 项目初始化

Inline Side-by-side
Showing 24 changed files with 603 additions and 0 deletions
1 +.history
2 +node_modules
1 +可视化打印
......
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>
This diff could not be displayed because it is too large.
1 +{
2 + "name": "vite-project",
3 + "version": "0.0.0",
4 + "private": true,
5 + "scripts": {
6 + "dev": "vite",
7 + "build": "vite build",
8 + "preview": "vite preview",
9 + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
10 + "format": "prettier --write src/"
11 + },
12 + "dependencies": {
13 + "pinia": "^2.1.6",
14 + "vue": "^3.3.4",
15 + "vue-router": "^4.2.4"
16 + },
17 + "devDependencies": {
18 + "@rushstack/eslint-patch": "^1.3.3",
19 + "@vitejs/plugin-vue": "^4.3.4",
20 + "@vue/eslint-config-prettier": "^8.0.0",
21 + "eslint": "^8.49.0",
22 + "eslint-plugin-vue": "^9.17.0",
23 + "prettier": "^3.0.3",
24 + "vite": "^4.4.9"
25 + }
26 +}
No preview for this file type
1 +<script setup>
2 +import { RouterLink, RouterView } from 'vue-router'
3 +import HelloWorld from './components/HelloWorld.vue'
4 +</script>
5 +
6 +<template>
7 + <header>
8 + <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
9 +
10 + <div class="wrapper">
11 + <HelloWorld msg="You did it!" />
12 +
13 + <nav>
14 + <RouterLink to="/">Home</RouterLink>
15 + <RouterLink to="/about">About</RouterLink>
16 + </nav>
17 + </div>
18 + </header>
19 +
20 + <RouterView />
21 +</template>
22 +
23 +<style scoped>
24 +header {
25 + line-height: 1.5;
26 + max-height: 100vh;
27 +}
28 +
29 +.logo {
30 + display: block;
31 + margin: 0 auto 2rem;
32 +}
33 +
34 +nav {
35 + width: 100%;
36 + font-size: 12px;
37 + text-align: center;
38 + margin-top: 2rem;
39 +}
40 +
41 +nav a.router-link-exact-active {
42 + color: var(--color-text);
43 +}
44 +
45 +nav a.router-link-exact-active:hover {
46 + background-color: transparent;
47 +}
48 +
49 +nav a {
50 + display: inline-block;
51 + padding: 0 1rem;
52 + border-left: 1px solid var(--color-border);
53 +}
54 +
55 +nav a:first-of-type {
56 + border: 0;
57 +}
58 +
59 +@media (min-width: 1024px) {
60 + header {
61 + display: flex;
62 + place-items: center;
63 + padding-right: calc(var(--section-gap) / 2);
64 + }
65 +
66 + .logo {
67 + margin: 0 2rem 0 0;
68 + }
69 +
70 + header .wrapper {
71 + display: flex;
72 + place-items: flex-start;
73 + flex-wrap: wrap;
74 + }
75 +
76 + nav {
77 + text-align: left;
78 + margin-left: -1rem;
79 + font-size: 1rem;
80 +
81 + padding: 1rem 0;
82 + margin-top: 1rem;
83 + }
84 +}
85 +</style>
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-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 + font-weight: normal;
59 +}
60 +
61 +body {
62 + min-height: 100vh;
63 + color: var(--color-text);
64 + background: var(--color-background);
65 + transition:
66 + color 0.5s,
67 + background-color 0.5s;
68 + line-height: 1.6;
69 + font-family:
70 + Inter,
71 + -apple-system,
72 + BlinkMacSystemFont,
73 + 'Segoe UI',
74 + Roboto,
75 + Oxygen,
76 + Ubuntu,
77 + Cantarell,
78 + 'Fira Sans',
79 + 'Droid Sans',
80 + 'Helvetica Neue',
81 + sans-serif;
82 + font-size: 15px;
83 + text-rendering: optimizeLegibility;
84 + -webkit-font-smoothing: antialiased;
85 + -moz-osx-font-smoothing: grayscale;
86 +}
1 +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><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>
1 +@import './base.css';
2 +
3 +#app {
4 + max-width: 1280px;
5 + margin: 0 auto;
6 + padding: 2rem;
7 +
8 + font-weight: normal;
9 +}
10 +
11 +a,
12 +.green {
13 + text-decoration: none;
14 + color: hsla(160, 100%, 37%, 1);
15 + transition: 0.4s;
16 +}
17 +
18 +@media (hover: hover) {
19 + a:hover {
20 + background-color: hsla(160, 100%, 37%, 0.2);
21 + }
22 +}
23 +
24 +@media (min-width: 1024px) {
25 + body {
26 + display: flex;
27 + place-items: center;
28 + }
29 +
30 + #app {
31 + display: grid;
32 + grid-template-columns: 1fr 1fr;
33 + padding: 0 2rem;
34 + }
35 +}
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 href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
16 + <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
17 + </h3>
18 + </div>
19 +</template>
20 +
21 +<style scoped>
22 +h1 {
23 + font-weight: 500;
24 + font-size: 2.6rem;
25 + position: relative;
26 + top: -10px;
27 +}
28 +
29 +h3 {
30 + font-size: 1.2rem;
31 +}
32 +
33 +.greetings h1,
34 +.greetings h3 {
35 + text-align: center;
36 +}
37 +
38 +@media (min-width: 1024px) {
39 + .greetings h1,
40 + .greetings h3 {
41 + text-align: left;
42 + }
43 +}
44 +</style>
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 + Vue’s
18 + <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
19 + provides you with all information you need to get started.
20 + </WelcomeItem>
21 +
22 + <WelcomeItem>
23 + <template #icon>
24 + <ToolingIcon />
25 + </template>
26 + <template #heading>Tooling</template>
27 +
28 + This project is served and bundled with
29 + <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
30 + recommended IDE setup is
31 + <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
32 + <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
33 + you need to test your components and web pages, check out
34 + <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
35 + <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
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 href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
52 + <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
53 + <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
54 + <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
55 + you need more resources, we suggest paying
56 + <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">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 href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
68 + Discord server, or
69 + <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
70 + >StackOverflow</a
71 + >. You should also subscribe to
72 + <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
73 + the official
74 + <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
75 + twitter account for latest news in the Vue world.
76 + </WelcomeItem>
77 +
78 + <WelcomeItem>
79 + <template #icon>
80 + <SupportIcon />
81 + </template>
82 + <template #heading>Support Vue</template>
83 +
84 + As an independent project, Vue relies on community backing for its sustainability. You can help
85 + us by
86 + <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
87 + </WelcomeItem>
88 +</template>
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 + position: relative;
20 +}
21 +
22 +.details {
23 + flex: 1;
24 + margin-left: 1rem;
25 +}
26 +
27 +i {
28 + display: flex;
29 + place-items: center;
30 + place-content: center;
31 + width: 32px;
32 + height: 32px;
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>
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>
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>
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>
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>
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>
1 +import './assets/main.css'
2 +
3 +import { createApp } from 'vue'
4 +import { createPinia } from 'pinia'
5 +
6 +import App from './App.vue'
7 +import router from './router'
8 +
9 +const app = createApp(App)
10 +
11 +app.use(createPinia())
12 +app.use(router)
13 +
14 +app.mount('#app')
1 +import { createRouter, createWebHistory } from 'vue-router'
2 +import HomeView from '../views/HomeView.vue'
3 +
4 +const router = createRouter({
5 + history: createWebHistory(import.meta.env.BASE_URL),
6 + routes: [
7 + {
8 + path: '/',
9 + name: 'home',
10 + component: HomeView
11 + },
12 + {
13 + path: '/about',
14 + name: 'about',
15 + // route level code-splitting
16 + // this generates a separate chunk (About.[hash].js) for this route
17 + // which is lazy-loaded when the route is visited.
18 + component: () => import('../views/AboutView.vue')
19 + }
20 + ]
21 +})
22 +
23 +export default router
1 +import { ref, computed } from 'vue'
2 +import { defineStore } from 'pinia'
3 +
4 +export const useCounterStore = defineStore('counter', () => {
5 + const count = ref(0)
6 + const doubleCount = computed(() => count.value * 2)
7 + function increment() {
8 + count.value++
9 + }
10 +
11 + return { count, doubleCount, increment }
12 +})
1 +<template>
2 + <div class="about">
3 + <h1>This is an about page</h1>
4 + </div>
5 +</template>
6 +
7 +<style>
8 +@media (min-width: 1024px) {
9 + .about {
10 + min-height: 100vh;
11 + display: flex;
12 + align-items: center;
13 + }
14 +}
15 +</style>
1 +<script setup>
2 +import TheWelcome from '../components/TheWelcome.vue'
3 +</script>
4 +
5 +<template>
6 + <main>
7 + <TheWelcome />
8 + </main>
9 +</template>
1 +import { fileURLToPath, URL } from 'node:url'
2 +
3 +import { defineConfig } from 'vite'
4 +import vue from '@vitejs/plugin-vue'
5 +
6 +// https://vitejs.dev/config/
7 +export default defineConfig({
8 + plugins: [
9 + vue(),
10 + ],
11 + resolve: {
12 + alias: {
13 + '@': fileURLToPath(new URL('./src', import.meta.url))
14 + }
15 + }
16 +})