Vue3+TS从零到一开发通用组件—导航栏(案例详细流程，含源码)

---

前言

Vue3+TS是目前前端vue开发的趋势，Vue3相对2来说有更好的响应式，函数式，模板编译优化等等，Ts是js的超集，可读性和维护性更高。这篇文章教大家如何从零到一利用Vue3+TS开发一个通用组件——导航栏，前端ui使用的是bootstrap框架，先来看一下实现的效果：
未登录状态：

登录状态：

---

一、准备工作

这里就默认你们电脑装了Vue以及Ts （不会的点我）,然后创建一个Vue3+TS的项目
在项目中输入指令安装bootstrap，输入 npm install bootstrap 即可

二、开始整活

1.创建组件

在components文件夹下新建一个名为GlobalHeader.vue的文件，那么下面我们就要在里面定义我们使用的组件。

样式部分

先来写页面样式的部分，这里使用bootstrap，所以非常方便，我们直接从官网搬一个导航条样式（bootstrap）
这里大家应该没什么问题，利用 ul 的 v-if 和 v-else 进行判断，如果登录状态为true则显示XX你好，false则显示登录和注册。

<template >
  <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
    <a class="navbar-brand" href="#">导航栏</a>
    <ul v-if="!user.isLogin" class="list-inline mb-0">
      <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">登陆</a></li>
      <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">注册</a></li>
    </ul>
    <ul v-else class="list-inline mb-0">
      <li class="list-inline-item">
        <a href="#" class="btn btn-outline-light my-2">你好 {
   
   {user.name}}</a>
      </li>
    </ul>
  </nav>
</template>

TS部分

1. 先定义一个interface接口UserProps,在里面写我们所需要的属性以及它的类型。属性名后面加？，代表可选项

export interface UserProps {
    
    
  isLogin: boolean,
  name?: string,
  id?: number
}

2. 然后定义组件的props，下面有一个user属性，它的type我们把它指定为上面的UserProps类型，所以这里要使用泛型进行指定，别忘了上面进行导入PropType。required: true代表这项必传

export default defineComponent({
    
    
 name: 'GlobalHeader',
 props: {
    
    
   user: {
    
    
     type: Object as PropType<UserProps>,
     required: true
   }
 }
})

2.注册组件使用

1. 导入bootstrap和自定义组件
2. 创建测试数据

const currentUser: UserProps = {
    
    
  isLogin: true,
  name: '大兄弟'
}

3.最后把数据加入到模板中

export default defineComponent({
    
    
  name: 'App',
  components: {
    
    
    GlobalHeader
  },
  setup() {
    
    
    return {
    
    
      currentUser
    }
  }
})

总结

自定义一个简单的导航栏组件，启到巩固Vue3+TS 基础的作用，熟悉自定义组件的开发流程。下面附上完整代码

GlobalHeader.vue：

<template >
  <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
    <a class="navbar-brand" href="#">导航栏</a>
    <ul v-if="!user.isLogin" class="list-inline mb-0">
      <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">登陆</a></li>
      <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">注册</a></li>
    </ul>
    <ul v-else class="list-inline mb-0">
      <li class="list-inline-item">
        <a href="#" class="btn btn-outline-light my-2">你好 {
    
    {
    
    user.name}}</a>
      </li>
    </ul>
  </nav>
</template>
<script lang="ts">
import {
    
     defineComponent, PropType } from 'vue'

export interface UserProps {
    
    
  isLogin: boolean,
  name?: string,
  id?: number
}
export default defineComponent({
    
    
  name: 'GlobalHeader',
  props: {
    
    
    user: {
    
    
      type: Object as PropType<UserProps>,
      required: true
    }
  }
})
</script>

App.vue:

<template>
  <div class="container">
    <global-header :user="currentUser"></global-header>
  </div>
</template>

<script lang="ts">
import {
    
     defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import GlobalHeader, {
    
     UserProps } from './components/GlobalHeader.vue'
const currentUser: UserProps = {
    
    
  isLogin: true,
  name: '大兄弟'
}
export default defineComponent({
    
    
  name: 'App',
  components: {
    
    
    GlobalHeader
  },
  setup() {
    
    
    return {
    
    
      currentUser
    }
  }
})
</script>

<style>
</style>