vue 计算屏幕的高度_Vue项目实战系列文章（一）项目预热

配置环境

安装nodejs (https://nodejs.org)

检验：

node -v

npm -v

创建项目

vue init webpack business(目录名称)

项目代码结构

• src 源码
• node_modules 第三方依赖
• config 项目统一配置
• build 项目构建

单文件组件与vue中的路由

项目入口文件：main.js

route:路由就是根据网址的不同，返回不同的内容给用户。

:显示当前路由地址所对应的内容

需求1：项目首页显示home.vue内容

1,创建Home.vue组件，src/pages/home/Home.vue

2,注册Home.vue组件

src/router/index.js

需求2：当访问http://localhost:8080/list目录时，显示list组件内容

需求3：组件间跳转,首页跳转到商品详细页

使用标签实现组件间跳转。

查看商品详情

项目代码初始化

开发移动端网页，需要配置以下内容：

1，添加viewport标签

禁止通过手指对页面放大或缩小，保证页面比例始终1:1

2，引入reset.css

重置页面的样式表，在不同的手机浏览器上默认的样式是不统一的，需要将不同手机的初始化样式做统一。

main.js

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

3,引入border.css

1像素边框问题，有些手机分辨率比较高，2倍屏或3倍屏。在css中写

border 1px solid;这个1px指的是css像素，在2倍屏幕上它对应2个物理像素的高度...,为了解决这种多倍屏里1像素边框会被显示成多像素的问题，需要引入1像素边框的解决方案。

main.js

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

4,300ms点击延迟问题

在移动端开发中，在某些机型上，某些浏览器上，当使用click事件时，click事件会延迟300ms执行，这样使用click事件体验就不好。解决方案：引入fastclick库。

cnpm install fastclick --save

将fastclick第三方包安装到项目依赖中

--save:开发和生产环境都需要这个依赖包

main.js

import fastClick from 'fastClick'fastClick.attach(document.body)

5.使用iconfont

www.iconfont.cn 注册并登陆

图标管理--->我的项目，创建项目