使用vue完成导航栏组件的开发,
导航栏设计思路:
给导航栏设置1400px,然后让其居中放置,里面放两个第容器,一个放名字,另外一个导航栏选项,然后设置两个分别向两端对齐,给导航栏选项设置flex布局,默认横向排列,然后自己以及导航栏选项设置高度即可。
<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>
* {
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
}
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
先在组件文件下创建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,
})
然后运行即可