page-aside 这个区域里面可以显示应用的边栏，回到项目，先去创建一个边栏组件，放在 src/app/sidebar 这个目录的下面，名字叫 app-sidebar.vue ，在这个文件里定义一个组件 ，名字是 AppSidebar，表示应用的边栏。

打开 layout/components 下面的 page-aside 这个组件，在这个组件里导入刚才创建的 AppSidebar 组件，位置是 @/app/sidebar/app-sidebar 。 在组件的 components 里面，添加一个 AppSidebar 。然后在组件的模板里面，用一下这个 AppSidebar 组件。

在浏览器上预览一下，现在边栏区域的上面会显示 AppSidebar 组件里的内容。 回到继续编辑这个组件。 在组件的这个包装元素上面加上一个类，名字是 app-sidebar。

AppSidebarItemBrand

在边栏组件里面出现的每个边栏项目都可以是一个单独的组件，在这个 sidebar 目录的下面，新建一个组件，放在 components 的下面，名字是 app-sdiebar-item-brand.vue 定义一个组件，名字是 AppSidebarItemBrand，这个组件可以显示应用的标志。

在这个组件的包装元素上，加上两个类，名字是 app-sidebar-item ，每个边栏项目组件的包装元素上都要加上这个类，后面可以再加上一个 brand 。这样我就可以在样式表里专门针对这个边栏项目写一些样式。

在这个组件里要显示应用的标志，先导入标志组件，名字是 AppLogo 位置是 @/app/components/app-logo 。然后在组件的 components 里面要添加一个 AppLogo。这样就可以在组件的模板里使用这个组件了，用一下 AppLogo 。

点击这个应用标志可以打开应用的首页，这里用一组 router-link 组件，用它包装一下这个 AppLogo 组件。 给 router-link 添加一个 to 属性，值设置成 / ，表示应用的根。

使用

打开 app-sidebar 组件，在组件里导入 AppSidebarItemBrand ，位置是当前目录 components 下面的 app-sidebar-item-brand 。在组件的 components 里面，添加一个 AppSidebarItemBrand。 然后在组件的模板里，用一下这个 AppSidebarItemBrand 。 回到浏览器预览一下，现在应用的边栏这个区域的上面会显示应用的标志。

检查一下这个标志元素，观察一下。先是一个 app-sidebar，这是 app-sidebar 组件的包装元素，里面是 app-sidebar-item 加 brand ，这个元素是 app-sidebar-item-brand 组件的包装元素，它里面是一个链接，然后是应用的标志组件里的内容。

AppSidebarItemPopular

下面再去创建两个边栏项目组件，放在 sidebar/components 的下面，名字是 app-sidebar-item-popular.vue 。 在文件里定义一个组件，名字是 AppSidebarItemPopular。这个组件里需要用一个小图标，所以先导入应用里的 AppIcon 组件，位置是 @/app/components/app-icon

在组件的 components 里面，添加一个 AppIcon。 然后处理一下组件的模板，在这个包装元素上加上两个类，一个是 app-sidebar-item 还有一个 popular 。

这个元素里包装的东西是一个小图标， 用一下 AppIcon ，用 name 设置一下需要的图标，这里我们要用的是 local_fire_department 。

使用

打开 app-sidebar，在这个组件里导入刚才创建的 AppSidebarItemPopular， 位置是当前目录 components 下面的 app-sidebar-item-popular。在组件的 components 里面，添加一个 AppSidebarItemPopular 。然后在组件的模板里，用一下这个组件，AppSidebarItemPopular。

在浏览器上预览一下，现在边栏上会出现一个小图标，它就是 AppSidebarItemPopular 这个组件里的内容。

AppSidebarItemAdd

回到项目再创建一个边栏项目组件，复制一份 AppSidebarItemPopular，修改一下名字，app-sidebar-item-add.vue。 打开这个组件文件，改一下名字，AppSidebarItemAdd。 包装元素上加上一个 add 类，去掉这个 popular。 要显示的小图标是 add_a_photo 。

使用

再打开 app-sidebar，导入一个组件，位置是当前目录 components 下面的 app-sidebar-item-add ，名字是 AppSidebarItemAdd。

然后在组件的 components 里面，添加一个 AppSidebarItemAdd 组件。 在组件的模板里再用一下这个组件，AppSidebarItemAdd。

回到浏览器，预览一下，现在边栏上面会有一个添加图片的小图标，它就是 AppSidebarItemAdd 这个组件要显示的东西。