node -v

npm create vite vue-admin -- --template vue
cd vue-admin
npm install 
npm run dev

[](http://localhost:5173/)

npm add vue-router --save

"dependencies": {
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },

tree -L 2 -I "node_modules" -A

vue-admin
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   └── style.css
└── vite.config.js

import { createRouter,createWebHashHistory } from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes:[]
})
export default router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//引入router
import router from './router.js'
const app = createApp(App)
app.use(router)
app.mount('#app')

npm add less less-loader --save--dev

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script setup>

</script>

<style>

</style>

<template>
  <div class="login-container">
    <div class="login-box">
        <div class="avatar-box">
            <img class="avatar" src="../assets/vue.svg" />
        </div>
        <div class="form-login">
            <div class="form-grop">
                <label for="username"></label>
                <input class="form-control" id="username" type="text" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username">
            </div>
            <div class="form-grop">
                <label for="password"></label>
                <input class="form-control" id="password" type="password" v-model="password">
            </div>
            <div class="form-grop">
                <button class="btn" type="button" @click="onLogin">登录</button>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup> 
import { ref } from 'vue'
import { useRouter} from 'vue-router'

const username = ref('')
const password = ref('')
const router = useRouter()

const onLogin = () => {
    if(username.value === 'admin' && password.value === '123456'){
        router.push('/home')
        return localStorage.setItem('token','BEARER XXX')
    }else{
        alert('用户名或密码错误')
        localStorage.removeItem('token')
    }
}
</script>

<style>

</style>

import { createRouter,createWebHashHistory } from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/',
            redirect:'/login'
        },
        {
            path:'/login',
            component:()=>import('./components/Login.vue')
        }
    ]
})
export default router