项目知识点

编码工具：VScode
技术框架：Vite8.0+Vue3.5+Vue-router5+Pinia3
组件库：arco-design^2.58.0 (字节vue3组件库)
状态管理：pinia^3.0.4
图表插件：echarts^6.1.0
富文本编辑器：wangeditor^4.7.15
模拟数据：mockjs^1.1.0
样式处理：sass^1.100.0

vite8-vue3-webos网页版os系统，已经感谢到我的原创小店。

项目结构

最新前端技术桶vite8+vue3+pinia3搭建项目模板。

项目入口配置

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

// 引入arco.design组件库
import ArcoDesign from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
// 额外引入图标库
import ArcoIcon from '@arco-design/web-vue/es/icon'

// 引入路由及状态管理
import Router from './router'
import Pinia from './pinia'

const app = createApp(App)

app
.use(ArcoDesign)
.use(ArcoIcon)
.use(Router)
.use(Pinia)
.mount('#app')

vite批量路由导入

import { createRouter, createWebHashHistory } from 'vue-router'
import { authState } from '@/pinia/modules/auth'

import Layout from '@/layouts/index.vue'

// 批量导入路由
const modules = import.meta.glob('./modules/*.js', { eager: true })
console.log(modules)
const patchRouters = Object.keys(modules).map(key => modules[key].default).flat()
console.log(patchRouters)

const routes = [
  {
    path: '/',
    redirect: '/desktop',
  },
  ...patchRouters,
  // 错误模块
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    component: Layout,
    meta: {
      title: '404error',
    },
    children: [
      {
        path: '404',
        component: () => import('@/views/error/404.vue'),
      }
    ]
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

// 全局路由钩子拦截
router.beforeEach((to, from) => {
  const authstate = authState()
  // 登录验证
  if(to?.meta?.requireAuth && !authstate.authorization) {
    console.log('你还未登录!')
    return {
      path: '/login'
    }
  }
})