序言
一直以来想找个最合适的机会写一写有关VueAdminWork的总体构架基本原理以及一技术细节。后期觉得还是不太成形，而且也没准备好要是不是写。今天急于试写一则有关VueAdminWork的总体构架结构设计。写得不好还请诸位爸爸妈妈嘿嘿
以下的表明是VueAdminWorkP（Vue3 + Vite2 + NaiveUI + Typescript）版为科沙群进行如是说的
VueAdminWork构架的结构设计本意和表明
很多所用前台信息系统的爸爸妈妈一定会有两个觉得就是或者机能少，或者网页粗大。多多少少单厢存在这种那般的问题，只不过我在使用自己的前台管理模版的时候也是一样的觉得。
所以就下决心要他们搞这款属于他们的前台管理系统，除此以外，更要尽量地兼具到绝大部分人的需求。但由于对个人能力仍旧非常有限，VueAdminWork构架到那时还有许许多多需要健全的地方。在未来的时间，就要继续不懈努力去健全给大家带来更快的开放源码经典作品。
做这样这款构架也是对他们的科学知识管理体系的结晶，在这过程也自学到了许许多多科学知识。尾端也曾想不到舍弃，但硬是秉持到了最后，说实话没有舍弃。
VueAdminWork构架产业发展迄今已经有6款不同技术构架的版。只不过目前开源了4款。另这款如前所述Antd的版也准备开放源码。
这里头我要重点项目表明一下，VueAdminWork全为由我生前一点儿标识符写出来的，从两个单纯的html网页项目，一点儿产业发展到那时的管理体系。
当然不是就行了从网上浏览两个模版啥时候式样啥时候文本就变为他们的了。
这种的行为是让人不耻的。
VueAdminWork运行基本原理和模型
VueAdminWork和两个普通的项目一样，入口也是 main.ts 或者 main.js 。也存在两个 App.vue组件。
可以看成两个普通的Vue项目
App.vue标识符如下：
<template> <n-notification-provider> <n-message-provider> <router-view /> </n-message-provider> </n-notification-provider> </template>是不是很单纯……
构架本身的运行基本原理也是非常单纯的，用下面一张图就可以清楚地表示
在总体的构架上，结构设计的构思就是构架由两个个组件组合来成，这种便于后期的维护和替换。
VueAdminWork采用了两级路由，从而对应两级视图渲染的方式。如下
最外层的路由对应的组件是: Layout。
Layout对应的模版标识符如下：
<template> <n-config-provider :theme-overrides=“state.themeOverrides” :theme=“state.theme === dark ? darkTheme : null” :locale=“zhCN” style=“height: 100%” > <n-global-style /> <n-loading-bar-provider> <n-dialog-provider> <n-element class=“vaw-layout-container” :class=“[state.device === mobile && is-mobile, state.theme]” > <div v-if=“state.device === mobile” class=“mobile-shadow” :class=“[state.isCollapse ? close-shadow : show-shadow]” @click=“closeMenu” ></div> <template v-if=“state.device === mobile”> <SideBar /> <MainLayout /> </template> <template v-else> <template v-if=“state.layoutMode === ttb”> <VAWHeader /> <MainLayout :show-nav-bar=“false” /> </template> <template v-else-if=“state.layoutMode === ltr”> <SideBar /> <MainLayout /> </template> <template v-else-if=“state.layoutMode === lcr”> <TabSplitSideBar /> <MainLayout /> </template> <template v-else-if=“state.layoutMode === tlr”> <VAWHeader /> <SideBar :showLogo=“false” /> <MainLayout :show-nav-bar=“false” /> </template> </template> </n-element> <WaterMark /> </n-dialog-provider> </n-loading-bar-provider> </n-config-provider> </template>同时，为了适配移动端，Layout还有很多有关 移动端的标识符。这里不多如是说有关移动端的适配情况了。
Layout组件是整个项目运行的骨架和载体。根据用户的配置来进行切换不同的布局模式。是最重要的两个组件
每个组件负责不同的机能，比如：
SideBar 只负责显示 菜单列表TabBar只显示已经访问过的网页标题NavBar只显示网页导航相关的机能……正是因为这种两个个的小组件，最终组合在一起形成构架的基本的模型。
工作区Main.vue
而我们平时用得最多的就是工作区（也就是第二级路由网页），是由 Main.vue实现，标识符如下：
<template> <router-view v-slot=“{ Component }”> <transition :name=“state.pageAnim + -transform” mode=“out-in” appear> <keep-alive :include=“cachedViews”> <component :is=“Component” :key=“key” /> </keep-alive> </transition> </router-view> </template> <script lang=“ts”> import{ computed, defineComponent, ref, watch }from vue import { useRoute } from vue-router import store from ../store export default defineComponent({ name: Main, setup() { const state = store.state const cachedViews = computed(() => { return state.cachedView.map((it: string) => it) }) const route = useRoute() constkey = ref(route.fullPath) watch(() =>route.fullPath, (newVal) => { key.value = newVal } )return{ key, state, cachedViews, } }, })</script>这种就可以根据浏览器中不同的路径来实现不同的网页切换
