网站首页 Vue 正文

vue项目开发中网页小图标修改、封装导航栏详解

作者：小码哥呀更新时间： 2022-04-23 Vue

vue项目开发--网页小图标修改、封装导航栏

1、网页小图标修改
2、首页导航栏封装及使用
- 2.1、新建组件
- 2.2、home首页中使用组件
- 2.3、效果如下

1、网页小图标修改

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

在这里插入图片描述

public文件夹类似springboot中的static文件夹，打包时会原封不动的将public下的文件打包到dist文件夹下
在这里插入图片描述

2、首页导航栏封装及使用

2.1、新建组件

在这里插入图片描述

<template>
  <div class="nav-bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>

<script>
export default {
  name: "NavBar"
}
</script>

<style scoped>
  .nav-bar{
    display: flex;
    height: 44px;
    line-height: 44px;
    text-align: center;
    /*给盒子设置阴影*/
    box-shadow: 0 1px 1px rgba(100,100,100,.1);
  }
  .left, .right{
    width: 60px;
  }
  .center{
    /* flex: 1 表达的是比例，这里只剩下cneter没确定值了，所以它占据的宽度就是全部100%*/
    flex: 1;
  }
</style>

2.2、home首页中使用组件

在这里插入图片描述

<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
  </div>
</template>

<script>
  import NavBar from '@/components/common/navbar/NavBar'
  export default {
    name: "Home",
    components:{
      NavBar
    }
  }
</script>

<style scoped>
  .home-nav{
    background-color: var(--color-tint);
    color: #fff;
  }
</style>

2.3、效果如下

在这里插入图片描述

原文链接：https://blog.csdn.net/qq_46112274/article/details/123789576

上一篇：vue传参params和data的区别
下一篇：关于Vuex的几个核心概念state、getters、mut

网站首页 Vue 正文

vue项目开发中网页小图标修改、封装导航栏详解

vue项目开发--网页小图标修改、封装导航栏

1、网页小图标修改

2、首页导航栏封装及使用

2.1、新建组件

2.2、home首页中使用组件

2.3、效果如下

相关推荐