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、效果如下

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

uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
h5+js调取相机做取景框_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
使用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...
vue项目更改名字和图标
Vue项目开发最后一步:更改项目名称和图标. 没想到这一步卡了我两个多小时. 更改项目名称: 找到index.html打开,修改. 刷新/重新运行项目或者重装node_modules(建议选择第二种) ...
vue项目中的小知识--快捷键-vue插件版本号--vscode插件等
vue项目中的小知识--快捷键等 0 版本号 1 代码片段的获取: 2 vscode中一些常用扩展 3 进入另一个文件夹,返回上一级 4查看Vue的版本和Vue/CLI的版本 5 --save-dev ...
vue项目开发实录--仿去哪儿网App-张鹏-专题视频课程
vue项目开发实录--仿去哪儿网App-160人已学习课程介绍本课程为vue项目开发实录(仿去哪儿网App)其中涉及到知识点有:组件搭建,路由,vuex,axios,webpack ...
【vue】 vue项目开发卡片展示页面----菜品管理
vue项目开发卡片展示页面----菜品管理对话框表单获取父组件数据子组件dishform 对话框表单样式 methods 中的dataInit方法获取父组件传来的数据 <script> ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...

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

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

1、网页小图标修改

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

2.1、新建组件

2.2、home首页中使用组件

2.3、效果如下

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

最新文章

热门文章