容器布局
将app.vue中的helloworld相关内容注释或删除掉，然后将element-plus提供的布局复制过来放在app.vue中
该布局为左侧菜单栏，右边内容区，右上为顶部，典型的管理后台风格
Header
上述代码中有Menu.vue组件，需要新建，稍后再添加内容
路由定义
在src目录新建routes.js文件，将路由列表写入，方便其它组件使用
const routes = [
{ path: "/home", name: 'home', label: '首页', component: () => import('./components/home.vue'), },
{ path: "/about", name: 'about', label: '关于', component: () => import('./components/about.vue'), },
]
export default routes内容没有什么变化，就是将router.js 中的routes抽出来，单独写一个文件
立即学习“前端免费学习笔记（深入）”；
router.js引入并使用routes
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
})
export default router左侧菜单
在components目录中新建Menu.vue页面，然后将element-plus中菜单组件中Side bar 复制过来。
Default colors
Navigator One Navigator Two Navigator Three Navigator Four
@element-plus/icons-vue 此包需要安装(npm install @element-plus/icons-vue)
element-plus官网中的例子都是ts+setup语法写的，这里我们改成js+响应式语法
列宽改成:span="24"或更大值，列宽太小会发现灰线在字体中间
引入定义的路由列表routes.js,将内容循环到 router-link中
运行效果如下
