## 前言这里讲述我们如何快速利用Vue脚手架快速搭建一个主页。 ## 页面布局 el-container / el-header / el-aside / el-main： ```bash

``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/68838dacc1efa622b105eb7048189709.webp) ## 顶部栏 header ```bash

第一个项目管理 ``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/61852236a571e24892a34244ada5d56e.webp) ## 侧边栏 aside ```bash

系统首页

管理员信息

用户信息

xxx信息

yyy信息

``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/90ebeaf406d78cf733f1358467b3c665.webp) ## 主体结构把它加入到主体结构中 ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/878be3d3a679b1df800e34b317ccde91.webp) 然后再HomeView中写入这个东西 ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/62ff9909118f261cc18be9cefd1f3a02.webp) ## 将菜单切换修改成路由的方式 1.在 el-menu 标签里绑定 default-active 为路由的形式 ```bash :default-active="$route.path" router ``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/4ecd2319a78a149c74e2c41951d189ec.webp) 2.然后将标签里的index属性值设置成对应的路由即可 ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/02040cf9a3cf4e6489694080d796d6f4.webp) 3.在 index.js 里添加对应路由配置，路由和具体的组件相对应： ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/d775bd380e1ba6b7016f3d9d83d2d693.webp) 4.创建对应的组件（AdminView.vue），编写组件页面对应的代码即可 ```bash ``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/166a512ecd5c36f3075c7bf3b230bcc0.webp) 5. 按钮操作 ```bash

编辑

删除

``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/da245ed601b5ce7e1c9d8fc262f606da.webp) 7. 增加搜索框 ```bash

搜索

新增

``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/4e12186c9c269f2dda6115cd83d766b7.webp) 8.表格数据分页 ```bash

``` ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/b7a538c09b0eb886ec612822dd7685a4.webp) ## 最终效果 ![在这里插入图片描述](https://file.jishuzhan.net/article/1766525072756969473/00af0cc27b5932c9b91ba6ff7560438e.webp)