Getting started

Installation

After creating a project using Vue CLI, run the following command in the project root directory:

npm i --save veui veui-theme-dls
npm i --save-dev less less-loader veui-loader babel-plugin-veui babel-plugin-lodash

Configuration

Babel plugin

Modify the babel.config.js generated in the project root directory as follows:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    'veui',
    'lodash'
  ]
}

For more detailed information about babel-plugin-veui, please visit here.

Vue CLI configs

For projects that need to import the default theme package veui-theme-dls, we need to configure the vue.config.js in the project root directory as follows:

const veuiLoaderOptions = require('veui-theme-dls/veui-loader-options')

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  },
  transpileDependencies: ['veui'],
  chainWebpack (config) {
    config.module
      .rule('veui')
      .test(/\.vue$/)
      .pre()
      .use('veui-loader')
      .loader('veui-loader')
      .tap(() => veuiLoaderOptions)
  }
}

For more details on configuring veui-loader, please visit here.

Global stylesheet

When using the default theme veui-theme-dls, you need to first globally import the basic styles, including the normalize style and some basic element styles.

Import from JavaScript:

import 'veui-theme-dls/common.less'

Numeric font

<template>
<article>
  <section>
    <strong :class="{ tabular }">
      {{ value }}
    </strong>
    <veui-checkbox v-model="tabular">
      Tabular numbers
    </veui-checkbox>
  </section>
  <veui-slider
    v-model="value"
    class="slider"
    :step="1"
    :min="19000101"
    :max="21001231"
  />
</article>
</template>

<script>
import { Checkbox, Slider } from 'veui'

export default {
  components: {
    'veui-checkbox': Checkbox,
    'veui-slider': Slider
  },
  data () {
    return {
      tabular: true,
      value: 20170320
    }
  }
}
</script>

<style scoped>
section {
  display: flex;
  align-items: center;
  gap: 24px;
}

strong {
  font-family: "Baidu Number", sans-serif;
  font-size: 32px;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.slider {
  width: 50%;
  margin-top: 24px;
}
</style>

The default theme veui-theme-dls comes with a display-type numeric font "Baidu Number". However, since it automatically loads web fonts when enabled, it is not included in the global styles by default. If you need to use it, please manually import it into your project:

import 'veui-theme-dls/typography.less'

After importing, you can use the font named "Baidu Number" in CSS. At the same time, in dynamic numeric scenarios, it is often necessary to ensure the relative stability of the layout by making the digits monospaced. You can set font-variant-numeric: tabular-nums to enable the corresponding Open Type feature in the font.

.heading-numbers {
  font-family: "Baidu Number", sans-serif;
  font-variant-numeric: tabular-nums; /* Monospaced scenario */
}