diff --git a/Getting Started Vue-3 - Standalone/.vscode/extensions.json b/Getting Started Vue-3 - Standalone/.vscode/extensions.json new file mode 100644 index 0000000..a7cea0b --- /dev/null +++ b/Getting Started Vue-3 - Standalone/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar"] +} diff --git a/Getting Started Vue-3 - Standalone/README.md b/Getting Started Vue-3 - Standalone/README.md index e62e093..33895ab 100644 --- a/Getting Started Vue-3 - Standalone/README.md +++ b/Getting Started Vue-3 - Standalone/README.md @@ -1,7 +1,5 @@ -# Vue 3 + Vite +# Vue 3 + TypeScript + Vite -This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` + diff --git a/Getting Started Vue-3 - Standalone/package.json b/Getting Started Vue-3 - Standalone/package.json index 413641f..dd20510 100644 --- a/Getting Started Vue-3 - Standalone/package.json +++ b/Getting Started Vue-3 - Standalone/package.json @@ -1,19 +1,23 @@ { - "name": "getting-started-server-back", + "name": "vue3-project", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", - "build": "vite build", + "build": "vue-tsc -b && vite build", "preview": "vite preview" }, "dependencies": { "@syncfusion/ej2-vue-pdfviewer": "*", - "vue": "^3.2.47" + "vue": "^3.5.34" }, "devDependencies": { - "@vitejs/plugin-vue": "^4.1.0", - "vite": "^5.4.20" + "@types/node": "^24.12.3", + "@vitejs/plugin-vue": "^6.0.6", + "@vue/tsconfig": "^0.9.1", + "typescript": "~6.0.2", + "vite": "^8.0.12", + "vue-tsc": "^3.2.8" } } diff --git a/Getting Started Vue-3 - Standalone/public/favicon.svg b/Getting Started Vue-3 - Standalone/public/favicon.svg new file mode 100644 index 0000000..6893eb1 --- /dev/null +++ b/Getting Started Vue-3 - Standalone/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Getting Started Vue-3 - Standalone/public/icons.svg b/Getting Started Vue-3 - Standalone/public/icons.svg new file mode 100644 index 0000000..e952219 --- /dev/null +++ b/Getting Started Vue-3 - Standalone/public/icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Getting Started Vue-3 - Standalone/src/App.vue b/Getting Started Vue-3 - Standalone/src/App.vue index ec5455d..63138c5 100644 --- a/Getting Started Vue-3 - Standalone/src/App.vue +++ b/Getting Started Vue-3 - Standalone/src/App.vue @@ -1,45 +1,68 @@ - + +}; + \ No newline at end of file +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; + diff --git a/Getting Started Vue-3 - Standalone/src/assets/hero.png b/Getting Started Vue-3 - Standalone/src/assets/hero.png new file mode 100644 index 0000000..02251f4 Binary files /dev/null and b/Getting Started Vue-3 - Standalone/src/assets/hero.png differ diff --git a/Getting Started Vue-3 - Standalone/src/assets/vite.svg b/Getting Started Vue-3 - Standalone/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/Getting Started Vue-3 - Standalone/src/assets/vite.svg @@ -0,0 +1 @@ +Vite diff --git a/Getting Started Vue-3 - Standalone/src/components/HelloWorld.vue b/Getting Started Vue-3 - Standalone/src/components/HelloWorld.vue new file mode 100644 index 0000000..c232865 --- /dev/null +++ b/Getting Started Vue-3 - Standalone/src/components/HelloWorld.vue @@ -0,0 +1,95 @@ + + + diff --git a/Getting Started Vue-3 - Standalone/src/env.d.ts b/Getting Started Vue-3 - Standalone/src/env.d.ts new file mode 100644 index 0000000..323c78a --- /dev/null +++ b/Getting Started Vue-3 - Standalone/src/env.d.ts @@ -0,0 +1,7 @@ +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/Getting Started Vue-3 - Standalone/src/main.js b/Getting Started Vue-3 - Standalone/src/main.ts similarity index 81% rename from Getting Started Vue-3 - Standalone/src/main.js rename to Getting Started Vue-3 - Standalone/src/main.ts index 01433bc..2425c0f 100644 --- a/Getting Started Vue-3 - Standalone/src/main.js +++ b/Getting Started Vue-3 - Standalone/src/main.ts @@ -1,4 +1,5 @@ import { createApp } from 'vue' +import './style.css' import App from './App.vue' createApp(App).mount('#app') diff --git a/Getting Started Vue-3 - Standalone/src/style.css b/Getting Started Vue-3 - Standalone/src/style.css index e69de29..527d4fb 100644 --- a/Getting Started Vue-3 - Standalone/src/style.css +++ b/Getting Started Vue-3 - Standalone/src/style.css @@ -0,0 +1,296 @@ +:root { + --text: #6b6375; + --text-h: #08060d; + --bg: #fff; + --border: #e5e4e7; + --code-bg: #f4f3ec; + --accent: #aa3bff; + --accent-bg: rgba(170, 59, 255, 0.1); + --accent-border: rgba(170, 59, 255, 0.5); + --social-bg: rgba(244, 243, 236, 0.5); + --shadow: + rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; + + --sans: system-ui, 'Segoe UI', Roboto, sans-serif; + --heading: system-ui, 'Segoe UI', Roboto, sans-serif; + --mono: ui-monospace, Consolas, monospace; + + font: 18px/145% var(--sans); + letter-spacing: 0.18px; + color-scheme: light dark; + color: var(--text); + background: var(--bg); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @media (max-width: 1024px) { + font-size: 16px; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #9ca3af; + --text-h: #f3f4f6; + --bg: #16171d; + --border: #2e303a; + --code-bg: #1f2028; + --accent: #c084fc; + --accent-bg: rgba(192, 132, 252, 0.15); + --accent-border: rgba(192, 132, 252, 0.5); + --social-bg: rgba(47, 48, 58, 0.5); + --shadow: + rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; + } + + #social .button-icon { + filter: invert(1) brightness(2); + } +} + +body { + margin: 0; +} + +h1, +h2 { + font-family: var(--heading); + font-weight: 500; + color: var(--text-h); +} + +h1 { + font-size: 56px; + letter-spacing: -1.68px; + margin: 32px 0; + @media (max-width: 1024px) { + font-size: 36px; + margin: 20px 0; + } +} +h2 { + font-size: 24px; + line-height: 118%; + letter-spacing: -0.24px; + margin: 0 0 8px; + @media (max-width: 1024px) { + font-size: 20px; + } +} +p { + margin: 0; +} + +code, +.counter { + font-family: var(--mono); + display: inline-flex; + border-radius: 4px; + color: var(--text-h); +} + +code { + font-size: 15px; + line-height: 135%; + padding: 4px 8px; + background: var(--code-bg); +} + +.counter { + font-size: 16px; + padding: 5px 10px; + border-radius: 5px; + color: var(--accent); + background: var(--accent-bg); + border: 2px solid transparent; + transition: border-color 0.3s; + margin-bottom: 24px; + + &:hover { + border-color: var(--accent-border); + } + &:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + } +} + +.hero { + position: relative; + + .base, + .framework, + .vite { + inset-inline: 0; + margin: 0 auto; + } + + .base { + width: 170px; + position: relative; + z-index: 0; + } + + .framework, + .vite { + position: absolute; + } + + .framework { + z-index: 1; + top: 34px; + height: 28px; + transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) + scale(1.4); + } + + .vite { + z-index: 0; + top: 107px; + height: 26px; + width: auto; + transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) + scale(0.8); + } +} + +#app { + width: 1126px; + max-width: 100%; + margin: 0 auto; + text-align: center; + border-inline: 1px solid var(--border); + min-height: 100svh; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +#center { + display: flex; + flex-direction: column; + gap: 25px; + place-content: center; + place-items: center; + flex-grow: 1; + + @media (max-width: 1024px) { + padding: 32px 20px 24px; + gap: 18px; + } +} + +#next-steps { + display: flex; + border-top: 1px solid var(--border); + text-align: left; + + & > div { + flex: 1 1 0; + padding: 32px; + @media (max-width: 1024px) { + padding: 24px 20px; + } + } + + .icon { + margin-bottom: 16px; + width: 22px; + height: 22px; + } + + @media (max-width: 1024px) { + flex-direction: column; + text-align: center; + } +} + +#docs { + border-right: 1px solid var(--border); + + @media (max-width: 1024px) { + border-right: none; + border-bottom: 1px solid var(--border); + } +} + +#next-steps ul { + list-style: none; + padding: 0; + display: flex; + gap: 8px; + margin: 32px 0 0; + + .logo { + height: 18px; + } + + a { + color: var(--text-h); + font-size: 16px; + border-radius: 6px; + background: var(--social-bg); + display: flex; + padding: 6px 12px; + align-items: center; + gap: 8px; + text-decoration: none; + transition: box-shadow 0.3s; + + &:hover { + box-shadow: var(--shadow); + } + .button-icon { + height: 18px; + width: 18px; + } + } + + @media (max-width: 1024px) { + margin-top: 20px; + flex-wrap: wrap; + justify-content: center; + + li { + flex: 1 1 calc(50% - 8px); + } + + a { + width: 100%; + justify-content: center; + box-sizing: border-box; + } + } +} + +#spacer { + height: 88px; + border-top: 1px solid var(--border); + @media (max-width: 1024px) { + height: 48px; + } +} + +.ticks { + position: relative; + width: 100%; + + &::before, + &::after { + content: ''; + position: absolute; + top: -4.5px; + border: 5px solid transparent; + } + + &::before { + left: 0; + border-left-color: var(--border); + } + &::after { + right: 0; + border-right-color: var(--border); + } +} diff --git a/Getting Started Vue-3 - Standalone/tsconfig.app.json b/Getting Started Vue-3 - Standalone/tsconfig.app.json new file mode 100644 index 0000000..87f1b04 --- /dev/null +++ b/Getting Started Vue-3 - Standalone/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "types": ["vite/client"], + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.vue"] +} diff --git a/Getting Started Vue-3 - Standalone/tsconfig.json b/Getting Started Vue-3 - Standalone/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/Getting Started Vue-3 - Standalone/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/Getting Started Vue-3 - Standalone/tsconfig.node.json b/Getting Started Vue-3 - Standalone/tsconfig.node.json new file mode 100644 index 0000000..d3c52ea --- /dev/null +++ b/Getting Started Vue-3 - Standalone/tsconfig.node.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "es2023", + "lib": ["ES2023"], + "module": "esnext", + "types": ["node"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["vite.config.ts"] +} diff --git a/Getting Started Vue-3 - Standalone/vite.config.js b/Getting Started Vue-3 - Standalone/vite.config.ts similarity index 80% rename from Getting Started Vue-3 - Standalone/vite.config.js rename to Getting Started Vue-3 - Standalone/vite.config.ts index 05c1740..bbcf80c 100644 --- a/Getting Started Vue-3 - Standalone/vite.config.js +++ b/Getting Started Vue-3 - Standalone/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' -// https://vitejs.dev/config/ +// https://vite.dev/config/ export default defineConfig({ plugins: [vue()], })