学习总结
该项目为VUE框架下的一个项目实践，属于较为基础的实践教程。其中总结了一些比较零碎的知识点，分章节记录。
第六章
- VUE项目的结构。
package.json本项目的一些依赖，package-lock.json 具体版本锁，团队开发使用，.gitignore上传git时忽略的文件，.es~~~代码规范相关可以设置忽略，其他文件夹为项目主要结构，src代码目录，static静态文件，build为webpack打包相关配置，config为基础项目配置文件。 其中static文件夹是唯一一个启动站点后可被直接访问的文件夹。 - 多页面应用和单页面应用。
多页面应用每个页面跳转都会返回html文件。首屏速度快，seo效果好。VUE为单页面应用，路由相关由前端（js渲染）做。优点：不会每次进行请求，页面切换流畅。缺点seo（检索）优化比较差，可由VUE服务器端渲染解决。 - 在创建夜歌项目时，本教程提出使用reset.css（基础样式设定）将浏览器的默认样式进行更改，保证不同浏览器访问时显示相同。直接引用在main.js即可。
- 移动设备存在的1px边框问题（1px的border在移动设备上的显示会变粗），引入写好的border.css进行优化。
- 移动设备中存在click300ms延迟的问题，引入fastclick可以解决，npm安装引用。
第七章
- 复杂页面应该拆分为多个页面组件组合，例如Home文件夹下创建home.vue和components文件夹进行组合。其中需要注意的是：组件化的多个组件编写css的时候应该使用
<style lang="stylus" scoped>限制。 - rem的使用：1rem=html font-size 的大小，页面适配。之后项目中涉及到大小位置的时候均可使用rem单位来控制，修改 html font-size可一并更改。
- stylus
css预处理器，使css代码更简洁，使用缩进取代了了{}和：的使用。支持变量定义和函数操作。例如当项目中多处用到样式时，可以在定义变量，直接引用变量的形式（整段代码亦可）。注意：引用文件时@符号表示src目录，在css代码引用时需要再加~ webpack支持创建别名进行引用，webpack.base.conf中resolve进行修改。 -
页面抖动问题：当网速较慢时出现图片加载慢，加载完成后才把高度撑起来，这样造成下方dom的抖动。
.wrapper overflow: hidden width: 100% height: 0 padding-bottom: 31.25% background: #eee
在dom中高度总是相对于宽度进行31.25%的展开，这样即使图片不加载也会撑开相应的大小。 - 样式穿透： 当我们引用和使用其他组件时，比如swiper插件时，更改它的样式是不能生效的。解决方案：
.wrapper >>> .swiper-pagination-bullet-active，穿透到使用组件的样式名称中进行设置。