起步

安装

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

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

配置

Babel 插件

VEUI 目前在 npm 上直接以源码方式进行发布，在使用时必须提前转译（其中的优缺点和取舍可以参考 Henry Zhu 在 Babel 的官方博客上发布的这篇文章）。VEUI 的源代码依赖 Lodash 和 Vue JSX 相关的 Babel 插件才能正确转译。此外，VEUI 还提供了自己的 Babel 插件，以帮助应用书写更简单的 import 语句的同时最小化代码的体积。

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

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

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

webpack Loader

VEUI 采取了样式主题与组件代码分离的开发、发布方式。组件代码对样式代码没有显式的依赖，故以源码方式引入时，需要使用 veui-loader 配置关联的主题包。

如需使用默认的样式包 veui-theme-one，我们还需要确保在 webpack 配置中引入 veui-loader。同时由于 Less 3+ 不再默认开启内联 JavaScript 解析，而 veui-theme-one 依赖了这一功能，所以我们需要手动开启配置项。

另外，由于我们采用将 VEUI 及其依赖与项目一起打包的策略，需要手动指定相关的依赖包进行转译。

综上，我们需要在项目根目录下的 vue.config.js 中进行如下配置

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

veui-loader 选项的详细配置请参考 veui-loader 文档。

全局样式

在使用 veui-theme-one 时，需要先全局引入基础样式，包括样式的 normalize 及一些基本元素的样式。可以自行选择引入的方式。

从 JavaScript 引入：

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

或从样式中引入：

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