move front to front/
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<layout>
|
||||
<div id="about">
|
||||
<h5>About</h5>
|
||||
<div class="d-grid gap-2 col-1">
|
||||
<button type="button" class="btn btn-primary" @click="increment">
|
||||
{{ store.count }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, onMounted } from 'vue'
|
||||
import Layout from '@/Layout.vue'
|
||||
import { useCounterStore } from '@/store'
|
||||
|
||||
const count = ref(0)
|
||||
const store = useCounterStore()
|
||||
|
||||
function increment() {
|
||||
store.increment()
|
||||
console.log("count:", store.count)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log("mounted")
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<layout>
|
||||
<div id="home">
|
||||
<h5>Home</h5>
|
||||
<div class="d-grid gap-2 col-1">
|
||||
<button type="button" class="btn btn-primary" @click="increment">
|
||||
{{ store.count }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, onMounted } from 'vue'
|
||||
import Layout from '@/Layout.vue'
|
||||
import { useCounterStore } from '@/store'
|
||||
|
||||
const count = ref(0)
|
||||
const store = useCounterStore()
|
||||
|
||||
function increment() {
|
||||
store.increment()
|
||||
console.log("count:", store.count)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log("mounted")
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,56 @@
|
||||
|
||||
<template>
|
||||
<div id="layout">
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-my sticky-top">
|
||||
|
||||
<button class="btn">
|
||||
<div>
|
||||
<i class="fa-solid fa-bars fa-lg"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="navbar-brand">
|
||||
<i class="fa-brands fa-old-republic fa-lg"></i> M5
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><router-link to="/">Home</router-link></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><router-link to="/about">About</router-link></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link"><router-link to="/login">Login</router-link></a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col col-10 my-3 mx-auto">
|
||||
|
||||
<slot/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
$steel-blue: #4682b4;
|
||||
|
||||
.navbar-my {
|
||||
background-color: darken($steel-blue, 12%) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<nav class="navbar navbar-expand-sm navbar-my sticky-top mb-4">
|
||||
<div class="navbar-brand px-3">
|
||||
<i class="fa-brands fa-old-republic fa-lg"></i>
|
||||
M5
|
||||
</div>
|
||||
<span class="navbar-text">
|
||||
Login
|
||||
</span>
|
||||
<ul class="nav justify-content-end ml-auto"></ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8 col-sm-6 col-md-4 px-3 py-3 border">
|
||||
|
||||
<form accept-charset="UTF-8" v-on:submit.prevent="createSession">
|
||||
|
||||
<div class="form-group px-1 py-1">
|
||||
<label for="username">Username:</label>
|
||||
<input id="username" class="form-control" type="text" v-model="username"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group px-1 py-1">
|
||||
<label for="password">Password:</label>
|
||||
<input id="password" class="form-control" type="password" v-model="password"/>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3 mb-1">
|
||||
<button class="btn btn-primary btn-sm" type="submit">Submit</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col mt-5">
|
||||
<hr class="justify-content-sm-center" />
|
||||
<div class="text-center">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
const username = ref("")
|
||||
const password = ref("")
|
||||
|
||||
function createSession() {
|
||||
console.log("data", username.value, password.value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$steel-blue: #4682b4;
|
||||
|
||||
.navbar-my {
|
||||
background-color: darken($steel-blue, 12%) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from '@/App.vue'
|
||||
import router from '@/router'
|
||||
|
||||
import '@/main.scss'
|
||||
|
||||
import { library, icon } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { far } from '@fortawesome/free-regular-svg-icons'
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
library.add(fas, far, fab)
|
||||
|
||||
const pinia = createPinia()
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,61 @@
|
||||
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
|
||||
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
|
||||
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
|
||||
@import '~@fortawesome/fontawesome-free/scss/solid';
|
||||
@import '~@fortawesome/fontawesome-free/scss/regular';
|
||||
@import '~@fortawesome/fontawesome-free/scss/brands';// required to get $orange variable
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-300: #dee0de;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
|
||||
$blue: #1779ca;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #e83e8c;
|
||||
$red: #c11111;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #f0c117;
|
||||
$green: #28a745;
|
||||
$teal: #20c997;
|
||||
$cyan: #1192a8;
|
||||
|
||||
$cadet-blue: #5f9ea0;
|
||||
$midnight-blue: #191970;
|
||||
$navy: #191970;
|
||||
$steel-blue: #4682b4;
|
||||
|
||||
$primary: lighten($blue, 15%);
|
||||
$secondary: $gray-600;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$light: $gray-300;
|
||||
$dark: $gray-700;
|
||||
|
||||
|
||||
$theme-colors: map-merge($theme-colors, (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark
|
||||
));
|
||||
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
@@ -0,0 +1,29 @@
|
||||
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
|
||||
import Home from './Home.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: () => import('./About.vue')
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('./Login.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,14 @@
|
||||
|
||||
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0);
|
||||
|
||||
function increment() {
|
||||
count.value++;
|
||||
}
|
||||
|
||||
return { count, increment };
|
||||
})
|
||||
Reference in New Issue
Block a user