vue导航栏组件

一. 内容简介

使用vue完成导航栏组件的开发，
导航栏设计思路：
给导航栏设置1400px，然后让其居中放置，里面放两个第容器，一个放名字，另外一个导航栏选项，然后设置两个分别向两端对齐，给导航栏选项设置flex布局，默认横向排列，然后自己以及导航栏选项设置高度即可。

二. 软件环境

2.1 Visual Studio Code 1.75.0

2.2 chrome浏览器

2.3 node v18.14.0

三.主要流程

3.1 搭建html结构

3.2 添加css样式

3.3 安装node，安装vue

3.4 搭建vue导航栏组件

四.具体步骤

4.1 搭建html结构

<!-- 导航栏 -->
<div appHeader="">
    <!-- 广告位 -->
    <div appHeader="" class="wrap">
        <div appHeader="" class="new-header"></div>
    </div>
    <!-- 导航信息 -->
    <div appHeader="" class="header-bottom">
        <div appHeader="" class="max-width">
            <!-- 导航左边 -->
            <div appHeader="">
                <p appHeader="" class="logo-zh">CA竞赛信息平台</p>
                <p appHeader="" class="logo-en" style="transform: scale(0.8); width: 123%; transform-origin: 0px 0px;">
                    CA competition information platform
                </p>
            </div>
            <!-- 导航右边 -->
            <ul appHeader="" class="nav">
                <li appHeader="" class="nav-box"><a appHeader="" href="/" aria-current="page"
                        class="router-link-exact-active router-link-active">首页</a></li>
                <li appHeader="" class="nav-box"><a appHeader="" href="/" aria-current="page"
                        class="router-link-exact-active router-link-active">咨询通知</a></li>
                <li appHeader="" class="nav-box"><a appHeader="" href="/inen" class="">创新竞赛</a>
                </li>
                <li appHeader="" class="nav-box"><a appHeader="" href="/match" class="">竞赛论坛</a></li>
                <li appHeader="" class="nav-box"><a appHeader="" href="/annual" class="">学习资料</a>
                </li>
                <li appHeader="" class="nav-box"><a appHeader="" href="/download" class="">队伍管理</a></li>
                <li appHeader="" class="nav-box"><a appHeader="" href="/certificate" class="">比赛结果查询</a></li>
                <ul appHeader="" class="hover-none">
                    <li appHeader="" class="newslist"><a appHeader="" href="/policy" class="">政策通知</a></li>
                    <li appHeader="" class="newslist"><a appHeader="" href="/universities" class="">高校动态</a></li>
                    <li appHeader="" class="newslist"><a appHeader="" href="/competition" class="">大赛动态</a></li>
                </ul>
            </ul>
        </div>
    </div>
</div>

4.2 添加css样式

* {
    margin: 0;
    padding: 0;
}
[appHeader] {
    margin: 0;
    padding: 0
}

li[appHeader] {
    list-style: none;
    cursor: pointer
}

.wrap[appHeader] {
    margin: 0 auto;
    background: #222
}

.new-header[appHeader] {
    width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: #fff;
    text-align: end
}

.header-up[appHeader] {
    width: 100%;
    background: #222;
    line-height: 35px
}

.header-bottom1[appHeader],
.header-bottom[appHeader] {
    margin: 0 auto;
    color: #fff;
    background: rgb(43,116,218);
    position: relative;
    z-index: 11
}

.header-bottom1[appHeader] {
    width: 1400px
}

.max-width[appHeader] {
    width: 1400px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

.nav[appHeader] {
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.nav>li[appHeader] {
    width: 110px;
    text-align: center;
    height: 84px;
    line-height: 84px;
    color: #fff
}

a[appHeader] {
    display: block;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none
}

.hover-none[appHeader] {
    visibility: hidden;
    left: 330px;
    box-shadow: 0 2px 5px 1px #ccc
}

.hover-none[appHeader],
.hover-show[appHeader] {
    position: absolute;
    top: 78px;
    background: #fff;
    padding: 10px 0;
    border-top: 4px solid #6badff
}

.hover-show[appHeader] {
    visibility: visible;
    left: 110px;
    box-shadow: 0 4px 8px 1px #ccc
}

.newslist[appHeader] {
    display: block;
    padding: 6px 27px;
    color: #000
}

.newslist a[appHeader] {
    color: #333
}

.newslist a[appHeader]:hover {
    color: #6badff
}

.login-button[appHeader] {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

.login-button>img[appHeader] {
    width: 20px;
    height: 16px;
    margin-right: 5px
}

.nav-box .router-link-exact-active[appHeader] {
    background: #6badff
}

.logo-zh[appHeader] {
    font-family: Microsoft YaHei, 微软雅黑;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 8px
}

.logo-en[appHeader] {
    font-family: Microsoft YaHei, 微软雅黑;
    color: #fff;
    opacity: .8;
    font-size: 12px
}

.nav li:nth-child(2) a[appHeader] {
    background: none
}

4.3 安装node，安装vue

node安装，官网下载安装包一直下一步安装即可（http://nodejs.cn/download/）,安装完成后

node -v

即可查看版本，随后安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后安装vue

cnpm install -g @vue/cli

然后在文件下创建vue项目

创建完成后在目录中运行

npm run serve

4.4 搭建vue导航栏组件

先在组件文件下创建Navbar组件

<template>
<!-- 导航栏 -->
<div appHeader="">
    <!-- 广告位 -->
    <div class="wrap">
        <div class="new-header"></div>
    </div>
    <!-- 导航信息 -->
    <div class="header-bottom">
        <div class="max-width">
            <!-- 导航左边 -->
            <div appHeader="">
                <p class="logo-zh">CA竞赛信息平台</p>
                <p class="logo-en" style="transform: scale(0.8); width: 123%; transform-origin: 0px 0px;">
                    CA competition information platform
                </p>
            </div>
            <!-- 导航右边 -->
            <ul class="nav">
                <li class="nav-box"><a href="/" aria-current="page"
                        class="router-link-exact-active router-link-active">首页</a></li>
                <li class="nav-box"><a href="/" aria-current="page"
                        class="router-link-exact-active router-link-active">咨询通知</a></li>
                <li class="nav-box"><a href="/inen" class="">创新竞赛</a>
                </li>
                <li class="nav-box"><a href="/match" class="">竞赛论坛</a></li>
                <li class="nav-box"><a href="/annual" class="">学习资料</a>
                </li>
                <li class="nav-box"><a href="/download" class="">队伍管理</a></li>
                <li class="nav-box"><a href="/certificate" class="">比赛结果查询</a></li>
                <ul class="hover-none">
                    <li class="newslist"><a href="/policy" class="">政策通知</a></li>
                    <li class="newslist"><a href="/universities" class="">高校动态</a></li>
                    <li class="newslist"><a href="/competition" class="">大赛动态</a></li>
                </ul>
            </ul>
        </div>
    </div>
</div>

</template>

<script>
    export default {
        
    }
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    cursor: pointer
}

.wrap {
    margin: 0 auto;
    background: #222
}

.new-header {
    width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: #fff;
    text-align: end
}

.header-up {
    width: 100%;
    background: #222;
    line-height: 35px
}

.header-bottom1,
.header-bottom {
    margin: 0 auto;
    color: #fff;
    background: rgb(43,116,218);
    position: relative;
    z-index: 11
}

.header-bottom1 {
    width: 1400px
}

.max-width {
    width: 1400px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

.nav {
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.nav>li {
    width: 110px;
    text-align: center;
    height: 84px;
    line-height: 84px;
    color: #fff
}

a {
    display: block;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none
}

.hover-none {
    visibility: hidden;
    left: 330px;
    box-shadow: 0 2px 5px 1px #ccc
}

.hover-none,
.hover-show {
    position: absolute;
    top: 78px;
    background: #fff;
    padding: 10px 0;
    border-top: 4px solid #6badff
}

.hover-show {
    visibility: visible;
    left: 110px;
    box-shadow: 0 4px 8px 1px #ccc
}

.newslist {
    display: block;
    padding: 6px 27px;
    color: #000
}

.newslist a {
    color: #333
}

.newslist a:hover {
    color: #6badff
}

.login-button {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

.login-button>img {
    width: 20px;
    height: 16px;
    margin-right: 5px
}

.nav-box .router-link-exact-active {
    background: #6badff
}

.logo-zh {
    font-family: Microsoft YaHei, 微软雅黑;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 8px
}

.logo-en {
    font-family: Microsoft YaHei, 微软雅黑;
    color: #fff;
    opacity: .8;
    font-size: 12px
}

.nav li:nth-child(2) a {
    background: none
}

</style>

然后在App.vue中引用

<template>
  <div>
    <navbar1></navbar1>
  </div>
</template>

<script>
import Vue from 'vue'
import Navbar1 from './components/Navbar.vue'
  export default {
      components: {
        Navbar1
     }
  }
</script>

五. 错误

将组件添加为全局组件时候

import myuser from './components/u.vue'
Vue.component('my-user',myuser);

这里vue3在导入组件时候，vetur会显示报错，需要进设置里面更改选项，这个可以自己查一下
因为vue3 main.js中没有全局的Vue对象，所以这种方法没办法挂载到全局对象，就一直报错，没法运行。
我就又重新创建一个vue2的项目，重新写了一下组件，写完还是报错，需要以下两个步骤
修改eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    // '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

此时还会报错，需要修改vue.config.js，关闭eslint，不然少打了一个空格，用了双引号而不是单引号，多占用了一个空白行都会报错无法运行。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
})

然后运行即可