在之前组件间通信的时候提到过，可以用一个类似中介一样的东西收集和保存所有状态，让所有的组件通用。如果在Vue之外定义一个对象，然后在Vue中引用对象，这个对象也会变成响应式的。 在简单的应用中，一般就使用简单的一个对象集中存储一下数据即可，比如一个全局变量。但是在复杂的应用里，就需要用一个东西来集中
后端的路由就是URL与对应页面的映射关系，从用户的角度来说，就是不同的URL地址对应不同的页面展示。前端路由就是把这块工作放到前端来，不同的URL对应不同的前端渲染的页面。 现在的前端路由一般都采用HTML5的History模式了，即可以真正的切换URL，而不向过去一样采用锚点。 Vue官方提供了路
前端工程化之后，如果写Vue，就要搭建Vue工程项目。目前搭建工程项目有两种方法，一是采用Webpack自行搭建环境然后引入Vue，二是使用Vue-cil。 这里先用Webpack实验一下。 Webpack基础环境+Vue相关Loader配置 单文件组件 Vue CLI搭建工程 通过WebStorm
发现虽然前端的东西比较杂乱，但是使用Webpack搭建项目，不写特定的很复杂的配置，只是创建一个单页面应用的开发环境，按照官方文档来，倒也很简单。 Babel 7 与配置 PostCSS与配置 总结Webpack配置 安装Babel 7 一套东西：webpack 4.x | babel-loader
在上一章还是使用Gulp来启动Webpack的任务，在这一章发现这个教程的很多地方都过期了，尤其是Webpack+Babel的地方。 而且Webpack现在越来越流行，因此这一章开始转向使用Webpack来构建工作流。 Babel做的事情，就像PostCss对CSS做的事情，用一些浏览器并不能解析组
在搞定了CSS工作流之后，前端三剑客还有一个重要的JavaScript也需要工作流。 安装Webpack 为项目配置Webpack export与import Webpack自动监听文件改变 异常处理 安装Webpack 很久以来，JS都是像脚本一样随写随用，开发比较随意，因为没有很工程化的东西。
Icon Sprites Gulp配置字体精灵任务 拼合字体精灵文件到样式文件中 使用字体 Gulp执行一系列任务 Icon Sprites 我们的页面里使用了很多图标文件，每个图标文件都是一个svg文件。页面在加载的时候，如果图标文件有很多，会一个个加载，比较慢，因为切换下载不同的文件也有开销。
页面两侧适当留白，不能太空 图片可以考虑显示为块级元素 各个大区域内留白 our-begging区域详细调整 两列浮动显示 WebStorm支持PostCss格式文件 适当留白 一般页面即使背景伸展到整个页面的宽度，其内容一般也聚焦在中心，这是由于人在阅读的时候，如果一行太长需要转头，体验就会较差。
移动端优先开发在不同的语境下有着不同的含义，学习一下如何将这个例子按照移动优先开发的原则，编写移动端优先的CSS样式。 移动端开发的核心就是，页面必须适合所浏览该页面的设备。在最早的时候可能是先开发PC端，然后是移动端，但随时开发实践经验的不断总结，以及移动端设备的发展，现在的开发，一般都是从小尺寸
每次更改完样式，需要手工刷新页面才行，如果用过Bracket等开发工具的会知道，有一个功能是动态展示，只要保存，就会自动更新页面显示，Gulp通过Browsersync这个插件也可以实现该功能。 安装Browsersync和修改Gulp任务 WebStorm中配置项目 结构化Gulp任务文件 处理G
