Mobile 我的Vue之旅、05 导航栏、登录、注册 _生活百科

第一期 · 使用 Vue 3.1 + TypeScript + Router + Tailwind.css 构建手机底部导航栏、仿B站的登录、注册页面。
代码仓库alicepolice/Vue-05 (github.com)
构建项目新建项目

文章插图
导入bootstrap-icons-vuevue" rel="external nofollow noreferrer">bootstrap-icons-vue - npm (npmjs.com)
导入Tailwindvue-3-vite" rel="external nofollow noreferrer">在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档
安装VSCODE插件

文章插图
构建目录文件

PS C:\Users\小能喵喵喵\Desktop\Vue\Homework\homework2\src> tree /fC:.│App.vue│index.css│main.ts│shims-vue.d.ts│├───assets│3.png│4.png│logo.png│├───components│BottomBar.vue│├───router│index.ts│├───store│index.ts│└───viewsAboutView.vueHomeLoginView.vueHomeView.vueLoginView.vueRegisterView.vue

构建底部导航栏

文章插图
Router

redirect用于访问网站根目录的时候跳转至特定哈希锚点对应的页面

const routes: Array<RouteRecordRaw> = [{path: '/',name: '',redirect: () => {return { name: "home" }}},{path: '/home',name: 'home',component: HomeView},{path: '/login',name: 'login',component: LoginViewVue},{path: '/register',name: 'register',component: RegisterViewVue},{path: '/about',name: 'about',component: AboutViewVue}]

App.vue使用 typescript 语法明确规定了setBottomFlag接收的布尔类型，同时严格规定 vue 应用实例 data 函数返回的对象中变量的类型，即 as 语法。
v-show="bottomFlag" 用于隐藏导航栏，setBottomFlag 由各个 router-view 负责 emit 触发。

<template><router-view @set-bottom-flag="setBottomFlag" /><BottomBar v-show="bottomFlag" :items="bottomItems" /></template><script lang="ts">import { defineComponent } from "vue";import BottomBar from "@/components/BottomBar.vue";type BottomItem = {text: string;icon: string;routerName: string;};export default defineComponent({name: "App",components: {BottomBar,},data() {return {bottomItems: [{ text: "首页", icon: "b-icon-house-heart", routerName: "home" },{ text: "理财", icon: "b-icon-coin", routerName: "about" },{ text: "消息", icon: "b-icon-chat-dots", routerName: "about" },{ text: "我的", icon: "b-icon-person-circle", routerName: "about" },] as BottomItem[],bottomFlag: true as boolean,};},methods: {setBottomFlag(value: boolean): void {this.bottomFlag = value;},},});</script>

BottomBar.vue这里使用了 windtail css 功能性类语法，具体信息可以通过官方文档查到。
在vue3.1中， router-link的tag已经被废除，需要使用插槽的方式。给 router-link 添加 custom v-slot="{ navigate }" 。那么会在 router-link 这个树节点中的子节点搜索绑定了 navigate 方法的事件，并用该子节点标签替换当前 router-link 标签。
custom -> <router-link> 是否不应将其内容包装在 <a> 标记中。
icon的生成使用了动态控件,依赖外部传进去的数组 ->:is

// 来自 App.vue 的数组传递给了当前的 props -> itemsbottomItems: [{ text: "首页", icon: "b-icon-house-heart", routerName: "home" },{ text: "理财", icon: "b-icon-coin", routerName: "about" },{ text: "消息", icon: "b-icon-chat-dots", routerName: "about" },{ text: "我的", icon: "b-icon-person-circle", routerName: "about" },] as BottomItem[],

<template><divclass="box-borderh-16absolutecontainerbg-blue-200bottom-0left-0flex flex-nowrapitems-center"><div v-for="(item, index) in items" :key="index" style="width: 100%"><router-link :to="{ name: item.routerName }" custom v-slot="{ navigate }"><div @click="navigate" class="text-center"><div class="pt-2"><component :is="item.icon" class="m-auto text-2xl" /><div class="text-lg">{{ item.text }}</div></div></div></router-link></div></div></template><script lang="ts">export default {props: {items: Array,},};</script>

修改HomeView.vue在Home页面下默认显示底部导航栏，在挂载的时候通知父组件事件。
this.$emit("set-bottom-flag", true);

<template><div class="text-6xl">主页面 HELLO WORLD</div></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({name: "HomeView",components: {},mounted() {this.$emit("set-bottom-flag", true);},});</script>

构建登录、注册