┌─components              Каталог компонентов
│  ├─uni-list             Каталог списка
│  │  └─uni-list.vue      Файл компонента списка
│  ├─uni-list-item        Каталог элемента списка
│  │  └─uni-list-item.vue Файл компонента элемента списка
│  ├─uni-badge           Каталог бейджей
│  │  └─uni-badge.vue    Файл компонента бейджей
│  └─ //....              Дополнительные файлы компонентов
├─pages                   Каталог бизнес-страниц
│  ├─index
│  │  └─index.vue         Пример страницы index
├─main.js                 Входной файл для инициализации Vue
├─App.vue                 Конфигурация приложения, используется для глобального стилизования App и отслеживания жизненного цикла приложения
├─manifest.json          Конфигурация имени приложения, appId, логотипа, версии и других данных пакета, подробнее см.
└─pages.json              Настройка страниц
```## Второй способ: установка с помощью npm

В проектах на `vue-cli` можно использовать `npm`, чтобы установить библиотеку `uni-ui`. Также можно использовать `npm` в проектах `HBuilderX` (не рекомендуется).

> **Внимание**
> Проекты на `cli` по умолчанию не компилируют компоненты из папки `node_modules`, что приводит к тому, что условная компиляция и другие функции становятся недействительными, что вызывает ошибки в компонентах. Чтобы исправить это, необходимо создать файл `vue.config.js` в корневой директории и добавить компиляцию пакета `@dcloudio/uni-ui`.
> ```javascript
> // vue.config.js
> module.exports = {
>     transpileDependencies: ['@dcloudio/uni-ui']
> }
> ```

**Подготовка SASS**

Для проектов на `vue-cli` необходимо установить SASS и SASS-loader. Для проектов `HBuilderX` этот шаг можно пропустить.

- Установите SASS

- Установите SASS-loader

> Версию SASS-loader следует выбрать ниже версии @11.0.0, так как [sass-loader@11.0.0 не поддерживает vue@2.6.12](https://ru.stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function).


**Установка uni-ui**

Пример использования компонента в `script`:

```javascript
import {uniBadge} from '@dcloudio/uni-ui';
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'; // также можно использовать этот способ для импорта компонента
export default {
    components: {uniBadge}
};

> **Внимание**
> - При использовании `CLI`, глобальная регистрация компонентов в `main.js` для `H5` не поддерживается. Если требуется использовать компоненты, воспользуйтесь методом ([easyCom](https://uniapp.dcloud.io/collocation/pages?id=easycom)).
> - По умолчанию `Babel-loader` игнорирует все файлы внутри папки `node_modules`, что делает условную компиляцию недействительной. Это можно исправить путём конфигурации файла `vue.config.js`:
> ```javascript
> // Создайте файл vue.config.js в корневой директории и добавьте следующее содержимое
> module.exports = {
>     transpileDependencies: ['@dcloudio/uni-ui']
> }
> ```

## Использование npm + easycom

После установки `uni-ui` с помощью `npm`, необходимо настроить правила `easycom`, чтобы сделать установленные компоненты совместимыми с `easycom`.

Откройте файл `pages.json` в корневой директории проекта и добавьте узел `easycom`:```javascript {8}
// pages.json

{
	"easycom": {
		"autoscan": true,
		"custom": {
			// конфигурация правил uni-ui указана ниже
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// остальные данные
	pages:[
		// ...
	]
}
``````### Поддерживаемый список компонентов uni-ui
  |Название компонента|Описание компонента|
  |---|---|
  |uni-badge|[Цифровой бейдж](https://ext.dcloud.net.cn/plugin?name=uni-badge)|
  |uni-breadcrumb|[Хлебные крошки](https://ext.dcloud.net.cn/plugin?name=uni-breadcrumb)|
  |uni-calendar|[Календарь](https://ext.dcloud.net.cn/plugin?name=uni-calendar)|
  |uni-card|[Карточка](https://ext.dcloud.net.cn/plugin?name=uni-card)|
  |uni-collapse|[Разделительная панель](https://ext.dcloud.net.cn/plugin?name=uni-collapse)|
  |uni-combox|[Комбо-поле](https://ext.dcloud.net.cn/plugin?name=uni-combox)|
  |uni-countdown|[Отсчет времени](https://ext.dcloud.net.cn/plugin?name=uni-countdown)|
  |uni-data-checkbox|[Выбор данных](https://ext.dcloud.net.cn/plugin?name=uni-data-checkbox)|
  |uni-data-picker|[Выбор данных с помощью picker](https://ext.dcloud.net.cn/plugin?name=uni-data-picker)|
  |uni-data-select|[Выпадающий список выбора](https://ext.dcloud.net.cn/plugin?name=uni-data-select)|
  |uni-dateformat|[Форматирование даты](https://ext.dcloud.net.cn/plugin?name=uni-dateformat)|
  |uni-datetime-picker|[Выбор даты и времени](https://ext.dcloud.net.cn/plugin?name=uni-datetime-picker)|
  |uni-drawer|[Панель открытия/закрытия](https://ext.dcloud.net.cn/plugin?name=uni-drawer)|
  |uni-easyinput|[Улучшенное поле ввода](https://ext.dcloud.net.cn/plugin?name=uni-easyinput)|
  |uni-fab|[Плавающая кнопка действия](https://ext.dcloud.net.cn/plugin?name=uni-fab)|
  |uni-fav|[Кнопка добавления в закладки](https://ext.dcloud.net.cn/plugin?name=uni-fav)|
  |uni-file-picker|[Выбор и загрузка файла](https://ext.dcloud.net.cn/plugin?name=uni-file-picker)|
  |uni-forms|[Форма](https://ext.dcloud.net.cn/plugin?name=uni-forms)|
  |uni-goods-nav|[Навигация товаров](https://ext.dcloud.net.cn/plugin?name=uni-goods-nav)|
  |uni-grid|[Медальон](https://ext.dcloud.net.cn/plugin?name=uni-grid)|
  |uni-group|[Группировка](https://ext.dcloud.net.cn/plugin?name=uni-group)|
```|cn/plugin?name=uni-group)|uni-icons|[Иконки](https://ext.dcloud.net.cn/plugin?name=uni-icons)|
|cn/plugin?name=uni-indexed-list)|uni-indexed-list|[Список с индексами](https://ext.dcloud.net.cn/plugin?name=uni-indexed-list)|
|cn/plugin?name=uni-link)|uni-link|[Гиперссылка](https://ext.dcloud.net.cn/plugin?name=uni-link)|
|cn/plugin?name=uni-list)|uni-list|[Список](https://ext.dcloud.net.cn/plugin?name=uni-list)|
|cn/plugin?name=uni-load-more)|uni-load-more|[Загрузка дополнительных записей](https://ext.dcloud.net.cn/plugin?name=uni-load-more)|
|cn/plugin?name=uni-nav-bar)|uni-nav-bar|[Персонализированная навигационная панель](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar)|
|cn/plugin?name=uni-notice-bar)|uni-notice-bar|[Обратная связь](https://ext.dcloud.net.cn/plugin?name=uni-notice-bar)|
|uni-number-box|[Поле ввода чисел](https://ext.dcloud.net.cn/plugin?name=uni-number-box)|
|uni-pagination|[Пагинация](https://ext.dcloud.net.cn/plugin?name=uni-pagination)|
|uni-popup|[Попап](https://ext.dcloud.net.cn/plugin?name=uni-popup)|
|uni-rate|[Оценка](https://ext.dcloud.net.cn/plugin?name=uni-rate)|
|uni-row|[Разметка - строка](https://ext.dcloud.net.cn/plugin?name=uni-row)|
|uni-scss|[Стили помощи](https://ext.dcloud.net.cn/plugin?name=uni-scss)|
|uni-search-bar|[Панель поиска](https://ext.dcloud.net.cn/plugin?name=uni-search-bar)|
|uni-section|[Заголовочная полоса](https://ext.dcloud.net.cn/plugin?name=uni-section)|
|uni-segmented-control|[Контроль сегментированного выбора](https://ext.dcloud.net.cn/plugin?name=uni-segmented-control)|
|uni-steps|[Шаги процесса](https://ext.dcloud.net.cn/plugin?name=uni-steps)|
|uni-swipe-action|[Действие при свайпе](https://ext.dcloud.net.cn/plugin?name=uni-swipe-action)|
|uni-swiper-dot|[Индикатор слайдера](https://ext.dcloud.net.cn/plugin?name=uni-swiper-dot)|
|uni-table|[Таблица](https://ext.dcloud.net.cn/plugin?name=uni-table)|
|uni-tag|[Метка](https://ext.dcloud.net.cn/plugin?name=uni-tag)|
|uni-title|[Заголовок раздела](https://ext.dcloud.net.cn/plugin?name=uni-title)|
|uni-tooltip|[Подсказка](https://ext.dcloud.net.cn/plugin?name=uni-tooltip)||uni-transition|[Переходное анимационное效应](https://ext.dcloud.net.cn/plugin?name=uni-transition)|### 其他|  

Исправленный текст:

|uni-transition|[Переходное анимационное эффект](https://ext.dcloud.net.cn/plugin?name=uni-transition)|### Другие|- Uni-UI — это универсальная библиотека UI, совместимая со стековой архитектурой, основанная на flex-разметке и не использующая DOM.
- Uni-UI является расширением встроенных компонентов uni-app. Обратите внимание, что в отличие от web-разработки, где некоторые разработчики предпочитают использовать одну библиотеку UI для всего проекта, в экосистеме uni-app рекомендуется использовать более производительные базовые компоненты и затем добавлять необходимые расширенные компоненты.

> **Внимание**
>
> - Установка `uni-ui` с помощью `Vue.use()` **не поддерживается**.


### Внесение вклада
Если вы столкнулись с проблемами при использовании `uni-ui`, пожалуйста, сообщите нам об этом через [Issues](https://github.com/dcloudio/uni-ui/issues). Если у вас есть предложения по улучшению или лучшие способы реализации, мы также приветствуем ваши [PR](https://github.com/dcloudio/uni-ui/pulls).