逐浪同行 - 前端主页布局

一、顶部导航栏 NavBar

1. 删除多余内容

• 使用 Vue 脚手架进行项目初始化的时候，自动生成了主页，现在进行我们的项目开发，先把没用的东西都删掉

2. 创建基础复用组件

• TabBar、NavBar 等组件在多个页面都会用到，可以抽象出一个通用的布局，其他页面引用这个组件就好了，减少重复代码

3. 引入顶部导航栏组件 NavBar

• 参考官方文档：NavBar 导航栏 - Vant 3 (gitee.io)
• 在  中添加以下代码

• 在  中添加以下代码

在 中加入 setup，即 （vue 3 的语法糖），可以不用通过 return 就能直接将 script 中定义的变量暴露给 template

• 修改“返回”和“search 图标”绑定的单击事件，改为 alert("左") 和 alert("右") 作为测试使用

• 使用插槽：可以通过插槽自定义导航栏两侧的内容。

        插槽（slot）是一种组件化的技术，用于在父组件中定义子组件的内容。插槽允许父组件将任意内容插入到子组件的特定位置，从而实现了更灵活和可复用的组件设计。

        简单来说，插槽可以看作是一种占位符，用于指定子组件中某个特定区域的内容由父组件决定。通过使用插槽，我们可以在父组件中定义子组件的结构和布局，并允许父组件根据需要传递不同的内容给子组件。

        在 Vue 中，父组件通过在子组件标签内部添加具体的内容来填充插槽。子组件中使用 标签来表示插槽的位置。当父组件渲染时，插槽中的内容会被替换为父组件传递的具体内容。

        插槽还可以具有默认值，即在父组件没有提供内容时显示的默认内容。这可以通过在 标签中添加默认内容来实现。

4. 在 App.vue 中引入我们写好的 BasicLayout.vue 这个组件

•  App.vue 是一个页面显示的大组件，可以看成页面只会显示这个大组件，其他的小组件都要添加到这个大组件中才会显示出来，这个大组件可以容纳很多个小组件。
• 页面切换时实际上并没有切换页面，渲染的还是 App.vue 这个大组件，但是里面的内容变了，因为放在里面的小组件切换了，所以页面展示出了不同的布局

// App.vue 文件

5. 在 main.ts 中引入 NavBar 组件（就像引入之前的 Button 组件一样）

• 因为之前前端初始化时引入组件使用的是【方式二：按需引入组件样式】，现在需要用到 NavBar 就要引入在 main.ts 中按需引入这个组件，还有图标组件 Icon

app.use(NavBar);// 顶部导航栏组件

6. 查看页面效果

二、底部标签栏 Tabbar

• 参考官方文档：Tabbar 标签栏 - Vant 3 (gitee.io)

1. 在 BasicLayout.vue 文件中添加以下代码并为自己的项目个性化定制需要的标签

这里选择一个功能多一点的，可以监听切换事件的 Tabbar

  标签
  标签
  标签
  标签

2. 在 main.ts 文件中引入 Tabbar 组件

app.use(Tabbar);// 底部标签栏

3. 查看页面效果

三、页面主体组件

1. 新建一个 pages 目录，存放主体内容组件 Index.vue 和 Team.vue

• 写入几个文字作为测试

2. 在 BasicLayout.vue 组件中引入这两个组件进行测试

• 这里模拟了路由的效果，通过监听标签栏来切换到不同的组件，使得主体部分展示不同的内容
• active 绑定了标签栏正在活跃的 name 属性，当前所处的标签页切换时，active 的值就会变化，通过 v-if 来展现不同的子组件

3. 查看页面效果