mechtaui-shop v0.2.1
Getting Started
Добро пожаловать! Эта инструкция поможет тебе начать работу с mechtaui-shop aka Mistral UI Kit
Содержание
Введение
Установка
Выполните команду
pnpm add mechtaui-shop@latestИмпортируйте стили
import 'mechtaui-shop/dist/style.css'
Автоимпорт
По желанию можно использовать unplugin-vue-components для автоимпорта компонентов из библиотеки.
pnpm add -D unplugin-vue-components
Чтобы все работало корректно, нужно добавить custom resolver в vite.config.ts:
{/* vite.config.ts */}
import Components from 'unplugin-vue-components/vite';
export default defineConfig({
plugins: [
Components({
dts: 'src/components.d.ts',
resolvers: [
(componentName) => {
if (componentName.startsWith('MT')) {
return {
name: componentName,
from: 'mechtaui-shop',
};
}
},
],
})
]})Префиксы
Стоит учесть, что все компоненты из библиотеки делятся на два типа, это основные и вспомогательные:
Основные:
К ним относятся уже готовые к использованию компоненты, которые содержат в себе прописанную логику. Основные компоненты помечены префиксами
MTи автоимпортируются (при использовании Автоимпортов).Пример:
<MTInput v-model="login" :is-error="$props.errorStatus" :label="$t('auth.login')" />Вспомогательные:
К ним относятся части, из которых можно собрать один основной компонент. Они не автоимпортируются (это нужно делать вручную) и не помечены префиксами.
Используются для построения своих компонентов. Бывают случаи, когда какой-либо компонент нужно сделать только на вашем проекте, с этим помогут вспомогательные компоненты.
Пример:
<template>
<AccordionRoot
v-bind="forwarded"
class="w-full"
collapsible
>
<AccordionItem
v-for="item in items"
:key="item.value"
:value="item.value"
>
<AccordionTrigger>{{ item.title }}</AccordionTrigger>
<AccordionContent>
{{ item.content }}
</AccordionContent>
</AccordionItem>
</AccordionRoot>
</template>
<script setup lang="ts">
import { AccordionItem, AccordionTrigger, AccordionTrigger, AccordionContent, AccordionRoot } from 'mechtaui-shop';
</script>