VUE 去哪儿网实战开发——第六章 Vue项目预热

1 安装

使用 vue-cli 2

#全局安装 vue-c1i
$ npm install--global vue-cli
#创建一个基于webpack 模板的新项目
$ vue init webpack my-project
#安装依赖，走你
$ cd my-project 
$ npm instal1 
$ npm run dev

#下次启动的时候直接用 start
$ npm run start

? Target directory exists. Continue? Yes
? Project name travel
? Project description A Vue.js project
? Author Pooc <pooc95@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

  vue-cli · Generated "Travel".


# Installing project dependencies ...
# ========================

header 1	header 2
App.vue	整个应用的根组件
<router-view>	整个路由地址所对应的内容
router/index.js	路由内容配置项

5 项目代码初始化

禁用缩放

因为是移动端项目，需要禁止用户缩放网页，在主页 meta 中的 viewprot 中设定

index.html

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

初始化 CSS

导入初始化 CSS

main.js

import './assets/style/reset.css'  // 该文件在源码中

解决 1px 边框问题

比如 1px 边框在多倍屏中会显示为多倍 px 的效果，需要解决这个问题

main.js

import './assets/style/border.css' // 该文件在源码中

解决移动端点击事件延迟 300 毫秒的问题

当前目录下安装 fastclick

>npm install fastclick --save

然后在项目中引用并绑定到 body 中

main.js

import fastClick from 'fastclick'

fastClick.attach(document.body)