第一步：项目根目录下 index.html，初始代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
需要在<meta name="viewport"...>后面补上,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no，加上后在移动端用户就不可以通过手指对页面进行缩放和放大了，页面的比例始终是1:1。
第二步：配置路径别名，打开/build/webpack.base.conf.js，添加代码'styles': resolve('src/assets/styles'),：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles'),
}
}
然后重启服务器，因为我们修改了webpack的配置文件，所以需要重启，这样引入 style目录下的文件就都可以用style，而不用src/assets/styles了。
第三步： 引入reset.css和border.css，将它放在 /src/assets/styles/ 下, 然后在/src/main.js中引入reset.css和border.css。
import 'styles/reset.css'
import 'styles/border.css'
第四步：安装fastclick模块，用于解决“300毫秒点击延迟问题”，在实际开发中，在某些浏览器，机型上单击的时候会延迟300毫秒才执行。
npm install fastclick --save
然后引入fastclick
import fastClick from 'fastclick'
并在代码Vue.config.productionTip = false下面加入如下代码：
fastClick.attach(document.body)
第五步：引入iconfont，到网站http://www.iconfont.cn创建项目，选择会用到的矢量图标，将其添加到自己的项目中，以便后续使用,。然后将项目现在到本地，我们将其中的iconfont.css放在 /src/assets/styles/ 下，将iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff放在 /src/assets/styles/iconfont/ 下，然后调整iconfont.css中引入字体路径，路径前面加上./iconfont/，然后引入iconfont
import 'styles/iconfont.css'
这样我们就可以在vue项目中使用iconfont了，使用方式如下：
<span class="iconfont"></span>
中间的十六位进制串可以到http://www.iconfont.cn我们创建的项目中查看, 然后图标就显示出来了。
以后当我们再用到新图标的时候，需要再次将iconfont的项目下到本地，然后替换iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff这4个文件，再打开下载的iconfont.css文件，复制文件中这一行代码：
url('data:application/x-font-woff;charset=utf-8;base64,...),
然后替换掉我们项目中iconfont.css的这一行, 这样就换了新的base64。我们就可以使用新图标了。
网友评论