## 写在前面本文为 `Vue3+Vite` 项目实战系列教程文章第二篇，系列文章建议从头观看效果更佳，大家可关注 [Vue3 实战系列](https://juejin.cn/column/7143287525371543589) 防走失！点个赞再看有助于全文完整阅读！此系列文章主要使用到的主要技术站栈为 `Vue3+Vite`，那既然是 `Vue3`，状态库我们使用的是 `Pinia` 而不是 `Vuex`，在写法上也肯定是以 `CompositionAPI` 为主而不是 `OptionsAPI`，组件库方面我们使用的是 `ArcoDesign` （赶紧丢掉 `ElementUI` 吧！）。上文 [这是一份保姆级Vue3+Vite实战教程](https://juejin.cn/post/7147353734912147470) 中我们主要介绍了 `Vue3+Vite` 项目的搭建以及项目上的一些配置，当然后续在开发过程中如果有需要也会陆陆续续的补充一些配置。本文我们终于要开始写代码了，但其实依旧还是在为项目做准备，因为此文的核心是项目的多布局实战，先把页面布局搭建好，随后再开始写项目，这也是项目开发中必不可少的一环，当然重要的还是写代码过程中的细节以及小技巧，新同学可以跟着码一遍，老同学可以快速阅读一遍看有没有什么用得上的实战小技巧。 👉🏻 [项目 GitHub 地址](https://github.com/isboyjc/toolsdog) 如果大家不想从头来过可以直接下载截止到上文内容的代码，👉🏻 [toolsdog tag v0.0.1-dev](https://github.com/isboyjc/toolsdog/releases/tag/v0.0.1-dev) ！代码拉下来之后，`npm install || pnpm install` 下载依赖，然后 `npm run serve || pnpm serve` 启动，如果一切没问题的话，当前项目运行起来是这样的： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5582662f5a1e40f1ad67b37ab28b4171~tplv-k3u1fbpfcp-zoom-1.image) **PS：** 在开始写代码之前，你需要简单看下 `Vue3` 官方文档，去了解一下基础 `API`，这很重要！！！ OK，接下来开始本文内容！ ## 项目多布局思路 ### 你想要的多布局是哪种？我们平常所说的多布局比较笼统，仔细分来其实有两种需要多布局的场景，大家可以自行匹配一下： - 项目有很多页面，有些页面是一样的布局，但还有些页面是另外一种布局，所以我们需要多种布局提供给不同的页面。 - 项目有很多页面，页面都是统一的布局，但是我们需要提供多种可以自由切换的布局，让用户在生产环境自己去选择。 ### 多页面不同布局如果你只是需要在不同的页面使用不同的布局，那么很简单。因为你只需要写多个不同的布局组件，然后使用二级路由通过指定父级路由的 `component` 就可以决定采用哪个布局，如下：假如我们有 2 个布局： ```js // layout 1 Layout1.vue // layout 2 Layout2.vue ``` 页面 `page_a` 想要使用 `Layout1` 布局，页面 `page_b` 想要使用 `Layout2` 布局，那么只需在配置路由时如下： ```js { routes: [ { path: '/layout1', name: 'Layout1', component: () => import('***/Layout1.vue'), redirect: '/layout1/page_a', children: [ { path: 'page_a', name: 'PageA', component: () => import('***/PageA.vue') }, // ... ] }, { path: '/layout2', name: 'Layout2', component: () => import('***/Layout2.vue'), redirect: '/layout2/page_b', children: [ { path: 'page_b', name: 'PageB', component: () => import('***/PageB.vue') }, // ... ] } ] } ``` 如上所示，我们只需要在根组件和布局组件中写上 `` 就 OK 了！ ### 可动态切换的布局再来看可以动态切换的布局，其实也很简单，一般来说，我们使用 `Vue` 的 `component` 组件，通过 `is` 属性去动态的渲染布局组件就可以了，如下： ```html ``` 然后，我们直接在父路由中引入此页面，就可以通过改变状态来动态切换所有的子路由布局了，如下： ```js { routes: [ { path: '/', component: () => import('***/SwitchLayout.vue'), redirect: '/page_a', children: [ { path: 'page_a', name: 'PageA', component: () => import('***/PageA.vue') }, // ... ] }, } ``` **PS：** `Vue` 内置的`component` 组件在 `Vue2` 中 `is` 也可以通过组件名称切换， `Vue3` 中只能通过组件实例切换！ OK，到此本文就结束了，谢谢大家观看！！！🤨 ## 准备工作结束是不可能结束的，多布局本身其实很简单，更重要的其实还是我们写的过程中遇到的一些技术点和细节，那接下来我们开始安排！！！咱们先写一个可以动态切换的布局，首先，在项目 `src` 目录下创建一个布局文件夹 `layout` 。接下来我们在 `src/layout` 文件下创建一个可切换布局的入口组件 `SwitchIndex.vue`，内容和上面所写的差不多，如下： ```html ``` `component` 组件我们暂且注释，因为目前还没有布局组件。接下来我们创建两个布局组件，由于我们要把这两种布局的选择权交给用户，所以我们在 `layout` 文件夹下新建一个 `switch` 文件夹，把可以切换的这两个布局组件放到里面统一管理下。创建可切换的默认布局文件：`layout/switch/DefaultLayout.vue` ```html ``` 创建可切换的边栏布局文件：`layout/switch/SidebarLayout.vue` ```html ``` 这两个布局的预期如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebe3ee0d4cb541ca97c0edc8f3b270b9~tplv-k3u1fbpfcp-zoom-1.image) 其实就是两种很普通很常见的布局，一种是有侧边栏的 `SidebarLayout`（下文叫它边栏布局）、一种无侧边栏的 `DefaultLayout`（下文叫它默认布局），大家先了解下要写的样子即可。 OK，接下来我们先完善两种布局然后再写动态切换。 ## 默认布局组件 DefaultLayout 上面我们已经创建好了 `DefaultLayout` 组件，那先来把它用上。修改一下 `DefaultLayout` 组件，如下： ```html ``` 然后直接在 `SwitchIndex` 组件引入使用这个布局，上文中我们虽然配置了组件自动引入，但是并没有配置 `layout` 目录，所以 `layout` 文件夹下的组件是不会被自动引入的，那我们还需要现在 `vite.config.js` 配置文件中把 `layout` 目录加上，如下： ```js export default defineConfig(({ mode }) => { return { // ... plugins: [ // ... Components({ // 新增 'src/layout' 目录配置 dirs: ['src/components/', 'src/view/', 'src/layout'], include: [/\.vue$/, /\.vue\?vue/, /\.md$/], resolvers: [ ArcoResolver({ sideEffect: true }), VueUseComponentsResolver(), VueUseDirectiveResolver(), IconsResolver({ prefix: 'icon', customCollections: ['user', 'home'] }) ] }), ] } }) ``` OK，然后我们就可以直接在 `SwitchIndex` 组件中使用 `DefaultLayout` 布局组件了，我们写的组件是匿名组件，默认组件名即文件名，如下： ```html ``` 然后，我们需要修改下路由文件 `router/index.js` ，把 `SwitchIndex` 组件作为一级路由组件，那此路由下的所有子路由就都可以使用我们的布局了： ```js routes: [ { path: '/', name: 'Layout', component: () => import('@/layout/SwitchIndex.vue'), redirect: '/', children: [ { path: '/', name: 'HomePage', meta: { title: 'TOOLSDOG' }, component: () => import('@/views/HomePage.vue') } ] } ] ``` 保存看页面： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a284ac89488143598fba189b47a6547a~tplv-k3u1fbpfcp-zoom-1.image) 如果你的运行效果也同上，那就已经用上了布局组件，到此都是 OK 的，接下来就可以调整布局 `UI` 样式了！ ### 码一下页面布局上面也说了，我们的默认布局其实很简单，就是很普通的上中下三分布局。上文我们已经装好了 `ArcoDesign`，同样也配置了其组件自动引入，这里我们直接使用 `ArcoDesign` 的 `layout` 布局组件做一个常规的上中下三分布局即可，需要注意的是，我们给 `Navbar` 导航部分加了一个固钉组件 `a-affix`，用于固定在页面顶部。 **PS：** `ArcoDesign` 组件均以子母 `a` 开头。修改 `DefaultLayout` 组件，如下： ```html ``` 接着我们简单调整一下样式。注意，`CSS` 这里我们接上文的配置，使用的是原子化 `CSS` 引擎（叫框架也行哈） [UnoCSS](https://github.com/unocss/unocss) ，不太了解的可以看下文档教程，如果你也跟着上文配置了它并下载了 `UnoCSS for VSCode` 插件，那就跟着我写，配合插件提供悬浮提示原生样式，跟着我这边写一写其实就会了，很简单，毕竟常用的 `CSS` 样式也就那些，语法记住就 OK 了，当然，你如果不习惯或者没有配置此项，也无所谓，因为都是些基础 `CSS` 样式，直接用 `CSS` 写一下也可以，咱就是图个省事儿 ~ 还有一点，由于我们想保证风格统一，还有就是后面想搞一下黑白模式切换，对于一些颜色、字体、尺寸方面，我这边直接全使用了 `ArcoDesign` 抛出的 `CSS` 变量，没有自己去自定义一套基础变量，没错，同样也是图省事儿 ~ 其实目前正经的 `UI` 库都会抛出其统一设计的颜色变量（您要是说 `ElementUI`，OK，当我没说），那对于我们这个项目来说，`ArcoDesign` 自身的这些变量已经够了，如果你是真的写正式项目，建议遵循自家 `UI` 的设计风格，搞一套自己的基础 `CSS` 变量来用（对一些有主题、颜色切换需求的同学来说，没有此需求写死颜色即可），同时如果项目中使用了开源 `UI` 库，你还需要定制一下 `UI` 库样式以匹配自家 `UI` 设计风格，目前正经的开源 `UI` 库对定制主题这块那都没得说，清晰明了且 Easy （您要是还提 `ElementUI`，再次当我没说，苦 `ElementUI` 良久 😄）那说了这么多，我们先来看下 `ArcoDesign` 的颜色变量吧！👉🏻 [ArcoDesign CSS变量传送们](https://arco.design/react/docs/token) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1bdc12a81cc4487bdb1f8fe79e8e113~tplv-k3u1fbpfcp-zoom-1.image) 如上，我们直接使用对应的 `CSS` 变量即可，这样后期我们处理黑白模式时，直接可以用 UI 库自带的黑暗模式。 OK，我们简单的写下布局样式 ```html ``` 如上，我们给 `Navbar` 一个下边框以及 `58px` 高度，给 `Footer` 一个上边框，同时，我们给 `Navbar、Content、Footer` 加了不同级别的背景颜色（`AcroDesign` 背景色 `CSS` 变量），最后我们为了让 `Footer` 首页不显示出来，给 `a-layout-content` 组件加了一个最小高度，使用视口高度 `100vh` 减去 `Navbar` 的高度就是该组件的最小高度了！再说一次：相信大家无论用没用过 `UnoCSS` 都可以看懂写的样式是啥意思，`@apply` 是 `UnoCSS` 在 `style` 标签中的写法，那在 `HTML` 标签中 `class` 属性中可以直接去写 `UnoCSS` 样式，如上面我们在 `a-layout-content` 标签中写的那样，如果装了插件，悬浮上去会有原生样式的提示，如下： ![https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19f1fca99b614d3ab5df5783043b32e0~tplv-k3u1fbpfcp-zoom-1.image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a084f26f2e742c4873dfd177fa4ddc2~tplv-k3u1fbpfcp-zoom-1.image) 一切都没问题的话，我们的项目保存运行就如下所示了（`Footer` 需要滚动查看） ![https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85283dc8cfa6462daeecd263bd6a9fc9~tplv-k3u1fbpfcp-zoom-1.image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfeafd6502db445a8869950a57fb09b0~tplv-k3u1fbpfcp-zoom-1.image) ### 导航组件 Navbar 简单的布局组件做好了，接下来我们慢慢填充布局内容，先来做 `Navbar` 组件。上文我们已经看了我画的草图，好吧，再看一遍 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e90ae0a424a4c97b70e1f06d0e95e3a~tplv-k3u1fbpfcp-zoom-1.image) 我们想要实现的两种布局都有导航栏，唯一的区别就是菜单的位置，所以我们这里把导航栏中的各个元素单独拆分作为独立的组件，使用插槽的方式在 `Navbar` 组件去使用，`Navbar` 组件相当于导航栏的一个布局组件。这样导航栏组件在哪种布局中都是可用的，避免重复代码。好，开始做了，在 `src/layout` 文件夹下新建 `components` 文件夹存放布局相关的公共组件。在 `src/layout/components` 文件夹下创建 `Navbar.vue` 文件，内容如下： ```html ``` 如上，我们给 `Navbar` 组件做了三个具名插槽，采用左中右这种结构并使用 `flex` 布局将中间的插槽撑满，同时我们也将默认插槽放在了中间的插槽位置，这样默认会往布局中间填充内容。注意，导航区域的高度在布局组件中已经固定写死 `58px` 了，导航组件这里我没有设置高度，让它自己撑满就行了。因为在任何布局下，导航栏高度是相同的。我们在 `DefaultLayout` 布局组件中的 `a-layout-header` 标签中使用一下导航条组件，同样无需引入直接使用，如下： ```html ``` 由于插槽中没有写内容，所以页面上没有东西，导航条壳子搞好了，接下来我们开始填充内容。左侧插槽我们写一个 `Logo` 组件，中间插槽就是导航菜单 `Menu` 组件了，右侧插槽则是一些页面小功能组件，暂定为 `Github` 组件（用来跳转 `Github` 的）、做布局切换的 `SwitchLayout` 组件、切换模式的 `SwitchMode` 组件，暂时就这些。 OK，接下来我们依次写一下这些组件。 ### Logo 组件在 `src/layout/components` 文件夹下新建 `Logo.vue` 文件，写入如下内容： ```html ``` 然后把 `Logo` 组件填充到我们 `DefaultLayout` 组件下 `Navbar` 组件的左侧插槽中即可： ```html ``` 运行如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3c292581d304904a624d3ec740c1991~tplv-k3u1fbpfcp-zoom-1.image) OK，解释下 `Logo` 组件，其实就是一个图标加上一个路由标题。样式我就不解释了，跟着一块写的同学有什么不知道的样式就用编译器鼠标悬浮看一下原生 `CSS` 是什么即可，老同学应该都能大致看懂啥样式。那关于 `logo` 我们直接在 [iconify](https://icones.js.org/) 图标库中找了一个图标用，我们这里用的是 `ri:hammer-fill` 图标，关于 `icon` 的配置以及使用这块上文已经说过了，不了解的请看上文，下文中再使用该库图标我就直接写个图标名不再解释了哈。另外，点击 `logo` 会跳转首页。标题呢，我们直接用 `Vue` 的 `watchEffect` 方法监听了当前路由 `meta` 对象中的 `title` 属性并赋值给响应式变量 `title` ，这样后面我们每次跳转到某个功能页面时， `Logo` 旁边的文字信息以及浏览器 `Tab` 页签都会变成该页面路由中配置的 `title` 信息。 `useRoute` 方法是 `Vue3` 组合式 `API`，它返回一个当前页面路由的响应式对象，同样 `Vue` 的核心 `API` 我们都做了自动引入，所以这里没有引入。 `watchEffect` 也是 `Vue3` 的 `API`，该方法会立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。简单来说就是只要该回调中有响应式数据，这些响应式数据的依赖发生改变时就会重新执行此回调，默认会立即执行一次。那在这个场景下就比 `watch` 好用多了。那响应式变量 `title` 是怎么来的呢？代码中我们使用了 `useTitle` 方法，同样没有引入，它不是 `Vue` 的 `API`，其实，它是 `VueUse` 库中的一个方法，[VueUse useTitle 传送门](https://vueuse.org/core/usetitle/#usetitle)，在上文我们已经给 `VueUse` 这个库的方法做了自动引入，所以可以直接用，该方法会返回一个响应式变量，这个响应式变量在改变时会自动改变我们的网页标题，注意这里的标题指的是浏览器 `Tab` 标签中的标题，如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26100134367c410b8792791e33c5412e~tplv-k3u1fbpfcp-zoom-1.image) 如上图，既然已经拿图标当了 `logo`，那一不做二不休，把 `Tab` 签中的 `ico` 图标也换了吧，就是上图中默认的 `Vue` 图标，再次去 `iconify` 图标库在线网站中找到我们使用的 `logo` 图标，下载个 `png` 下来，然后找个免费在线的图片 `png` 转 `ico` 格式网站转一下格式（百度、谷歌找），把转换后的文件名改成 `favicon.ico`，替换掉项目根目录下的 `public/favicon.ico` 文件即可，然后我们浏览器中的 `Tab ico` 图片就换好了，如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a6adf69bd994a91a7a5c040317311dd~tplv-k3u1fbpfcp-zoom-1.image) OK，到此 `Logo` 组件就搞好了。 ### Github 跳转小组件写 `Github` 跳转组件之前我们需要在 `config/index.js` 文件中配置一下 `GitHub Url` 地址，方便日后我们在项目中使用或统一修改，`Config` 配置文件具体内容看文章开头的代码或者看上文配置讲解。在 `config/index.js` 文件的 `configSource` 对象中新增一个 `github` 属性，属性值写上我们的项目地址，如下： ```js const configSource = { // ... github: 'https://github.com/isboyjc/toolsdog' } ``` `Github` 跳转组件很简单，就是字面意思，我们搞一个图标放上去，然后能够点击打开一个新标签跳转到项目的 `GitHub` 地址就行了。在 `src/layout/components` 文件夹下新建 `Github.vue` 文件，写入如下内容： ```html ``` `GitHub` 的图标我们用的 `iconify` 图标库中 `mdi:github` 图标，这个就没啥需要说的了，什么？你问我为啥不直接用 `a` 标签或者 `UI` 库的 `Link` 组件？答案是这个组件库按钮悬浮的交互很好看~ 接着我们去使用一下，把 `Github` 组件填充到默认布局 `DefaultLayout` 组件下 `Navbar` 组件的右侧插槽中即可： ```html ``` 运行如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9eb99d0e1e549bfb194053fde496196~tplv-k3u1fbpfcp-zoom-1.image) `SwitchLayout` 组件、`SwitchMode` 组件我们得放到后面再说，接下来我们来写导航菜单组件。 ### 菜单组件 Menu 由于我们目前只有一个路由，就是首页，还没有其他正八经儿的功能页面，所以，这里我们要先写一个路由页面。那布局写完之后我们第一个功能应该是要写正则可视化校验功能，这里我们就提前给它把路由以及页面定义好吧！首先，在 `src/views` 文件夹下新建 `RegularPage.vue` 文件作为正则校验页面组件： ```html ``` 接着我们要配置一下路由，注意，由于现在写的页面路由它同时还是个菜单，所以我们把这些可以作为菜单的路由单独写一个路由文件，这样我们后期可以直接可以导出当作菜单项配置用。在 `src/router` 文件夹下新建 `menuRouter.js` 文件，导出一个菜单路由数组，如下： ```js export const menuRouter = [] ``` 在 `src/router/index.js` 中使用一下： ```js import { createRouter, createWebHistory } from 'vue-router' // 导入菜单路由 import { menuRouter } from './menuRouter' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'Layout', component: () => import('@/layout/index.vue'), redirect: '/', children: [ { path: '/', name: 'HomePage', meta: { title: 'TOOLSDOG' }, component: () => import('@/views/HomePage.vue') }, // 使用菜单路由 ...menuRouter ] } ] }) export default router ``` OK，接下来我们配置菜单路由数组，由于我们将来可能会写到很多不同种类的功能，所以我们使用多级路由的方式给这些页面做个分类，正则可视化校验属于开发工具类，所以我们给它一个 `devtools` 的父级路由，另外，在菜单路由中，每个父级菜单我们给他在 `meta` 对象中添加一个 `icon` 属性，然后导入一个图片组件作为对应 `icon` 的值，这样做的目的是将来要在导航菜单中给每个分类的菜单都加个图标。 OK，修改 `menuRouter.js` 文件如下： ```js import IconMaterialSymbolsCodeBlocksOutline from '~icons/material-symbols/code-blocks-outline' export const menuRouter = [ { path: 'devtools', name: 'DevTools', meta: { title: '开发工具', icon: markRaw(IconMaterialSymbolsCodeBlocksOutline) }, redirect: { name: 'RegularPage' }, children: [ { path: 'regular', name: 'RegularPage', meta: { title: '正则在线校验' }, component: () => import('@/views/RegularPage.vue') } ] } ] ``` 如上，我们如果想要访问此页面，只需要访问 `/devtools/regular` 路由即可，那可能有些人注意到该配置中的父级路由的重定向中我们使用的是 `name` 来做的重定向，这里不用 `path` 是为了更安全，这个安全指的是由于我们单独抽离出了这个菜单路由模块，虽然目前是在把它引入并写在了 `/` 路由下，但是将来万一改变了一级路由，那整体的 `path` 都会改变，而使用 `name` 字段重定向就不存在这个问题，我们只需要注意下各个路由的 `name` 字段配置不重复即可。 **注意**，我们上面手动引入了 `iconify` 图标库中的图标，可能有人会问不是做了 `iconify` 的自动引入吗？为什么还要手动去引入？其实，组件的自动引入是靠解析识别组件模板中引入的组件再做的匹配，而这里我们没有在组件模板中使用，而是在 `JS` 中直接使用的，包括我们做项目经常会做的菜单配置，都是只存一个图标名，它是靠我们在运行时通过图标名去匹配组件，这是一个运行时动态的过程，开发时是做不了自动引入的，这类情况我们需要手动引入一下。还有一个大家可能发现了，在写入图标组件时，我们使用了 `Vue3` 的 `markRaw` 方法，`markRaw` 方法会标记一个对象，使其不能成为一个响应式对象，因为后面我们会将整个菜单路由数据作为一个响应式对象传入菜单组件渲染，那如果我们在这个数据中存在 `Vue` 组件，将会造成一些不必要的性能开销，所以这里我们直接使用 `markRaw` 对象给它标记下，使该对象不会被递归解析成响应式对象即可。接下来在浏览器访问下 `/devtools/regular` 路由，看看效果，同下即没问题： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb06feb56010475e839a52a4ef6d3d43~tplv-k3u1fbpfcp-zoom-1.image) 已经有菜单了数据了，我们去写菜单 `Menu` 组件。先理一下思路，通常组件库中会有 `Menu` 组件，当然 `ArcoDesign` 也不例外，我们可以直接拿过来封装一层去使用。封装什么呢？虽然我们目前只有一个路由，但是我们在应该要考虑到多级的情况，那其实解决办法就是做一个可以无限递归的菜单组件。 OK，在写菜单组件之前，路由菜单数据还需要处理下，我们写个递归方法拼接一下每个菜单的完整路由，并把每个路由菜单中的 `meta` 对象压平到菜单里，方便我们后面使用，还是在 `src/router` 文件夹下的 `menuRouter.js` 文件，新增一个 `menuRouterFormat` 方法处理菜单数据并将处理后的数据导出，如下： ```js export const menuRouter = [ // ... ] /** * @description 菜单路由数组 format * @param { Array } router 路由数组 * @param { String } parentPath 父级路由 path * @return { Array } */ export const menuRouterFormat = (router, parentPath) => { return router.map(item => { // 拼接路由，例：'devtools' -> '/devtools' 'regular' -> '/devtools/regular' item.path = parentPath ? `${parentPath}/${item.path}` : `/${item.path}` // 存在 children 属性，且 children 数组长度大于 0，开始递归 if (item.children && item.children.length > 0) { item.children = menuRouterFormat(item.children, item.path) } return Object.assign({}, item, item.meta || {}) }) } // 解析后路由菜单列表 export const menuRouterFormatList = menuRouterFormat([...menuRouter]) ``` 在 `src/layout/components` 文件夹下新建 `Menu/index.vue` 文件： ```html ``` 简单说一下上面代码，我们先导入了之前 `menuRouter.js` 中的菜单解析后的数据 `menuRouterFormatList` 对菜单数据进行了一个初始化。再来看模板，我们用到了 `arcoDesign` 组件库的 `a-menu` 组件。 - `accordion` 开启手风琴效果。 - `mode` 属性是设置菜单模式（水平或垂直），我们给它设置成水平即 `horizontal` 。 - `menuItemClick` 子菜单点击时触发，该回调参数为 `key`。 - `selected-keys` 选中的菜单项 `key` 数组。 - *`auto-open-selected` 默认展开选中的菜单。* 这块还是建议看下组件库文档哈。子菜单点击方法中我们直接使用 `router.push` 传入 `key` 跳转路由即可。那对于 `selectedKeys` ，我们直接用计算属性 `computed` 返回了当前路由对象 `route` 中 `path` 属性值组成的数组，这样每次路由改变该方法就会被触发，`selectedKeys` 数组值就会响应式的改变。`key` 值即子菜单的唯一标识，下面我们写子菜单组件时会将每个子菜单的 `key` 设置为菜单对应的路由 `path` 。上面我们用到了一个还没有创建的 `MenuItem` 组件，它其实就是我们的子菜单组件，接下来我们还是在 `src/layout/components/Menu` 文件夹下新建 `MenuItem.vue` 文件，内容如下： ```html ``` 子菜单组件 `MenuItem` 如上，首先，它是一个完全受控组件，就是字面意思，这个组件完全依靠父组件传入的数据，它只做渲染使用，所以叫完全受控组件。我们在 `Menu` 组件中遍历了菜单数据，并给每个子菜单组件传入了一个 `menu` 属性即对应的菜单信息对象。在子菜单中，我们使用 `defineProps` 定义了一个 `menu` 属性，`Vue3` 有个 `toRefs` 方法可以将响应式对象转换成普通对象，但是这个普通对象中的属性会变成一个个响应式属性。正常情况下我们需要使用 `props.menu` 才能调用父组件传入的属性并且该属性是单向传递，也就是我们不能在子组件中修改它，但是我们可以使用 `Vue3` 的 `toRefs` 方法将整个 `props` 对象解构，解构出的每个属性值都是响应式的对象，并且在子组件中直接修改该值可以同步父组件。我们这里使用 `toRefs` 只是为了方便，并没有在子组件去修改父组件传入的值，这里简单提一下可以这样做，算是一个小技巧吧，不然我们想要在子组件修改父组件传入的值，只能先定义一个响应式数据接收传入的值，再在该响应值改变时，`emit` 出去一个事件，那在 `Vue3` 中使用 `emit` 还需要使用 `defineEmits` 去定义一下事件名，还是比较麻烦的，不理解没关系，后面有案例会用到这种方法，到时候还会说！！！ OK，接着说，我们拿到了父组件中传入的 `menu` 对象，接下来看组件模板，首先我们在模板中校验了一下传入的 `menu` 对象中是否存在 `children` 属性。如果不存在 `children` 属性，那它就是一个菜单，我们直接使用 `a-menu-item` 组件写入子菜单并把唯一标识 `key` 设置为 `menu` 对象的 `path` 属性即可（菜单路由），该组件有两个插槽，默认插槽我们写入菜单标题 `menu.title` ，接着校验了一下传入的 `menu` 对象中有没有 `icon` 属性，有的话就在 `icon` 插槽中使用 `component` 直接渲染 `icon` 组件（这里传入的 `icon` 属性值必须为组件对象，其实目前我们只是在带有子级的菜单传入了 `icon` 组件）。如果存在 `children` 属性，那它就是一个带子级的菜单项，我们使用 `a-sub-menu` 组件去渲染它，和之前不一样的是，带子级的菜单组件 `a-sub-menu` 我们直接把菜单标题传入该组件的 `title` 属性就可以了，`icon` 还是一样的操作，**划重点**，那既然是带子级的菜单，我们还需要把它的子级再渲染出来，那它的子级可能还有子级（无限套娃），这里我们只需要递归的调用一下组件自身就可以无限的渲染直到没有子级数据。那 `Vue3` 的递归组件（组件自身调用自身），写法和 `Vue2` 其实也没太大差别，我们这里由于配置了自动引入，所以都不需要引入，直接像在外部调用该组件一样，直接调用自己就行，这里其实涉及到匿名组件和具名组件的问题，我们这个组件是个匿名组件，但是在匿名状态下，我们可以直接将该组件文件名作为组件名调用即可，那如果组件文件名是 `index.vue`，`Vue` 会自动将上层的文件夹名作为组件名调用，注意，仅仅是调用而已，其他的都操作不了，想要通过组件名操作一个组件，还是得具名，`Vue3` 组合式 `API` 组件的具名方法下文有案例会提到，这里不多说。如上代码，还是像父组件 `Menu` 中调用 `MenuItem` 组件一样调用自己调自己就行了，到此我们的菜单组件就写好了。在 `Menu` 组件中还写了一些样式，其实就是简单调整一下组件库中菜单组件的样式，具体样式这里就不多说了，因为会的能看懂，不会的自己跟着实践一下就懂了（太占篇幅）。 OK，写完了使用一下看看效果，把 `Menu` 组件填充到默认布局 `DefaultLayout` 组件下 `Navbar` 组件的中间插槽或者默认插槽中即可： ```html ``` 看下页面效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5ec1dd2c8a48c68eed331041eb28ac~tplv-k3u1fbpfcp-zoom-1.image) 到此默认布局的导航组件就写的差不多了，下面来写下页尾组件！ ### 页尾组件 Footer 页尾区域我们在布局组件中没有设置高度，因为页尾的高度不固定，可能随时会在页尾加个内容啥的，所以就让它随组件内容高度自由撑开吧。。由于页尾需要展示一些个人信息，所以我们统一把这些数据都放在 `config/index.js` 中的基础配置对象里，`Config` 文件内容配置以及使用上文已经说过了，不再描述，这里的数据没什么重要的，不需要脱敏，如需脱敏，可以配合 `env.local` 环境变量配置文件去做，`env.local` 环境变量配置文件默认会被 `git` 忽略，写入该环境变量文件，并在 `config` 文件中引入环境变量即可，关于环境变量的配置也请看上文或者直接看文档 👉🏻 [Vite 中 env 配置文档](https://cn.vitejs.dev/guide/env-and-mode.html#env-files) ```js // ... const configSource = { // ... // 个人配置 me: { name: 'isboyjc', // 公众号 gzhName: '不正经的前端', gzhUrl: 'http://qiniuimages.isboyjc.com/picgo/202210030159449.jpeg', // github github: 'https://github.com/isboyjc' } } ``` 我们在 `src/components` 文件夹下新建 `Footer.vue` 文件，`Footer` 组件比较简单，暂时也没写太多内容，这里我就不会多描述了，直接看代码吧。 ```html ``` 在布局文件中使用一下：在 `DefaultLayout` 默认布局组件中的 `a-layout-footer` 组件标签中使用一下 Footer 组件，同样无需引入直接使用，如下： ```html