first commit

Signed-off-by: garionion <github@entr0py.de>
This commit is contained in:
garionion 2021-04-02 23:11:05 +02:00
commit bb249e63fc
Signed by: garionion
GPG key ID: 53352FA607FA681A
21 changed files with 4319 additions and 0 deletions

7
.gitignore vendored Normal file
View file

@ -0,0 +1,7 @@
.idea
node_modules
.DS_Store
dist
dist-ssr
*.local

3
.prettierignore Normal file
View file

@ -0,0 +1,3 @@
# Ignore artifacts:
build
coverage

1
.prettierrc.json Normal file
View file

@ -0,0 +1 @@
{}

27
README.md Normal file
View file

@ -0,0 +1,27 @@
# Vue 3 + Typescript + Vite
This template should help get you started developing with Vue 3 and Typescript in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
### If Using `<script setup>`
[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
## 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 use the following:
### If Using Volar
Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
### If Using Vetur
1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
3. Open `src/main.ts` in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!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" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

3866
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

28
package.json Normal file
View file

@ -0,0 +1,28 @@
{
"name": "radiator",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview",
"format": "npx prettier --write ."
},
"dependencies": {
"vue": "^3.0.5",
"vue-router": "^4.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.1",
"@vue/compiler-sfc": "^3.0.5",
"autoprefixer": "^10.2.5",
"postcss": "^8.2.9",
"prettier": "2.2.1",
"sass": "^1.32.8",
"tailwindcss": "^2.0.4",
"typescript": "^4.1.3",
"vite": "^2.1.5",
"vite-plugin-components": "^0.8.3",
"vite-plugin-style-import": "^0.9.1",
"vue-tsc": "^0.0.15"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

38
src/App.vue Normal file
View file

@ -0,0 +1,38 @@
<template>
<div>
<v-nav />
<main class="container mx-auto px-2 max-w-7xl sm:px-6">
<router-view></router-view>
</main>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import VNav from "./components/VNav.vue";
export default defineComponent({
name: "App",
components: {
VNav,
},
setup() {
const message = ref("Hi");
return { message };
},
});
</script>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>

BIN
src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View file

@ -0,0 +1,69 @@
<template>
<h1>{{ msg }}</h1>
<p>
Recommended IDE setup:
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+
<a
href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
target="_blank"
>Vetur</a
>
or
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
(if using
<code>&lt;script setup&gt;</code>)
</p>
<p>See <code>README.md</code> for more information.</p>
<p>
<a href="https://vitejs.dev/guide/features.html" target="_blank"
>Vite Docs</a
>
|
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
</p>
<button @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test hot module replacement.
</p>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
export default defineComponent({
name: "HelloWorld",
props: {
msg: {
type: String,
required: true,
},
},
setup: () => {
const count = ref(0);
return { count };
},
});
</script>
<style scoped>
a {
color: #42b983;
}
label {
margin: 0 0.5em;
font-weight: bold;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 4px;
color: #304455;
}
</style>

154
src/components/VNav.vue Normal file
View file

@ -0,0 +1,154 @@
<template>
<nav class="bg-gray-800">
<div class="max-w-7xl mx-auto px-2 sm:px-6">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<button
@click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
aria-expanded="false"
>
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<!--
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<svg
class="h-6 w-6"
v-if="!open"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<!-- Icon when menu is open. -->
<!--
Heroicon name: outline/x
Menu open: "block", Menu closed: "hidden"
-->
<svg
class="h-6 w-6"
v-else
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div
class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"
>
<div class="flex-shrink-0 flex items-center">
<!--<img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
alt="Workflow">
<img class="hidden lg:block h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">-->
<div class="block h-8 w-auto py-1 text-white" v-text="title" />
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<router-link
v-for="{ name, to } in items"
:key="name"
v-text="name"
:to="{ name: to }"
class="px-3 py-2 rounded-md text-sm font-medium"
:class="
activeRoute === to
? ['bg-gray-900', 'text-white']
: ['text-gray-300', 'hover:bg-gray-700', 'hover:text-white']
"
/>
</div>
</div>
</div>
<div
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
>
<a
href="#"
class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
>Logout</a
>
</div>
</div>
</div>
<!--
Mobile menu, toggle classes based on menu state.
Menu open: "block", Menu closed: "hidden"
-->
<div class="sm:hidden" :class="{ hidden: !open }">
<div class="px-2 pt-2 pb-3 space-y-1">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
v-for="{ name, to } in items"
:key="name"
v-text="name"
:to="{ name: to }"
class="block px-3 py-2 rounded-md text-base font-medium"
:class="
activeRoute === to
? ['bg-gray-900', 'text-white']
: ['text-gray-300', 'hover:bg-gray-700', 'hover:text-white']
"
/>
</div>
</div>
</nav>
</template>
<script lang="ts">
//stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
import { ref, reactive } from "vue";
export default {
name: "VNav",
data() {
const title = "radiator";
const open = ref(false);
const items = reactive([
{
name: "Dashboard",
to: "Home",
},
{
name: "Settings",
to: "Settings",
},
]);
return { title, open, items };
},
computed: {
activeRoute(): string {
return this.$route.name;
}
},
};
</script>
<style scoped></style>

8
src/main.ts Normal file
View file

@ -0,0 +1,8 @@
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount("#app");

23
src/router/index.ts Normal file
View file

@ -0,0 +1,23 @@
import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/Settings.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/settings",
name: "Settings",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

5
src/shims-vue.d.ts vendored Normal file
View file

@ -0,0 +1,5 @@
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}

11
src/views/Home.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
Mi casa e tu casa
</template>
<script lang="ts">
export default {
name: "Home",
};
</script>
<style scoped></style>

11
src/views/Settings.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
settierungsmöglichkeiten
</template>
<script>
export default {
name: "Settings",
};
</script>
<style scoped></style>

11
tailwind.config.js Normal file
View file

@ -0,0 +1,11 @@
module.exports = {
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: "media", // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};

15
tsconfig.json Normal file
View file

@ -0,0 +1,15 @@
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

23
vite.config.ts Normal file
View file

@ -0,0 +1,23 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport from "vite-plugin-style-import";
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: "element-plus",
resolveStyle: (name) => {
name = name.slice(3);
return `element-plus/packages/theme-chalk/src/${name}.scss`;
},
resolveComponent: (name) => {
return `element-plus/lib/${name}`;
},
},
],
}),
],
});