vue@cli3结合vant搭建初始项目模板

vue@cli3结合vant搭建初始项目模板

包含内容：
1：rem的引入、配置
2：vant组件库的引入、配置

一. vue@cli3项目搭建地址

补充：手动选择插件内容：

项目展示：

二.安装vant组件库

1.可以手动:npm i vant -S 也可以根据官方推荐:通过工具，如下：（选择）

2.配置：找到babel.config.js文件，修改为如下方式：

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'import',
      { libraryName: 'vant', libraryDirectory: 'es', style: true },
      'vant'
    ]
  ]
};

3.使用:找到需要使用的页面：

<template>
  <div class="home">
    <van-button type="primary">默认按钮</van-button>     //使用
  </div>
</template>

<script>
import { Button  } from 'vant';   //引入

export default {
  name: 'home',
  components: {
    [Button.name]: Button ,   //注册
  }
}
</script>

三.rem适配
1.安装插件：

npm i amfe-flexible --save
npm i postcss-pxtorem --save--dev

2.配置
新建一个vue.config.js文件夹,配置如下：

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  outputDir: 'docs',
  publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 50,
            propList: ['*'],
            // 该项仅在使用 Circle 组件时需要
            // 原因参见 https://github.com/youzan/vant/issues/1948
            selectorBlackList: ['van-circle__layer']
          })
        ]
      }
    }
  }
};

官方配置的是37.5，但是因为下边第四部结合之后，组件的字体整体偏大，就设置为50了
3.在main.js中引入此时组件中的字体样式都已适配完成：

import 'amfe-flexible';

4:.出了组件样式之外的样式字体设置：
新建rem.js,如下代码

// 设置 rem 函数
function setRem () {
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
    htmlDom.style.fontSize= htmlWidth/7.5 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

以上设置的结果，如果你拿到的设计稿是7501334的，那么就是1/100的比例：1rem = 100px;
如果设计稿是375667的，那么就是1rem = 50px
项目展示：不管是组件中的字体还是项目自身的字体都相对正常

模板存放地址：https://github.com/fairy66/vue3-originItem.git