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>
