Vue开发去哪儿网App学习笔记（四）项目初始化

（1）设置用户缩放比例

这个项目是要做一个移动端的网页，因此需要提前准备一些事情。打开项目中的index.html，会发现其中已经有了标签的配置,但还需完善，如下图改动代码：

当添加这三个属性后，就实现了移动端设备用户去通过手指放大，缩小这样的操作是无效的，且保证它的页面的比例页始终是一比一。

知识补充：

viewport是html5新增的

viewport具体用法为：使用该meta标签时，在content设置相应的属性，有如下属性：

width：设置layout viewport的宽度，为一个正整数，“width-device”表示设备宽度（layout viewport是指网页的所有内容）

height：设置layout viewport的高度，该属性很少用

initial-scale：设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数

user-scalable：是否允许用户进行缩放，值为“no”或“yes”

（2）引入reset.css——浏览器重置页面的样式表

引入这个文件是为了规避不同浏览器之间的差异问题。浏览器种类很多，而每个浏览器的默认样式也不相同，比如火狐浏览器和IE浏览器中button的默认样式就不相同，而通过引入reset.css这个文件，即可将默认样式统一定义，这样就会在不同的浏览器中呈现相同的页面效果。

reset.css文件请自行下载

下载文件后，怎么应用呢？？？

打开项目，进入src目录下的assets目录，将logo删掉，并重新在该目录下创建新的文件夹styles，将reset.css文件复制过来，接着再打开main.js文件，如图：

这上面我们去import一下，即代表将该文件应用到项目中。

（3）引入border.css——解决移动端一像素边框问题

什么是移动端一像素边框问题呢？？？

有些手机的屏幕分辨率较高，是2倍屏或3倍屏，那css样式中border:1px solid 在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。而为了解决这种多倍屏里面一像素边框会被显示成多像素的问题呢，就需要引入一个border.css。

border.css文件请自行下载

下载文件后，怎么应用呢？？？

打开项目，进入assets中的styles目录， 将border.css文件复制过来，接着再打开main.js文件，如图：

这上面我们去import一下，即代表将该文件应用到项目中。

（4）使用iconfont——对icon进行管理

icon即图标

进入iconfont官网，注册账号并登录：

点击“资源管理”——>“我的项目”

在打开“我的项目”页面中点击“新建项目”

填写项目名称，项目描述，最后点击“新建”即可。

（5）一些“杂七杂八”的修改

1．删掉components目录

2. 在src下建pages目录，在该目录下放置所有网页的集合，再在pages下建一个Home文件夹，建Home.vue，如图：

3.在index.js文件中删除HelloWorld的引入，引入Home.vue组件，并改动下面相应的配置，如图：

到这步，我们项目编写的一个工程的初始化基本上就做完了！！！