vue项目的初始化

新创建的项目的目录大概就是这样子
index.html就是显示的网页

做手机版页面的准备

这里我要做的是一个手机版的页面，所以第一步要改一下index.html里面的meta标签
把有content的meta标签改成下面这个样子

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

删除没必要的东西

下载的模板都能显示出来一个完整网页了，当然有很多东西没用，都删掉
先是src目录下的components目录，整个删掉
src > assets这个目录下的logo.png也没用，删掉
App.vue 里面的template和script标签里的东西都删掉
还有router下的index.js里的import HelloWorld那一行，下面的两个HelloWorld 单词

创建自己的页面

删完当然还要有自己的东西
在src目录下创建pages文件夹，放自己的页面的
pages里面新建home文件夹，放首页的
home里面创建Home.vue，这是首页
Home.vue里面加上这样的代码

<template>
	<div>test</div>
</template>

<script>
	export default {
		name:'Home'
	}
</script>

<style>
</style>

还是home文件夹里创建components，放首页上的组件
在刚才的index.js文件里删除import HelloWorld那一行的地方加上

import Home from '../pages/home/Home'

下面删掉HelloWorld的地方也加上Home

重置样式表

重置样式表（一般叫reset.css），就是重置样式用的
去百度可以找到很多种
然后在src > assets这个目录下新建styles文件夹，把reset.css放在里面
然后到src目录下的main.js里面加上这么一行

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

看看格式应该知道放哪
@表示src目录

因为我要做手机页面，手机页面上有一个一像素边框的问题，所以还要引入另一个样式表border.css,引入方式和reset.css的方式一样

这两个样式表可以到我的百度云里下载，密码：co0z

手机端优化click

有些手机端的某些浏览器上点击事件会有延迟，这样会极大地降低用户体验
为了解决这个可以引入一个fastclick库
在项目目录中打开cmd并输入下面的指令

npm install fastclick --save

有淘宝镜像的还是用cnpm，真的很快

然后去main.js中加上

import fastClick from 'fastclick'

中间Vue开头的那一行下面加上

fastClick.attach(document.body)

这样，页面的初始化就差不多了