针对于一个页面需要的基础功能，导航条和侧边栏是必不可少的，导航条有多种应用，如跳转其他页面，构建和其他页面的联系，定位页内的内容（锚点）等。而侧边栏，如果不是作为导航条的作用的话，多为适配相应的功能，常见的像Hbuilder、VScode的左侧可以进行文件的选择、导入，插件的安装、使用等功能，在Vue3中，想实现类似的功能我优先想法是像导航条一样，左浮动、可选择相应项目，选择一栏会有相应的内容出现。
使用antd的组件发现，导航条包含的内容仅有：顶部、内嵌、针对内嵌的缩起展开、只展开当前父级、子菜单弹出、单文件递归的演示。这很明显并不符合我所要达到的预期效果。于是放弃并寻找另一种方法。
早期在学校学bootstrap的设计和组件的时候，曾学过选项卡这一UI,效果如下图1、图2
图1
图2
可以看到，选项卡完全符合我的需求，只需要他是垂直显示的就可以了！但问题是，我们需要用的是antd，而不是使用bootstrap，在一开始我并没有在antd中找到我所需要的“选项卡”，所以设想是不是自己直接设计也可以实现我的需求，或许自己编写的还更能符合我的预期，所以经过网络的一番学习和思考，我参照其他人的垂直导航条的思路写出了如下的代码：
<div class="tabcontainer">
<div class="left-box"><ul>
<li class="active">11111</li>
<li>22222</li>
</ul></div>
<div class="border-box"></div>
<div class="right-box">
<div class="rb active"><p>1111111</p></div>
<div class="rb"><p>222222</p></div>
</div>
</div>
省略部分样式仅展示主要样式及js功能如下设置
.tabcontainer{
width:350px;
max-width: 100vw;
height:490px;
background-color: #fefefe;
overflow:hidden;
display: flex;}
.left-box li{padding: 10px 0;
cursor:pointer;
display: flex;
transition: 0.2s ease-out;
margin-left: -25px;}
.left-box li.active{background-color: #eee;}
.border-box{width: 1px;
background-color: #ddd;}
.right-box{flex: 1;
position: relative;}
.right-box .rb{display: flex;
flex-direction: column;
opacity:0;
transition: 0.3s ease-in-out;}
.right-box .rb.active1{top: 0;opacity: 1;}
let lis=document.querySelectorAll('li'),
rbs=document.querySelectorAll('.rb'),
line=document.querySelector('.line');
lis.forEach((item,index)=>{
item.addEventListener('click',function(){
lis.forEach((item1)=>{
item1.classList.remove('active');
})
rbs.forEach((item2)=>{
item2.classList.remove('active');
})
lis[index].classList.add('active');
rbs[index].classList.add('active');
line.className='line line'+(index+1);
})
})
运行结果长这样：
图3
可以看到整体代码运行时没有问题，单独使用的时候也可以有流畅的动画效果和预期的文段显示与隐藏，所有都很完美，但是
经测试，加上了导航条之后，点击动画一如既往，显示的右侧的内容消失了！在一开始因为有active1的存在还能显示，一旦点击了就会把这一块内容吞掉，只有opacity:0;在运行，而opacity:1;没有任何反应，在几番测试下，发现只要把导航条的内容删掉就可以了！非常的简单！那么，这样就问题解决了吗？并不，我仍旧需要的是导航条与侧边栏共存的情况并且还未测试及使用其他的antd组件和内容是否与其功能冲突，很明显这条路是走不通的，自己设计功能失败，还得考虑其他的办法。
我把目光再次放回到antd上面来，寻求找一个可以直接使用的组件，然后我只需要丢到网页里面就行！一开始目光只限于查找各种导航侧边栏、弹出框、甚至找到了抽屉的组件，以为就此找不到我需要的这种侧边栏才有了前面的操作，于是我一个个的组件开始寻找查看，最终寻找到了属于antd的‘选项卡’——标签页。
从antd的官网可以看到，标签页这个组件非常符合我的预期，能够点击切换显示，有垂直的标签页我可以直接使用（在antd网页中标签页的“位置”那一块找到的内容，有需要的可以去官网查看），达到我想要的效果，直接套用并加以修改和应用到网页中效果如下图4所示:
图4
可以看到组件与组件之间是完美兼容在了一起，没有任何冲突，我运行的成果也有正确的动画与显示，至此，我对于这个网页的第一个问题解决了。我的苦难也结束了，***我花了两天解决这个问题！
下一步将针对侧边栏右半部分插入antd中的树形控件的操作，留到下一篇在进行说明。
注：在参加青训营之前我是vue完全的小白，没有接触过，可以说是以上内容完全自学。除了html、css、js以外是完全没接触过vue，只有学校系统学习过django。
