On-demand loading of ant- UI

The babel-plugin-import implementation is loaded on demand

“

Babel-plugin-import is a Babel plug-in that automatically converts the way import is written to import on demand during compilation

// Plug-in installationyarn add babel-plugin-import -D
Copy the code
// Configure it in babel.config.jsmodule.exports = {
  presets: ["@vue/cli-plugin-babel/preset"].  plugins: [
    [
 "import". {  libraryName: "vant". libraryDirectory: "es". style: true  }  ]  ] };  Copy the code

Use the Vant component

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

<script lang="ts">  import { Component, Vue } from "vue-property-decorator";  @Component({  name: "ButtonDemo". components: { [button.name]: Button, // component use }  })  export default class extends Vue {} </script> Copy the code

Adaptation of REM on mobile terminal

postcss-pxtorem

“

Postcss – PxtoREM is a PostCSS plugin for converting units to REM

// Install the plug-inyarn add postcss-pxtorem -D

// Perform the configuration in postcss.config.jsmodule.exports = {
 plugins: {  autoprefixer: {},  "postcss-pxtorem": { RootValue: 37.5. propList: ["*"]  }  } }; Copy the code
// Set in package.json when to enable PostCss{
  "browserslist": [
    "1%" >, // A browser used by more than 1% of the world's population    "last 2 versions"// All browsers are compatible with the last two versions tracked by CanIUse.com ] } // Copy the code

2020 also has its own handwritten CSS in a large browser compatible version of the inevitable low, here autoprefixer can help us to add compatible versions.

RootValue is set according to the size of the UI graph. Third-party UI frameworks such as Vant and Mint-UI are 375, but we generally use 750 in our development. If rootValue is set to 75, we will find that the Vant component is too small. So 37.5, if we get 750 then the actual size needs to be *2. In fact, if we use blue Lake, we can just set at sign 2.

amfe-flexible

“

Amfe-flexible is used to set REM reference values. You may have heard of lib-flexible, but it’s deprecated.

// Install the plug-inyarn add amfe-flexible -D
 
// Used in main.tsimport "amfe-flexible/index.js";
 // Change the viewport in index.js<meta name="viewport" content="Width =device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> Copy the code

The effect

“

Note: PostCSS-PxtoREM currently only supports external stylesheets, meaning that inline styles will not be converted to REM

Normally we can see that WebPack has converted px to the corresponding REM.

Define global uniform SASS variables

The global variable

“

For example, if we define a variable $bg as red, we can change the global variable if we want to change the color

The directory structure

├ ─ SRC /│ ├ ─ styles /├ ─ ─ ─ _variables SCSS│ ├ ─ ─ ─ _variables. SCSS. Which s│ ├ ─ ─ ─ index. SCSSCopy the code

_variables.scss

// Base color
$bg:# 324157;

// Sidebar
$subMenuBg:#1f2d3d;
 // Login page $loginBg: #2d3a4b;  :export {  subMenuBg: $subMenuBg; } Copy the code

variables.scss.d.ts

export interface IScssVariables {
  menuBg: string;
}

export const variables: IScssVariables;
 export default variables; Copy the code

Introducing global variables

“

A direct reference in the main entry file main.ts will not work, so we need to use style-resources-loader to help us import.

  • What is style-resources-loader?

“

The Style resource handler injects content into the style resource and imports CSS/sass/SCSS/less/stylus.

  • What does style-resources-loader do?

“

Inject pre-compiled style variables, functions, mixins globally, avoiding manual @import in every style file

  • How to use style-resources-loader?

    Style-resources-loader is a plug-in for Webpack, so we need to customize the configuration. Vue-cli 3.0+ hides the default configuration and allows us to modify the configuration via vue.config.js.

    module.exports = {
  devServer: {}, // Port number, whether to open directly after construction, reverse proxy, etc
  pluginOptions: { // Use style-resources-loader to import global variables
    "style-resources-loader": {
      preProcessor: "scss". patterns: [  path.resolve(__dirname, "src/styles/_variables.scss")  ]  }  },  chainWebpack(config){} // Advanced configuration of Webpack } Copy the code