第6章 Vue 项目预热

                                    项目代码介绍

package.json:很多的依赖包，开发项目的时候有第三方模块的依赖
package-lock.json：package的锁文件，安装包的版本
LICENSE：开元协议的说明
index.html：首页的模本文件
.postcssrc.js：postcssrc的配置项
.gitignore：特殊的文件不想传git可以配置在这个文件里面，往git仓库提交代码的时候不提交上去
.eslintrc.js：配置代码的规范
.eslintignore：设置不检测代码规范的文件
.editorconfig：配置编辑器的语法，比如缩进
build：webpack配置文件
config：开发环境和线上环境
node_modules：项目的依赖
src：源代码放置目录
static：静态资源
.babelrc：babelrc的编译

├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // 图片资源
│ ├── common // 公共的css js 资源
│ ├── components // 各种组件
│ ├── App.vue // 主页面
│ ├── vuex // vuex状态管理器
│ ├── router.js // 路由配置器
│ └── main.js // Webpack 预编译入口

                                    单文件组件与Vue中的路由

路由：根据网址的不同，返回不同的内容给用户。
每一个以 后缀为vue结尾的文件都是单文件组件，里面放的是组件

                                    单页应用VS多页应用

image.png
image.png

                                    项目代码初始化

1、在index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
加上这几个属性说明不能用手指放大缩小：minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
在assets文件下建styles文件夹，放入reset.css，border.css
2、reset.css：重置页面的样式表，在不同的手机浏览器默认的样式是不一样的，需要把不同手机的初始化做统一。
border.css：1px边框问题，有的手机分辨率高，二倍屏，三倍屏
在入口文件main.js引用

import './assets/styles/reset.css'   
import './assets/styles/border.css'

3、fastclick库：解决点击300毫秒延迟(使用click的时候会出现)。切换到Travel目录，输入命令: npm install fastclick --save ，然后在main.js导入，import fastclick from 'fastclick'，fastclick.attach(document.body)

iconfont地址：http://iconfont.cn/manage/index?spm=a313x.7781069.1998910419.11&manage_type=myprojects&projectId=684738&keyword=