scaffold frontend

2022-01-21 20:18:48 +01:00
parent 79f8adaf1a
commit ff22127baa
19 changed files with 3035 additions and 0 deletions
@@ -0,0 +1,5 @@
 node_modules
 .DS_Store
 dist
 dist-ssr
 *.local
@@ -0,0 +1,3 @@
 {
  "recommendations": ["johnsoncodehk.volar"]
 }
@@ -0,0 +1,11 @@
 # Vue 3 + Typescript + Vite
 This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 ## Recommended IDE Setup
 - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 ## Type Support For `.vue` Imports in TS
 Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
@@ -0,0 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <title>NVLS | Covergen</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
@@ -0,0 +1,22 @@
 {
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "tailwindcss": "^3.0.15",
    "@tailwindcss/forms": "^0.4.0",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }
 }
@@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
@@ -0,0 +1,15 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import HelloWorld from './components/HelloWorld.vue';
 import Input from './components/Input.vue';
 </script>
 <template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  <Input />
 </template>
 <style scoped>
 </style>
@@ -0,0 +1,10 @@
 <script setup lang="ts">
 defineProps<{ msg: string }>()
 </script>
 <template>
 <h1>{{ msg }}</h1>
 </template>
 <style scoped>
 </style>
@@ -0,0 +1,11 @@
 <script setup lang="ts">
 </script>
 <template>
 <div>
 <label class="block text-sm font-medium text-gray-700">Label</label>
 <div class="mt-1 relative rounded-md shadow-sm">
 <input type="text" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" />
 </div>
 </div>
 </template>
@@ -0,0 +1,8 @@
 /// <reference types="vite/client" />
 declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
 }
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -0,0 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css';
 createApp(App).mount('#app')
@@ -0,0 +1,18 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
 }
@@ -0,0 +1,15 @@
 {
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
@@ -0,0 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [vue()]
 })