新创建的项目的目录大概就是这样子
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)
这样,页面的初始化就差不多了