vue-7: biblioteca de componentes (vant en móvil) (elemento en PC)

furgoneta móvil

Instalación de complementos (importación bajo demanda) Reiniciar para que surta efecto

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

Importar un proyecto basado en vite:

如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

por ejemplo: puntos especiales: componentes Toast, Dialog, Notify, ImagePreview, cuando se usan componentes de función, los componentes unplugin-vue no pueden introducir automáticamente el estilo correspondiente, por lo que debe introducir manualmente el estilo

En el componente básico: el indicador de luz Toast no tiene estilo: resolver

En el componente de comentarios: el cuadro de diálogo emergente no tiene estilo: resuelto

// 导入
import { showToast } from 'vant';

// 导入样式使用
import 'vant/es/toast/style';
import 'vant/es/dialog/style';

 Penetración del estilo: profunda()

Biblioteca de componentes del lado de la PC

• vue2 recomienda la interfaz de usuario del elemento

• Vue3 element plus recuerda importar automáticamente

  • instalar elemento

    • npm instalar elemento-plus --save

  • Instale la importación bajo demanda, importe automáticamente estos dos complementos

    • npm install -D unplugin-vue-components unplugin-auto-import

  • Configurar el sitio web oficial de vite.config.ts

    • 

  • Instale la configuración del icono del icono: npm install @element-plus/icons-vue

    • 

  • Las notificaciones tienen que importar estilos.

                importar { ElNotification } desde 'element-plus'              

                importar 'element-plus/es/components/notification/style/css'

Penetración del estilo: profunda()