# 如何开发自定义布局后台布局 开发自定义布局，需在admin/src/addon/插件/layout文件夹下创建inedx.vue、layout.json的文件。  1、创建一个自定义布局并将其保存到`layout/index.vue`: ``` <template> <div class="min-w-[1200px]"> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-main> <router-view></router-view> </el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container> </div> </template> <script lang="ts" setup></script> <style lang="scss" scoped></style> ```  2、在`layout.json`中定义布局的基本信息 ``` { "layout": "shop", // 布局标识与插件key保持一致 "cover": "/static/resource/images/system/layout_default.png" // 布局缩略图 } ``` 下图为缩略图应用场景，缩略图大小宽高为 178 / 128  3.在admin端打开配置--布局设置--选择插件应用后的设置，选择开发好的布局方式，点击确认，再次进入该单应用的站点布局就会修改成功。