T-ui

Vue3 базовые компоненты

Базовые компоненты, переопределенные на основе Element-plus

Пример использования T-ui

wocwin-vue2 — это открытое решение для создания административной панели на основе Vue2, Vuex и webpack; в этом проекте используются переопределённые базовые компоненты T-ui.

Описание

Базовые компоненты, переопределенные на основе Element-ui.

Это мои работы по переопределению базовых компонентов на основе Element-ui; надеюсь, что они будут полезны вам. Подробнее можно посмотреть в документации с примерами

Разделение компонентов, основанных на ant-design-vue (версия 1.1.2)

Vue2 компоненты, основанные на ant-design-vue

Динамическое представление

Установка и использование через npm

Предварительные условия: проект должен глобально использовать библиотеку компонентов Element-ui```js

// Установите пакет npm i @wocwin/t-ui // 1. В main.js выполните следующую команду для глобального использования import Tui from '@wocwin/t-ui' Vue.use(Tui)

// 2. Для выборочной установки выполните следующие шаги в одном vue-файле или в main.js import { TTable, TLayoutPage, TLayoutPageItem, TForm, TQueryCondition } from '@wocwin/t-ui'

## Копирование папки packages для глобального использования

```js
// 1. Скопируйте папку packages в ваш проект
// 2. Предположим, что папки packages и src находятся на одном уровне, тогда в main.js выполните следующий код для глобального использования t-ui
import Tui from '../packages'
Vue.use(Tui)

Внедрение через CDN (версия v1.3.0 поддерживается) -- рекомендовано использовать npm```html

All Components| Название компонента | Описание |

| :------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | TLayoutPage | COMPONENT_LAYOUT_PAGE | | TLayoutPageItem | Подкомпонент COMPONENT_LAYOUT_PAGE | | TAdaptivePage | Компонент одной страницы (наследует все свойства, события, слоты и методы от компонентов TTable и TQueryCondition) | | TQueryCondition | Компонент условий запроса | | TTable | Таблица | | TForm | Форма | | TSelectTable | Компонент выпадающего списка таблиц | | TSelect | Компонент выпадающего списка | | TDetail | Компонент деталей | | TButton | Компонент кнопки с debounce |

Замечено, что "LAYOUT_PAGE" было заменено на "COMPONENT_LAYOUT_PAGE". Это сделано для более точной передачи смысла, поскольку "LAYOUT_PAGE" может быть интерпретировано как просто название, тогда как "COMPONENT_LAYOUT_PAGE" указывает на то, что это конкретный компонент.| TStepWizard | Компонент шагов || | TModuleForm | Компонент модульной формы/деталей | | TDatePicker | Компонент выбора даты | | TInput | Компонент input | | TDialog | Компонент диалогового окна | | TTreeSelect | Компонент выпадающего дерева |

Установка зависимостей```shell

npm install

версия Node.js меньше 16 версия Node.js больше 16: требуется добавление команды "SET NODE_OPTIONS=--openssl-legacy-provider" в раздел scripts файла package.json

## Локальный запуск примеров компонентов из папки src

```shell
npm run serve

Локальный запуск документации компонентов из папки vuepress

npm run docs:dev

Благодарность всем вкладчикам

Группа общения в WeChat

В настоящее время количество участников группы WeChat превышает 200 человек, поэтому для добавления в группу необходимо добавиться в друзья в WeChat (пожалуйста, укажите T-ui в качестве причины).

Код QR WeChat

Нормы коммитов в Git

• ci: изменения конфигурационных файлов CI и скриптов;
• chore: изменения систем сборки или вспомогательных инструментов;
• fix: исправление ошибок в коде;
• feat: добавление новых функций;
• perf: оптимизация производительности;
• refactor: изменения в коде, которые не являются исправлением ошибок или добавлением новой функциональности;
• style: корректировка формата кода, такие как пробелы, точки с запятой, отступы и т.д.;
• docs: изменения в документации;
• test: добавление недостающих тестовых случаев или исправление существующих тестовых случаев;
• revert: откат изменений;