前端项目是使用Vue3 compositionAPI + element-ui plus写的，这里默认你有最新的Vue版本，和懂一些Vue的基本命令。不过我的Vue不是很熟练，如果你有更好的方案请按自己的方法实现，愿意的话可以分享一下你的项目。

基本环境搭建

创建Vue项目：

vue create myblog

配置环境：

安装router：
		npm install vue-router

安装pinia：
		npm install pinia

安装axios：
		npm install axios

安装jwt-decode:
		npm install jwt-decode

使用依赖：

import { createApp } from 'vue'
import App from './App.vue'
import  router  from './router'
import  pinia  from './stores';

createApp(App).use(router).use(pinia).mount('#app')

依次创建以下文件：

路由配置

创建router/index.js文件

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {   //默认启动login页
            path: "/", redirect: "/login"
        },
        {   //登录页
            path: "/login",
            component: () => import("@/Views/Login/Login.vue")
        },
        {   //首页
            path: "/home",
            component: () => import("@/Views/Home/Home.vue")
        },
        {   //详情页
            path: "/article",
            component: () => import("@/Views/Detail/Detail.vue")
        },
        {   //配置NotFount页
            path: "/:pathMatch(.*)*",
            component: () => import("@/Views/NotFound.vue")
        }
    ]
})

export default router

App.vue中：

<!-- 指定路由渲染区域 -->
  <router-view></router-view>

状态管理