Vue+Ts搭建项目(三)：按需加载Vant-UI和移动端REM的适配方式2020还自己手写css在个大浏览器的兼容版

vant-ui的按需加载

babel-plugin-import 实现按需加载

“
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

// 插件安装
yarn add babel-plugin-import -D

// 在babel.config.js 中配置
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true
      }
    ]
  ]
};

使用vant组件

// demo.vue
<template>
  <van-button type="info" :loading="loading">按钮</van-button>
</template>

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  @Component({
    name: "ButtonDemo",
    components: {
      [Button.name]: Button, // 组件使用
    } 
  })
  export default class extends Vue {}
</script>

移动端之rem的适配方式

postcss-pxtorem

“
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

// 安装插件
yarn add postcss-pxtorem -D

// 在postcss.config.js中进行配置
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      rootValue: 37.5,
      propList: ["*"]
    }
  }
};

// 在package.json中设置在什么情况下启用 PostCss
{
  "browserslist": [
    "> 1%", // 全球超过1%人使用的浏览器
    "last 2 versions" // 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
  ]
}
//

2020还自己手写css在个大浏览器的兼容版本难免有些low，这里的autoprefixer正好可以帮我们增加兼容版本。

rootValue根据UI图的大小进行设置，像vant、mint-ui这样的第三方UI框架是375，但是我们开发是一般使用的是750的尺寸，如果rootValue设置成75，会发现vant组件会偏小。所以设置成37.5,如果我们拿到了750的图那么实际尺寸需要 *2。其实我们如果使用蓝湖，可以直接设置一下@2。

amfe-flexible

“
amfe-flexible用于设置 rem 基准值,，你可能听过lib-flexible，打开官网发现已经废弃了，推荐使用的是amfe-flexible。

// 安装插件
yarn add amfe-flexible -D
 
// 在main.ts中使用
import "amfe-flexible/index.js";

// 更改index.js中的viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

效果

“
注： postcss-pxtorem目前只支持外部样式表，也就是说内联样式不会被转成 rem

正常情况下我们可以发现webpack已经将 px转换成了相应的rem。

定义全局的统一sass变量

全局变量

“
定义好全局的变量方便统一规范css颜色，比如说：我们定义一个变量$bg为红色，后期想改变这个颜色就可以直接更改全局变量

目录结构

├─ src/              
│   ├─ styles/
    ├─── _variables.scss 
│   ├─── _variables.scss.d.ts
│   ├─── index.scss

_variables.scss

// Base color
$bg:#324157;

// Sidebar
$subMenuBg:#1f2d3d;

// Login page
$loginBg: #2d3a4b;

:export {
  subMenuBg: $subMenuBg;
}

variables.scss.d.ts

export interface IScssVariables {
  menuBg: string;
}

export const variables: IScssVariables;

export default variables;

引入全局变量

“
直接在主入口文件main.ts里面引用是不生效的,这里需要使用style-resources-loader来帮助我们引入。

style-resources-loader是什么呢？

“
style样式资源处理器，在style资源中注入内容，导入css / sass / scss / less / stylus这些内容。

style-resources-loader有什么作用呢？

“
将预编译样式的变量、函数、mixin注入到全局，避免在每个样式文件中手动的@import导入

如何使用style-resources-loader？

style-resources-loader是webpack的插件，所以需要我们自定义配置，vue-cli 3.0+隐藏了默认配置，并允许我们通过vue.config.js来修改配置。

module.exports = {
  devServer: {}, // 端口号，构建完毕是否直接打开，反向代理等
  pluginOptions: { // 这里使用style-resources-loader引入全局变量
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [
        path.resolve(__dirname, "src/styles/_variables.scss")
      ]
    }
  },
  chainWebpack(config){} // webpack的高级配置
}

Vue+Ts搭建项目(三)： 按需加载Vant-UI和移动端REM的适配方式