hackmi.ch/start.hackmi.ch
1
0
Fork 0
generated from Phil/vue3template
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
hackmi.ch 2024-10-21 14:24:17 +00:00
commit ec11599e0a
16 changed files with 364 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
.gitignore vendored Normal file
View file

@ -0,0 +1,168 @@
# Package Lock
package-lock.json
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
# Local History for Visual Studio Code
.history/
# Built Visual Studio Code Extensions
*.vsix
.DS_Store
node_modules/
/dist/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

26
README.md Normal file
View file

@ -0,0 +1,26 @@
# hTemplate
This is my personal Template for Vue 3
With:
- Vue 3
- Vue-Router
- Vite
- TailwindCSS
- DaisyUI (plugin for TailwindCSS)
Navbar / Footer / Style / Router included.
```bash
git clone https://git.hackmi.ch/Phil/Vue3Template.git
cd Vue3Template
npm install
npm run dev
```
glhf!
Best Editor:
- vscode with Vue extensions.
Preview:
<img src="https://s3.hackmi.ch/public-share/git-htemplate/2023-09-07%2020_55_02-hTemplate.png" />

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>hTemplate</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

22
package.json Normal file
View file

@ -0,0 +1,22 @@
{
"name": "htemplate",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"daisyui": "^3.7.3",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.3.1",
"autoprefixer": "^10.4.15",
"postcss": "^8.4.29",
"tailwindcss": "^3.3.3",
"vite": "^4.4.9"
}
}

6
postcss.config.js Normal file
View file

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

BIN
public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

13
src/App.vue Normal file
View file

@ -0,0 +1,13 @@
<script setup>
import {RouterView} from "vue-router"
import Navbar from "./components/Navbar.vue"
import Footer from "./components/Footer.vue"
</script>
<template>
<div>
<Navbar />
<RouterView />
<Footer />
</div>
</template>

3
src/assets/style.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

7
src/components/Footer.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<footer class="footer footer-center p-4 bg-base-300 text-base-content fixed inset-x-0 bottom-0">
<aside>
<p>Copyright © 2023 - All right reserved by hackmi.ch / hTemplate</p>
</aside>
</footer>
</template>

37
src/components/Navbar.vue Normal file
View file

@ -0,0 +1,37 @@
<script setup>
import { RouterLink } from 'vue-router'
</script>
<template>
<div class="navbar bg-base-300">
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li>
<RouterLink active-class="bg-base-100" to="/">Home</RouterLink>
</li>
<li>
<RouterLink active-class="bg-base-100" to="/about">About</RouterLink>
</li>
</ul>
</div>
<a class="btn btn-ghost normal-case text-xl">hTemplate</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li>
<RouterLink active-class="bg-base-100" to="/">Home</RouterLink>
</li>
<li>
<RouterLink active-class="bg-base-100" to="/about">About</RouterLink>
</li>
</ul>
</div>
<div class="navbar-end"></div>
</div>
</template>

11
src/main.js Normal file
View file

@ -0,0 +1,11 @@
import './assets/style.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

22
src/router/index.js Normal file
View file

@ -0,0 +1,22 @@
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue"
import AboutView from "../views/AboutView.vue"
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView
},
{
path: "/about",
name: "about",
component: AboutView
}
]
})
export default router

5
src/views/AboutView.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div>
<h1>About View</h1>
</div>
</template>

5
src/views/HomeView.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div>
<h1>Home View</h1>
</div>
</template>

11
tailwind.config.js Normal file
View file

@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [require("daisyui")],
}

15
vite.config.js Normal file
View file

@ -0,0 +1,15 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})