Vue项目 --- 代码初始化

2018-07-11  本文已影响0人  V火力全开

第一步:项目根目录下 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.cssborder.css,将它放在 /src/assets/styles/ 下, 然后在/src/main.js中引入reset.cssborder.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">&#xe632;</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。我们就可以使用新图标了。

上一篇 下一篇

猜你喜欢

热点阅读