Vue项目-2首页开发（header）
目录
1 header区域
2 iconfont使用及代码优化
3 代码优化
1 header区域
stylus安装
stylus-loader安装
出现问题：
在博文加了报错提示中的 legacy-peer-deps 后面添加了解决办法：通过 npm修复上游依赖冲突的方法，请运行命令时使用 --force 选项或启用 --legacy-pe-soup-Jian字段以避免错误
按设计图进行代码编写，页面布局：
<template>
<div class="header">
<div class="header-left"></div>
<div class="header-input"></div>
<div class="header-right"></div>
</div>
</template>HomeHeader.vue尾随空格出错：
1rem=html font-size
在编译过程中出现错误，归因于两个相关的版本号过高。建议卸载旧版本并重新安装较新版本以解决问题。
Tab与空格在Sublime Text 3编辑器中的混用行为会引发Stylus语法上的错误（主要涉及一些缩进相关的问题）。
深入研究了许多相关的文章；但仍未能找到理想的解决方案；最终采用基于CSS的样式编写方式运行正常。
<style lang="stylus" scoped>
.header {
display: flex
height: .86rem
}
</style>line-height作用：
线高线承担了什么功能？
border-radius圆角边框：
详细说明了其border-radius属性的具体应用及其设置技巧
css基本样式：
<style>
.header {
display: flex
line-height: .86rem
background: #00bcd4
color: #fff
}
.header-left {
width: .64rem
float: left
}
.header-input {
flex: 1
height: .64rem
line-height: .64rem
margin-top: .12rem
margin-left: .2rem
background: #fff
border-radius: .1rem
color: #ccc
}
.header-right {
width: 1.24rem
float: right
text-align: center
}
</style>2 iconfont使用及代码优化
创建项目然后把需要用到的图标加入购物车，然后下载到本地。
代码需要用到ttf、woff字体文件及css文件。
在代码中更改iconfont.css文件中各字体文件的引用位置。
然后，在header.vue组件中采用span标签应用图标十六进制代码（来自iconfont官网）。另外一种方式是通过CSS编码实现。
css层级关系
3 代码优化
将重复使用的变量单独做一个文件，提升可维护性。
①将bgColor单独在styles里创建一个varibles.styl文件；
（出现引用路径错误问题，已解决）
在项目目录的build文件夹下的webpack.base.conf.js文件中，在resolve函数所关联的配置项中的别名设置上创建新的别名；接着，在header.vue和main.js文件中依据这些别名进行引用更新。
注意：在调整了websitpack配置参数后，请确保重新启动项目以确保程序正常运行。
git add .后出现问题：
输入git init后重新git add .可正常运行。
git push后出现问题：
按提示添加name和url后仍不能解决，最后按博文：[fatal: refusing to merge unrelated histories解决_天骄山仔的博客-博客]( "fatal: refusing to merge unrelated histories解决_天骄山仔的博客-博客")
后解决。
git push操作完成后本地代码出现错误；操作完成后显示package.json文件有问题；随后进行git clone操作将线上仓库url复制到本地；顺利下载所需依赖后系统得以正常运行。
注：本笔记内容部分整理自慕课网教程。