zoukankan      html  css  js  c++  java
  • 搭建vue项目脚手架

    安装node(这里是7.10.1版本)

    安装git

    在码云上 配置ssh秘钥  创建项目 clone下来  

    全局安装vue脚手架  npm install --global vue-cli

    在放置代码的目录(qunaApp目录) 执行webpack的打包到clone下来的目录:  

    vue init webpack Travel

    根据提示:先cd Travel 目录

              再执行 npm run dev

              项目成功之后 就输入显示的路径在浏览器打开

     

    main.js里面引入 初始化样式

    reset.css

      border.css(解决1px边框)

    解决click事件延迟300ms的问题:fastclick插件

    npm install fastclick --save

    main.js引入

    Import fastClick from ‘fastclick’

    在main.js写入:

    fastClick.attach(document.body)

    下载 样式预加载插件  

    npm install stylus --save

    npm install stylus-loader --save

    <style lang=”stylus” scoped></style>  

    指名使用stylus样式

    scoped 只能当前组件使用该样式(为了怕影响其他组件的样式)

    rem适配

    因为项目设计稿是iphon6 750px,所以html设置的是 font-size:50px 换算看如下公式:

    屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50

    获取到这个值,再赋给html元素的style

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;

    这样就设置好了每个页面的根fonts-size,因为rem单位是基于根font-size,因此只要确定一种设计稿对应手机的换算,其余屏幕尺寸均可自动适配。

    上面我们得出设计稿换算rem的基准值是100,因此只需要把设计稿上的px值除以100即为我们要的rem值。

    > Px/100=rem,所以100px=1rem,25px=0.25rem

  • 相关阅读:
    禁用aspx页面的客户端缓存
    水晶报表的自动换行(转)
    ORACLE锁的管理
    同时使用有线和无线
    Oracle系统表的查询
    Oracle中临时表的深入研究
    我的My Life Rate
    [学习笔记]c#Primer中文版命名空间
    出差兰州·火车上
    [学习笔记]c#Primer中文版类设计、static成员、const和readonly数据成员
  • 原文地址:https://www.cnblogs.com/warbj/p/9245033.html
Copyright © 2011-2022 走看看