要使用jQuery組件easyui實現基本布局，你需要引入easyui的CSS和JavaScript文件。然后，可以使用layout組件來創建基本的布局。
下面是一個簡單的示例，展示了如何使用easyui的layout組件創建一個包含頂部、左側導航欄和主內容區域的基本布局：
<!DOCTYPE html><html>
<head>
<title>EasyUI基本布局示例</title>
<!-- 引入easyui的CSS和JavaScript -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.26/themes/default
/easyui.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.26/jquery.easyui.min.js">
</script>
<style>
/* 設置布局容器的高度 */
#layout {
height: 500px;
}
/* 設置主內容區域的樣式 */
#mainContent {
padding: 10px;
}
</style>
<script>
$(function(){
// 創建布局
$('#layout').layout();
// 設置導航欄的寬度
$('#nav').panel({
width: 200
});
});
</script>
</head>
<body>
<div id="layout" class="easyui-layout">
<!-- 頂部區域 -->
<div data-options="region:'north'" style="height:50px">
<!-- 頂部內容 -->
</div>
<!-- 左側導航欄區域 -->
<div id="nav" data-options="region:'west', split:true">
<!-- 導航欄內容 -->
</div>
<!-- 主內容區域 -->
<div id="mainContent" data-options="region:'center'">
<!-- 主內容 -->
</div>
</div>
</body>
</html>
在上面的示例中，我們首先引入了easyui的CSS和JavaScript文件。然后，在頁面中創建一個 div 元素，并為其設置 id="layout" 和 class="easyui-layout"，以便使用easyui的布局組件。
在布局容器內，我們定義了三個子區域：頂部區域、左側導航欄區域和主內容區域。可以根據需要自定義這些區域的樣式和內容。
最后，在JavaScript代碼中，我們調用了 $('#layout').layout() 來初始化布局組件。還使用了 $('#nav').panel() 來設置導航欄的寬度。
請注意，上述示例只是一個簡單的演示，你可以根據自己的需求和樣式來修改布局的結構和樣式。
