一，前端架构Vben页面结构源码分析

bbill

已于 2024-01-19 07:16:28 修改

阅读量1.4k

点赞数 9

分类专栏：前端源码分析 vue，jeecgboot，vben前端源码学习文章标签： node.js vue anti-design-vue jeecgboot

于 2024-01-18 17:07:17 首次发布

本文链接：https://blog.youkuaiyun.com/bbill/article/details/135678511

版权

本文详细解释了JeecgBoot框架中，从index.html导入main.ts的流程，包括App.vue的注解、登录路由的设置、页面加载顺序，以及核心组件如菜单管理、页面锁定、头部控制和多重Tab标签栏的实现。同时介绍了路由事件监听和组件挂载机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一），概述

本文总结vben，jeecgboot的页面登录前后的文件执行顺序，注释功能，帮助学习了解系统结构体系，或遇到问题时快速定位，或者扩展额外功能。

（二）index.html导入main.ts

index.html入口页文件

<div class="app-loading">
        <div class="app-loading-wrap">
          <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
          <div class="app-loading-dots">
            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
          </div>
          <div class="app-loading-title"><%= title %></div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>  //导入main.ts
  </body>
</html>

(三) main.ts入口主文件

 import '/@/design/index.less';
// 注册 windi（css 组件化）
import 'virtual:windi-base.css';
import 'virtual:windi-components.css';
import 'virtual:windi-utilities.css';
import 'virtual:windi-devtools';
// 注册图标
import 'virtual:svg-icons-register';
import App from './App.vue';  //导入App


    async function bootstrap() {
    //开始初始化数据
    
// 应用挂载点
    app.mount('#app', true);

（四）App.vue注解

<template>
  <ConfigProvider :locale="getAntdLocale">
    <AppProvider>     //读取app应用组件配置参数
      <RouterView />  //路由器显示区域占位，将被路由的组件components替换（功能页面在这里显示）
    </AppProvider>
  </ConfigProvider>
</template>

<script lang="ts" setup>
  import {
    ConfigProvider } from 'ant-design-vue';
  import {
    AppProvider } from '/@/components/Application';
  import {
    useTitle } from '/@/hooks/web/useTitle';
  import {
    useLocale } from '/@/locales/useLocale';

  // support Multi-language
  const {
    getAntdLocale } = useLocale();

  useTitle();    //src\hooks\web\useTitle.ts   //src\hooks\setting\index.ts
                  //src\utils\env.ts             
//读取env中配置数据
                                  //.env，.env. .env.development, .env. //D:\idea-down\jeecgboot-vue3-master\jeecgboot-vue3-//master\.env.production
</script>

（五）、登录路由


    src\router\routes\index.ts //App初始化构造路由路径
src\router\index.ts  //生成路由器

根目录：有权限的初始访问路径，登录后可进入
    export const RootRoute: AppRouteRecordRaw = {
   
  path: '/',
  name: 'Root',
  redirect: PageEnum.BASE_HOME,
  meta: {
   
    title: 'Root',
  },