保姆级Vue3+Vite项目实战多布局（上）

写在前面

本文为 Vue3+Vite 项目实战系列教程文章第二篇，系列文章建议从头观看效果更佳，大家可关注 Vue3 实战系列 防走失！点个赞再看有助于全文完整阅读！

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

上文 这是一份保姆级Vue3+Vite实战教程 中我们主要介绍了 Vue3+Vite 项目的搭建以及项目上的一些配置，当然后续在开发过程中如果有需要也会陆陆续续的补充一些配置。

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