[Учебник на уровне няни] Использование vant framework в uniapp
[Учебник на уровне няни] Использование vant framework в uniapp

Введение

существовать uni-app используется в Vant необходимо выполнить несколько шагов, чтобы обеспечить Vant способен правильносуществоватьзапустить в проекте。Vant основан на Vue мобильный терминал UI Библиотека компонентов, специально разработанная для мобильных устройств. Хотя uni-app Поддержка нескольких платформ, но используйте Vant час,основнойсосредоточиться на нем существует мобильная производительность.

Ниже приводитсясуществовать uni-app используется в Vant Шаги:

Установить Вант

существоватьтвой uni-app В корневом каталоге проекта используйте npm или yarn установить Vant

Используйте НПМ:

Язык кода:javascript
копировать
npm install vant --save
//или ВОЗ
npm i @vant/weapp -S --production

илииспользовать yarn:

Язык кода:javascript
копировать
yarn add vant

Настройте easycom в Pages.json в проекте uniapp, чтобы реализовать автоматическое внедрение компонентов по требованию:

Язык кода:javascript
копировать
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^van-(.*)": "@vant/weapp/dist/$1/index"
    }
  }
}

Используйте на странице компоненты Vant Weapp, например компоненты кнопок (Button):

Язык кода:javascript
копировать
<template>
  <view>
    <van-button type="primary">кнопка</van-button>
  </view>
</template>

Убедитесь, что ваш проект uniapp поддерживает npm и механизм загрузки подпакетов мини-программ. Если у вас возникли проблемы, проверьте, настроили ли вы его соответствующим образом в соответствии с документацией Vant Weapp.

другой

Ошибка установки

Язык кода:javascript
копировать
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myuniappsa@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@">= 2.6.14 < 2.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from vant@4.9.1
npm ERR! node_modules/vant
npm ERR!   vant@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-06-21T03_57_27_712Z-debug-0.log

Причина: вызвано версией Решение: переключить версию npm. или ВОЗ Юниап версия или ВОЗvantВерсия

Официальный адрес сайта

http://mui.ucmed.cn/#/zh-CN/quickstart

Здравствуйте, я Фейхен. Приглашаем вас подписаться на меня, чтобы получать обучающие ресурсы, ежедневный обмен информацией о технологических изменениях и правилах выживания в отрасли;

bug
boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода