Vite + Vue + TS

├── src ├── assets │ ├── my-library-vue-ts.scss │ ├── vue.svg │ └── scss │ │ └── _global.scss ├── vite-env.d.ts ├── main.ts ├── components │ ├── index.ts │ ├── main.ts │ ├── MyButton.vue │ └── HelloWorld.vue ├── App.vue └── style.css ├── .vscode └── extensions.json ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── public └── vite.svg ├── README.md ├── package.json ├── vite.config.ts └── yarn.lock /src/assets/my-library-vue-ts.scss: -------------------------------------------------------------------------------- 1 | @import "./scss/global"; 2 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | import '@/assets/my-library-vue-ts.scss'; 2 | 3 | export { default as HelloWorld } from './HelloWorld.vue'; 4 | export { default as MyButton } from './MyButton.vue'; 5 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /src/components/main.ts: -------------------------------------------------------------------------------- 1 | import type { App } from 'vue'; 2 | import { HelloWorld, MyButton } from "@/components"; 3 | 4 | export default { 5 | install: (app: App) => { 6 | app.component('HelloWorld', HelloWorld); 7 | app.component('MyButton', MyButton); 8 | } 9 | }; 10 | 11 | export { HelloWorld, MyButton }; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 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 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/MyButton.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 23 | 24 | 34 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 18 | 19 | 32 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM"], 13 | "skipLibCheck": true, 14 | "noEmit": true, 15 | "allowJs": true, 16 | "allowSyntheticDefaultImports": true, 17 | "forceConsistentCasingInFileNames": true, 18 | "noFallthroughCasesInSwitch": true, 19 | "declaration": true, 20 | "outDir": "dist", 21 | "declarationDir": "dist", 22 | "baseUrl": ".", 23 | "paths": { 24 | "@/*": [ 25 | "./src/*" 26 | ] 27 | } 28 | }, 29 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 30 | "references": [{ "path": "./tsconfig.node.json" }] 31 | } 32 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | 34 | 39 | -------------------------------------------------------------------------------- /src/assets/scss/_global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | body { 6 | color: #222; 7 | line-height: 1.5; 8 | background-color: #FCFCFC; 9 | } 10 | 11 | h1 { 12 | font-size: 2.75em; 13 | } 14 | 15 | h2 { 16 | font-size: 2.25em; 17 | } 18 | 19 | h3 { 20 | font-size: 2em; 21 | } 22 | 23 | h4 { 24 | font-size: 1.625em; 25 | } 26 | 27 | h5 { 28 | font-size: 1.25em; 29 | } 30 | 31 | h6 { 32 | font-size: 1.125em; 33 | } 34 | 35 | p { 36 | font-size: 1em; 37 | margin-bottom: 10px; 38 | } 39 | 40 | @media screen and (max-width: 767px){ 41 | h1 { 42 | font-size: 2em; 43 | } 44 | 45 | h2 { 46 | font-size: 1.875em; 47 | } 48 | 49 | h3 { 50 | font-size: 1.75em; 51 | } 52 | 53 | h4 { 54 | font-size: 1.5em; 55 | } 56 | 57 | h5 { 58 | font-size: 1.375em; 59 | } 60 | } 61 | 62 | img, svg { 63 | width: 100%; 64 | height: auto; 65 | } 66 | 67 | .main { 68 | display: flex; 69 | flex-direction: column; 70 | } 71 | 72 | .wrapper { 73 | scroll-behavior: smooth; 74 | flex: 1 0 0; 75 | position: relative; 76 | } 77 | 78 | .container { 79 | width: calc(100% - 30px); 80 | margin: 0 auto; 81 | } 82 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `

{{ msg }}