Vue3+Vite+Vant-UI 开发双端招聘APP

download：https://www.666xit.com/4162/

本文为 Vue3+Vite 项目实战系列教程文章第二篇，系列文章建议从头观看作用更佳，咱们可重视专栏防走失！点个赞再看有助于全文完整阅览！

此系列文章首要运用到的首要技能站栈为 Vue3+Vite，那既然是 Vue3，状态库咱们运用的是 Pinia 而不是 Vuex，在写法上也肯定是以 CompositionAPI 为主而不是 OptionsAPI，组件库方面咱们运用的是 ArcoDesign （赶忙丢掉 ElementUI 吧！）。

上文 这是一份保姆级Vue3+Vite实战教程 中咱们首要介绍了 Vue3+Vite 项目的搭建以及项目上的一些装备，当然后续在开发过程中假设有需求也会陆陆续续的补充一些装备。

本文咱们终于要开端写代码了，但其实仍旧仍是在为项目做准备，因为此文的中心是项目的多布局实战，先把页面布局搭建好，随后再开端写项目，这也是项目开发中必不可少的一环，当然重要的仍是写代码过程中的细节以及小技巧，新同学能够跟着码一遍，老同学能够快速阅览一遍看有没有什么用得上的实战小技巧。

项目 GitHub 地址[1]

假设咱们不想从头来过能够直接下载截止到上文内容的代码， toolsdog tag v0.0.1-dev[2] ！

代码拉下来之后，npm install || pnpm install 下载依赖，然后 npm run serve || pnpm serve 发动，假设全部没问题的话，当前项目运转起来是这样的：

「PS：」在开端写代码之前，你需求简单看下 Vue3 官方文档，去了解一下根底 API，这很重要！！！

OK，接下来开端本文内容！

项目多布局思路

你想要的多布局是哪种？

咱们平常所说的多布局比较笼统，细心分来其实有两种需求多布局的场景，咱们能够自行匹配一下：

• 项目有许多页面，有些页面是相同的布局，但还有些页面是另外一种布局，所以咱们需求多种布局提供给不同的页面。

• 项目有许多页面，页面都是一致的布局，可是咱们需求提供多种能够自由切换的布局，让用户在出产环境自己去选择。

多页面不同布局

假设你只是需求在不同的页面运用不同的布局，那么很简单。

因为你只需求写多个不同的布局组件，然后运用二级路由经过指定父级路由的 component 就能够决议采用哪个布局，如下：

假设咱们有 2 个布局：

// layout 1Layout1.vue// layout 2Layout2.vue

页面 page_a 想要运用 Layout1 布局，页面 page_b 想要运用 Layout2 布局，那么只需在装备路由时如下：

{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 特点去动态的烘托布局组件就能够了，如下：

然后，咱们直接在父路由中引进此页面，就能够经过改变状态来动态切换所有的子路由布局了，如下：

{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，内容和上面所写的差不多，如下：

component 组件咱们暂且注释，因为现在还没有布局组件。

接下来咱们创立两个布局组件，因为咱们要把这两种布局的选择权交给用户，所以咱们在 layout 文件夹下新建一个 switch 文件夹，把能够切换的这两个布局组件放到里面一致管理下。

创立可切换的默认布局文件：layout/switch/DefaultLayout.vue

DefaultLayout

创立可切换的边栏布局文件：layout/switch/SidebarLayout.vue

SidebarLayout

这两个布局的预期如下：

其实就是两种很一般很常见的布局，一种是有侧边栏的 SidebarLayout（ 下文叫它边栏布局）、一种无侧边栏的 DefaultLayout（下文叫它默认布局），咱们先了解下要写的样子即可。

OK，接下来咱们先完善两种布局然后再写动态切换。

默认布局组件 DefaultLayout

上面咱们现已创立好了 DefaultLayout 组件，那先来把它用上。

修正一下 DefaultLayout 组件，如下：

DefaultLayout

然后直接在 SwitchIndex 组件引进运用这个布局，上文中咱们虽然装备了组件主动引进，可是并没有装备 layout 目录，所以 layout 文件夹下的组件是不会被主动引进的，那咱们还需求现在 vite.config.js 装备文件中把 layout 目录加上，如下：

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 布局组件了，咱们写的组件是匿名组件，默认组件名即文件名，如下：

然后，咱们需求修正下路由文件 router/index.js ，把 SwitchIndex 组件作为一级路由组件，那此路由下的所有子路由就都能够运用咱们的布局了：

routes: [{path: '/',name: 'Layout',component: () => import('@/layout/SwitchIndex.vue'),redirect: '/',children: [{path: '/',name: 'HomePage',meta: {title: 'TOOLSDOG'},component: () => import('@/views/HomePage.vue')}]}]

保存看页面：

假设你的运转作用也同上，那就现已用上了布局组件，到此都是 OK 的，接下来就能够调整布局 UI 样式了！