前端实战项目:前端框架Vue3.0项目教程（二）Vue3.0医学项目选项卡Tab的实现

前端实战项目

_框架Vue3.0项目教程（二）Vue3.0医学项目选项卡Tab的实现

对于一个移动端的应用而言，大部分的界面都包含有选项卡、列表及轮播等前端技术手段的存在，这里就从前端的选项卡入手进行Vue3.0项目的开发，使用的工具采用vscode，工具的使用比较简单，这里就不再叙述了。

一、构建基于Vue组件开发的选项卡Tab.vue

---

依据Vue开发组件的模板要求，必须提供<template>、<script>和</style>三个部分。<template>负责的是页面的布局部分，<script>负责的是script的代码部分，<style>负责的是样式部分。

对于选项卡来说，首先根据选项卡的样子构建<template>模块中的具体布局，如下图所示的具体选项卡的样子。

从图中可以看出选项卡一般由文字、链接构成，当前文字点击后样式发生变化的特点。在Vue3.0的选项卡布局上，<template>模板内可以用一个div，定义其类选择器为class=”tab“，这个tab可以根据移动端的大小设置弹性盒子，<div>标签包含的元素是文字构成的链接，在Vue3.0中可以使用router-link路由链接标签，路由链接可以在编译时转换成html中的a标签，其类别选择器可以定义一个tab-item，目的是使用flex:1协助导航平分移动端屏幕布局。router-link路由链接标签中有to属性绑定到一个含有子路由的命名路由上，router-link路由链接标签中有key属性绑定到每个节点做一个唯一标识。设置了router-link的内容相当于在编译时设置a标签的内容，才能实现内容的路由链接。内部部分可以用span标签包围文字达到目的。这样，template模板中的代码内容如下。

<template>
    <div class="tab">
        <router-link
            class="tab-item"
            v-for="tab in tabs"
            :key="tab.path"
            :to="tab.path">
            <span class="tab-link">
                {{tab.name}}
            </span>
        </router-link>

    </div>
</template>

代码中router-link标签中有一个“:to”绑定属性，由于每一个导航内容都要导航到具体内容中，”tab.path”体现了在Vue3.0的data()方法中返回json数据，数据中有一个tabs的键值数组，数组中的每一个tab值中path路径是具体路由的路径，<span>标签括起来的内容部分包含有数组tabs中每一个tab值中name对应的名字。router-link路由链接标签中的v-for属性作用是将遍历数组tabs中的每一个子项的值，这个子项的值就是tab。根据<template>布局中的特点决定了script标签中需要提供一个选项卡的数组数据，代码如下。

<script>
    export default{
        name:'tab',
        data(){
            return{
                tabs:[
                    {
                        name:'商城',
                        path:'/shop'
                    },
                    {
                        name:'问诊',
                        path:'/inquiry'
                    },
                    {
                        name:'健康',
                        path:'/healthy'
                    },
                    {
                        name:'搜索',
                        path:'/search'
                    }
                ]
            }
        }
    }
</script>

代码中定义了一个由“商城”、“问诊”、“健康”、“搜索”四个导航项组成的选项卡数据，选项卡名字属性键name和选项卡路由路径选项卡path构成了json数组tabs。Vue3.0尽写script部分，一般首先使用export default{}这是在复用组件的时候用到的。假设写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用import/export 语法 ，这属于ES6的语法，在文件 A 中定义输出接口 export ，在文件 B 中引入 import ，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

接下来就需要定义页面中导航选项卡的样式，前面对选项卡说明的时候提到过，最外层div可以使用class=”tab”引用弹性盒子的样式，display:flex语句可以声明一个弹性盒子。Height属性表明了选项卡的高度，line-height做选项卡的行距样式，如果line-height属性与height属性的值相同的话，可以达到文字垂直居中的效果。font-size属性可以定义导航中的文字大小。选项卡中的每一个选项文字可以使用class=”tab-item”来定义其样式，flex:1表示根据选项卡中选项的个数平分屏幕中的选项，文字的水平居中可以使用text-align属性，对于每一个链接需要定义.tab-link类和链接类被激活时的.tab-link-active类。选项卡每一项选项文字一般在正常时候是一个文字颜色，发生鼠标点击和导标经过时也需要定义一个文字颜色，color属性作用在.tab-link类和链接被激活tab-link-active类，再根据具体需求定义文字的显示位置和边框特点，具体的定义代码如下所示。

<style lang="scss" scoped>
    .tab{
        display:flex;
        height:44px;
        line-height:44px;
        font-size: $font-size-medium;
        .tab-item{
            flex:1;
            text-align:center;
        }
        .tab-link{
            padding-bottom:5px;
            color: $color-text-l;
        }
        .router-link-active{
            .tab-link{
                color:$color-theme;
                border-bottom:2px solid $color-theme;
            }
        }
    }
</style>

代码中style部分lang=”scss”指示了CSS采用SCSS样式来定义样式，在定义的样式语句中color−text−l和color−text−l和font-size-medium这两个数值采用了$定义的变量，这样的定义内容是SCSS所特有的。具体定义变量的内容文件可以放在assets目录下建立一个scss文件夹，在这个文件夹中添加文件variable.scss变量文件，其中定义一些SCSS变量名，这些变量名在文件中用到，或在未来的使用中用到，文件内容如下。

//颜色定义规范
$color-background:#222;
$color-background-d:rgba(0,0,0,0.3);
$color-highligh-background:#333;
$color-dialog-background:#666;
$color-theme:#ffcd32;
$color-theme-d:rgba(255,205,49,0.5);
$color-sub-theme:#d93f30;
$color-text:#fff;
$color-text-d:rgba(255,255,255,0.3);
$color-text-l:rgba(255, 255, 255, 1);
$color-text-ll:rgba(7, 6, 6, 0.8);
//文字定义规范
$font-size-small-s:10px;
$font-size-small:12px;
$font-size-medium:14px;
$font-size-medium-x:16px;
$font-size-large:18px;
$font-size-large-x:22px;

文件内容设置结束后，在具体的vue的Tab组件中没有得到使用，如果需要使用，就必须添加一个vue.config.js文件，这个vue.config.js文件起到了Vue内容配置作用。可以设置vue.config.js中使用module.exports模块导出作用，将css作为module其中一个模块，loaderOptions表明CSS加载的解析器的具体内容，scss就是此项目加载的CSS预解析器。在scss中指明项目以预加载的scss自定义文件，具体代码内容如下。

module.exports={
    css:{
        loaderOptions:{
            scss:{
                prependData:`
                @import "@/assets/scss/variable.scss";
                `
            }
        }
    }
}

代码中使用@import 的方式引入外部CSS文件，会绕开我们设置的 scoped 也就是只在当前页面生效，所以这里我在这个页面@import 引入的 variable.css 实际上是应用到全局中去了。

二、选项卡组件Tab中路由文件的设置

---

前面设置了选项卡组件，最终选项卡中的每一项需要路由到具体的地址页面中去，这是由Vue的vue-router路由功能实现的，路由功能由vue脚手架产生项目的router文件夹index.js文件中。在index.js由定义常量的标识符const定义routes变量，其包括的内容是多种路由路径组成的数组，数组中的每一项path指明具体的路由路径，此路由必须与Tab.vue中数据tabs数组中的每一项路径是一致的，如下图所示。

设置了具体路径后，还需要设置导航路径指定的组件，routes变量中的component即指定了具体的组件类，这里在views文件夹中定义“商城”导航路由地址”/shop”对应的组件Shop，“问诊”路由地址导航”/inquiry”对应的组件Inquiry，“健康”导航路由地址“/healthy“对应的组件Healthy，“搜索”导航路由地址“/search”对应的组件Search。

以上四个组件的具体代码分别列举如下。

shop.vue代码:

<template>
    <div class='shop'>
        商城页面
    </div>
</template>
<script>
    export default{
        name:"shop"
    }
</script>
<style lang='scss' scoped>
</style>

由于代码比较简单，在template中使用div标签，定义shop类别选择器，其中包括的文本“商城页面”，在script中使用export default标识符，将此组件导出供外部调用。

inquiry.vue代码：

<template>
    <div class="inquiry">
       问诊页面
    </div>
</template>
<script>
    export default{
        name:"inquiry"
    }
</script>
<style lang="scss" scoped>
</style>

代码在原理上与“商城页面”相同，只不过显示的内容是“问诊页面”。

healthy.vue代码：

<template>
    <div class="healthy">
        健康页面
    </div>
</template>
<script>
    export default{
        name:"healthy"
    }
</script>
<style lang="scss" scoped>
</style>

代码在原理上与“商城页面”相同，只不过显示的内容是“健康页面”。

search.vue代码：

<template>
    <div class="search">
        搜索页面
    </div>
</template>
<script>
    export default{
        name:"search"
    }
</script>
<style lang="scss" scoped>
</style>

代码在原理上与“商城页面”相同，只不过显示的内容是“搜索页面”。

以上四个组件的文件建立成功后，将router文件夹下的index.js文件中导入四个组件，在const常量标识符指定的routes常量中定义数组，在数组中的每一项添加component组件的指示项，不同的path对应不同的component，具体的index.js中的代码如下。

import { createRouter, createWebHashHistory } from 'vue-router'
import Shop from '@/views/shop'
import Inquiry from '@/views/inquiry'
import Healthy from "@/views/healthy"
import Search from "@/views/search"
const routes = [
  {
    path: '/shop',
    component: Shop
  },
  {
    path: '/inquiry',
    component: Inquiry
  },
  {
    path: '/healthy',
    component: Healthy
  },
  {
    path: '/search',
    component: Search
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

三、App.vue中使用选项卡组件Tab.vue

---

通过前面的步骤，Tab.vue组件已定义结束，其具体的使用可以在App.vue中导入后，Tab.vue选项卡组件导入后，需要在script代码部分export default导出部分定义component组件的使用，在components中使用Tab组件。这样就可以直接在<template>中使用tab，同时点击tab选项卡时还需要路由到不同的页面，这里就需要使用<router-view></router-view>的路由视图来搞定这样的事情，这样，App.vue中代码如下。

<template>
  <tab></tab>
  <router-view></router-view>
</template>
<script>
import Tab from '@/components/tab/tab'

export default {
  components:{
    Tab
  }
}
</script>

<style lang="scss" scoped>

</style>

在运行程序，如果出现eslint的错误，可以在项目目录文件夹下添加文件.eslintignore文件，内容指定文件的扩展名即可，.eslintignore文件内容如下。

*.vue
*.js

最后，就执行命令来运行这个vue项目，执行命令如下。

npm run serve

通过上面的命令，最终运行后，在浏览器中的结果如下图所示。

至此，使用vue3.0就完成了移动端的选项卡功能

四、git命令将项目上传到github中

---

使用cd进入项目的目录中，然后首先使用下面的命令将所有的文件加到暂存区中。

git add .

接下来把暂存区中的操作提交到本地仓库中。

git commit –m “项目中的tab选项卡”

再次，创建远程仓库的分支。使用如下命令。

git remote add origin github项目的具体链接地址

如果是第一次上传项目，使用如下命令将项目上传到github中。

git  push  -u origin master

最终，项目上传到github的master分支中。如下图所示。

代码地址：https://github.com/wawacode/myvue3demo/tree/master