vue2 + vant框架（移动端适配rem.js + 样式初始化 reset.css）

偏执的太偏执、 2023-02-18 03:26 1阅读 0赞

## 基于vue2创建项目 + vant 框架 ##

> 运行命令如下：
> 
>     vue init webpack 项目名称
>     
>     下面会询问一些问题：是否安装一下插件，按需选择安装即可。
>     
>     然后根据提示信息，操作就可以完成项目创建。
>     
>     安装vant框架：https://youzan.github.io/vant/#/zh-CN/
>     
>     npm i vant -S
>     
>     引入组件：方式一. 自动按需引入组件 (推荐)
>     
>     第一步：安装插件   npm i babel-plugin-import -D
>     
>     第二步：在.babelrc 中添加配置
>     
>     {
>       "plugins": [
>         ["import", {
>           "libraryName": "vant",
>           "libraryDirectory": "es",
>           "style": true
>         }]
>       ]
>     }
>     
>     第三步：在入口文件 main.js中，按需引入vant里面的组件，这样全局就可以使用了
>     
>     // 引入vant组件
>     import { Button, Cell, CellGroup, Col, Row, Search, Loading, Toast  } from 'vant';
>     Vue.use(Button);
>     Vue.use(Cell);
>     Vue.use(CellGroup);
>     Vue.use(Col);
>     Vue.use(Row);
>     Vue.use(Search);
>     Vue.use(Loading);
>     Vue.use(Toast);

## 移动端适配问题：rem. js ##

> 首先：在index.html中，添加 viewport
> 
>     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">
> 
> 然后在入口文件main.js 引入：`import './assets/rem'`

/** * 设置根元素font-size * 当设备宽度为375(iPhone6)时，根元素font-size=16px; */
    (function (doc, win) { 
      var docEl = win.document.documentElement;
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    
      var refreshRem = function () { 
        var clientWidth = win.innerWidth
          || doc.documentElement.clientWidth
          || doc.body.clientWidth;
    
        // console.log(clientWidth)
        if (!clientWidth) return;
        var fz;
        var width = clientWidth;
        fz = 16 * width / 375;  // 可以根据项目需要，自行修改
        docEl.style.fontSize = fz + 'px';  //这样每一份也是16px,即1rem=16px
      };
    
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, refreshRem, false);
      doc.addEventListener('DOMContentLoaded', refreshRem, false);
      refreshRem();
    
    })(document, window);

## 移动端样式初始化：reset.css ##

> 在入口文件main.js中引入：`import './assets/reset.css'`

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
    */
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    
    /* HTML5 display-role reset for older browsers */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      display: block;
    }
    
    body {
      line-height: 1;
    }
    
    ol,
    ul {
      list-style: none;
    }
    
    blockquote,
    q {
      quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content: '';
      content: none;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }