dc-ui-library

Документация: https://dc-ui-library.d4.dclouds.ru

Установка

npm i dc-ui-library

Подключение библиотеки

import DcUiLibrary from 'dc-ui-library'

...

Vue.use(DcUiLibrary)

Подключение стилей

$font--path: '~dc-ui-library/packages/theme/fonts';
@import '~dc-ui-library/packages/theme/styles/main.scss';

Если нужно использовать переменные и миксины из библиотеки нужно:

1. Установить style-resources-loader

npm i style-resources-loader

2. Добавить rule в vue.config

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        ///
        {
          test: /\.scss$/,
          use: [
            'sass-loader',
            {
              loader: 'style-resources-loader',
              options: {
                patterns: [
                  './node_modules/dc-ui-library/packages/theme/styles/variables.scss',
                  './node_modules/dc-ui-library/packages/theme/styles/mixins.scss',
                ],
              },
            },
          ],
        },
        ///
      ],
    },
  },
}

Иконки

Для использования иконок нужно:

1. Установить svg-sprite-loader

npm i svg-sprite-loader

2. Добавить иконки используемые в библиотеки

import { requireSvg } from '@/plugins/requireSvg'

requireSvg()

3. В vue.config добавить

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        ///
        {
          test: /\.svg$/,
          loader: 'svg-sprite-loader',
        },
        ///
      ],
    },
    plugins: [
      new SpriteLoaderPlugin(),
    ],
  },
  chainWebpack: (config) => {
    config.module.rules.delete('svg')
  },
}

Стили

Стили в компонентах написаны по методологии БЭМ, что позволяет легко изменить их

.dc-input {
  &__inner {
    padding: 20px 0;
    height: 50px;
    color: #000;
  }

  &--focus {
    border-color: #e9e9e9;
  }
}

Для каждого компонента есть свои переменые, которые можно изменить

Например:

$dc-input__hover-border-color: #d3d3d3;