Getting started

Installation

After scaffolding the project with CLI tools, run the following under the its root directory:

npm i --save veui veui-theme-one
npm i --save-dev veui-loader babel-plugin-veui babel-plugin-lodash

Configuration

Babel plugin

Currently VEUI is published on npm in the form of source code and has to be transpiled before use. (Read more about the trade-off of publishing source code in this post published by Henry Zhu on Babel's blog.) Babel plugins for Lodash and Vue JSX are required to transpile VEUI and VEUI provides its own Babel plugin to offer minimized code size while simply importing components.

You need to configure the auto-generated babel.config.js as follows:

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    'veui',
    'lodash'
  ]
}

Read more about babel-plugin-veui here.

webpack Loader

VEUI's style code is separate from its components. The component code doesn't explicitly depend on style code so veui-loader is needed to specify and inject style package into the components.

If you want to use veui-theme-one, the default style package, you need import and configure veui-loader for webpack. As Less 3+ no longer enable JavaScript evaluation by default, which veui-theme-one relies on, you need to manually enable this option.

We intend to transpile and build VEUI and its dependencies along with the application code itself so you need to add the related packages into the transpilation process.

In general, you need to configure vue.config.js in the root directory as follows:

const lessOptions = {
  javascriptEnabled: true
}

module.exports = {
  transpileDependencies: [
    /[/\\]node_modules[/\\]veui[/\\]/,
    /[/\\]node_modules[/\\]vue-awesome[/\\]/,
    /[/\\]node_modules[/\\]resize-detector[/\\]/
  ],
  chainWebpack: config => {
    config.module
      .rule('veui')
      .test(/\.vue$/)
      .pre()
      .use('veui-loader')
      .loader('veui-loader')
      .tap(() => {
        return {
          modules: [
            {
              package: 'veui-theme-one',
              fileName: '{module}.less'
            },
            {
              package: 'veui-theme-one',
              fileName: '{module}.js',
              transform: false
            }
          ]
        }
      })

    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => {
      config.module
        .rule('less')
        .oneOf(type)
        .use('less-loader')
        .tap(options => Object.assign({}, options, lessOptions))
    })
  }
}

For more detailed configuration instructions, see veui-loader's documentation.

Global stylesheet

When using veui-theme-one, you need to import the base stylesheet, which includes style normalization. You can choose either of the following way to import base stylesheet.

Import from JavaScript:

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

Import from the styles:

@import "~veui-theme-one/common.less";