Primeros pasos con la biblioteca de componentes front-end Vue-day08-vant

(Crear no es fácil, gracias, su apoyo es la mayor motivación para seguir adelante, si después de leerlo le es útil, deje sus huellas)

Tabla de contenido

biblioteca de componentes vant 

Instalar 

importar

importar todo

importar bajo demanda

accesorios del navegador

Diseño de ventana gráfica

Adaptación de diseño Rem 

---

biblioteca de componentes vant 

Objetivo: conocer la biblioteca de componentes Vue de terceros vant-ui

Biblioteca de componentes: el tercero ha empaquetado muchos, muchos componentes , que están integrados en una biblioteca de componentes.

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

Instalar 

Instalar a través de npm

Al usar Vant en un proyecto existente, se puede   instalar a través npm de o  :yarn

(Este es el código oficial, si la instalación falla, reinstale de acuerdo con los pasos de importación a continuación)

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

importar

importar todo

Vant admite la importación de todos los componentes a la vez. Importar todos los componentes aumentará el tamaño del paquete de código, por lo que no se recomienda este enfoque .

① Instalar vant-ui

yarn add vant@latest-v2

② Regístrate en main.js

import Vant from 'vant'
import 'vant/lib/index.css'
// 把vant中所有的组件都导入了
Vue.use(Vant)

③ Prueba de uso

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

Sugerencias: Después de importar la configuración a pedido, no se permitirá importar todos los componentes directamente.

importar bajo demanda

babel-plugin-import  es un complemento de babel, que convertirá automáticamente la redacción de la importación en un método de importación bajo demanda durante el proceso de compilación.

① Instalar vant-ui 

yarn add vant@latest-v2

 ② Instale el complemento

Código oficial: 

# 安装插件
npm i babel-plugin-import -D

 Mi propio código:

yarn add babel-plugin-import -D

③ Configuración en babel.config.js

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

 ④ Registro de importación de main.js bajo demanda

import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);

⑤ Prueba de uso

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

⑥ Extraer a vant-ui.js, importar main.js

// 导入按需导入的配置文件
import '@/utils/vant-ui'

accesorios del navegador

Diseño de ventana gráfica

Vant lo usa  px como unidad de estilo por defecto. Si necesita usar  viewport unidades (vw, vh, vmin, vmax), se recomienda usar  postcss-px-to-viewport  para la conversión.

postcss-px-to-viewport  es un complemento PostCSS para convertir unidades px a unidades vw/vh.

① Instale el complemento

yarn add [email protected] -D

② Cree un nuevo archivo postcss.config.js en el directorio raíz y complete la configuración

// postcss.config.js
module.exports = {
    plugins: {
     'postcss-px-to-viewport': {
        // 标准屏宽度
        viewportWidth: 375
      }
    }
}

Adaptación de diseño Rem 

Si necesita usar  rem unidades para la adaptación, se recomiendan las siguientes dos herramientas:

• postcss-pxtorem  es un complemento de PostCSS para convertir unidades px a unidades rem
• lib-flexible  se utiliza para establecer el valor de referencia rem

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};