Theme 自定义主题

clone本仓库后先安装依赖，然后通过修改 styles/variables.scss 文件重写sass变量。运行下面命令生成新样式

  1. npm run build:theme

新生成的样式文件： lib/zarm-vue.default.css

移动端Rem适配

  • HTML页面增加适配脚本
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.   <meta name="format-detection" content="telephone=no, email=no">
  8.   <meta name="apple-touch-fullscreen" content="yes">
  9.   <title>Zarm-Vue UI - 众安科技移动端组件库</title>
  10.   <script>
  11.     // 基准大小
  12.     const baseSize = 32
  13.     // 设置 rem 函数
  14.     function setRem() {
  15.       // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  16.       const scale = document.documentElement.clientWidth / 750
  17.       // 设置页面根节点字体大小
  18.       document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  19.     }
  20.     // 初始化
  21.     setRem()
  22.     // 改变窗口大小时重新设置 rem
  23.     window.onresize = function () {
  24.       setRem()
  25.     }
  26.   </script>
  27. </head>
  29. <body>
  30.   <div id="app"></div>
  31.   <!-- built files will be auto injected -->
  32. </body>
  34. </html>
  • 安装postcss-pxtorem插件
  npm install postcss-pxtorem -D
  • .postcssrc.js 添加Plugin配置
   'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*']
    }