v4.0.0-alpha.13

Русский

English

Русский

English

Тема

Установка ​

@central-design-system/components — модульная библиотека UI-компонентов дизайн-системы Central Design System.

Быстрый старт ​

Самый быстрый способ начать — создать новый проект инициализатором:

bash
npm create luma@latest
bash
pnpm create luma@latest
bash
yarn create luma@latest
bash
bun create luma@latest

Интерактивный визард спросит имя проекта и соберёт его под ваши ответы:

  • платформа — Vue (Vite) или Nuxt;
  • Tailwind CSS с пресетом CDS (включён по умолчанию);
  • тема — CDS (по умолчанию), B2B, Promo или заготовка своей;
  • Vue Router (для Vite-платформы) и Pinia;
  • ESLint + Prettier.

На выходе — готовый проект с уже подключённой CDS: пакет компонентов, createCds, точка входа стилей, а для Vite-платформы ещё и @central-design-system/vite-plugin — авто-импорт компонентов и переопределение SASS-переменных через settings.scss. После генерации визард подскажет следующие шаги: перейти в папку проекта, установить зависимости и запустить dev-сервер.

Каждый вопрос визарда закрывается флагом — удобно для CI и скриптов, а --yes пропускает все вопросы с дефолтами:

bash
npm create luma@latest my-app -- --yes --platform=vue --tailwind --theme=b2b
bash
pnpm create luma@latest my-app --yes --platform=vue --tailwind --theme=b2b
bash
yarn create luma@latest my-app --yes --platform=vue --tailwind --theme=b2b
bash
bun create luma@latest my-app --yes --platform=vue --tailwind --theme=b2b

Установка в существующий проект ​

До стабильного релиза 4.0.0 пакеты CDS публикуются под npm-тегом next — устанавливайте с явным тегом:

bash
npm install @central-design-system/components@next
bash
pnpm add @central-design-system/components@next
bash
yarn add @central-design-system/components@next
bash
bun add @central-design-system/components@next

В файле, где создаётся Vue-приложение, подключите CDS:

ts
import { createApp } from 'vue';

// CDS
import '@central-design-system/components/styles';
import { createCds, components, directives } from '@central-design-system/components';

// Components
import App from './App.vue';

const cds = createCds({
  components,
  directives
  // ...options
});

createApp(App).use(cds).mount('#app');

Такой вызов регистрирует всю библиотеку — это удобно для старта. Для продуктовых приложений регистрируйте только нужные компоненты и подключайте стили точечно — см. Tree-shaking.

После этого компоненты дизайн-системы доступны в шаблонах без импорта:

html
<template>
  <CdsButton>Нажми меня</CdsButton>
</template>

Vite-плагин (опционально) ​

Для проектов на Vite есть @central-design-system/vite-plugin: авто-импорт компонентов из шаблонов (регистрация в createCds({ components }) становится необязательной) и перекомпиляция стилей с вашими SASS-переменными:

bash
npm install -D @central-design-system/vite-plugin@next sass-embedded
bash
pnpm add -D @central-design-system/vite-plugin@next sass-embedded
bash
yarn add -D @central-design-system/vite-plugin@next sass-embedded
bash
bun add -d @central-design-system/vite-plugin@next sass-embedded
ts
// vite.config.ts
import vue from '@vitejs/plugin-vue';
import cds from '@central-design-system/vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue(), cds({ styles: { configFile: 'src/styles/settings.scss' } })],
  css: { preprocessorOptions: { scss: { api: 'modern-compiler' } } }
});

Плагин поддерживает только Vite (в Nuxt используйте классическую регистрацию через createCds({ components, directives })).

Что дальше ​