起步

安装

使用 Vue CLI 创建项目以后，在项目根目录下运行：

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

配置

Babel 插件

将项目根目录中生成的 babel.config.js 修改为：

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

关于 babel-plugin-veui 的更详细信息请移步这里。

Vue CLI 配置

对于需要引入默认主题包 veui-theme-dls 的项目，我们需要在项目根目录下的 vue.config.js 中进行如下配置：

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)
  }
}

想了解配置 veui-loader 的更多细节，请移步这里。

全局样式

在使用默认主题 veui-theme-dls 时，需要先全局引入基础样式以及，包括样式的 normalize 及一些基本元素的样式。

从 JavaScript 引入：

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

数字字体

<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>

默认主题 veui-theme-dls 自带一款展示型的数字字体“Baidu Number”，但由于启用后会自动加载 Web 字体，故默认未包含在全局样式中。需要使用时请在项目中手动引入：

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

引入后可在 CSS 中使用名为 "Baidu Number" 的字体。同时在动态数字场景下，往往需要数字等宽以保证布局的相对稳定，此时可以设置 font-variant-numeric: tabular-nums 以开启字体中的对应 Open Type 功能。

.heading-numbers {
  font-family: "Baidu Number", sans-serif;
  font-variant-numeric: tabular-nums; /* 等宽场景 */
}