使用 Vue CLI 2.x 初始化项目

首先，使用 vue-cli 选择创建 webpack 模板的项目。然后在项目根目录下运行：

$ npm i --save veui veui-theme-one
$ npm i --save-dev veui-loader babel-preset-veui

配置

Babel 插件

VEUI 目前在 npm 上直接以源码方式进行发布，在使用时必须提前转译。VEUI 的源代码依赖 Lodash 和 Vue JSX 相关的 Babel 插件才能正确转译。此外，VEUI 还提供了自己的 Babel 插件，以帮助应用书写更简单的 import 语句的同时最小化代码的体积。

我们提供了 babel-preset-veui 来方便在使用时快速添加转译配置，只需要在项目的 .babelrc 文件中添加如下配置即可：

{
  "presets": [
    "veui"
  ]
}

babel-preset-veui 包含了以下包提供的功能：

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

webpack Loader

VEUI Loader

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

如需使用默认的样式包 veui-theme-one，我们还需要确保在 webpack 配置中引入 veui-loader。

在 Vue webpack 模板生成的 build/webpack.base.conf.js 中的 module.rules 最前方插入如下配置：

{
  test: /\.vue$/,
  loader: 'veui-loader',
  enforce: 'pre',
  options: {
    modules: [
      {
        package: 'veui-theme-one',
        fileName: '${module}.less'
      },
      {
        package: 'veui-theme-one',
        fileName: '${module}.js',
        transform: false
      }
    ]
  },
  include: [resolve('node_modules/veui')]
}

另外，请记得在 babel-loader 的 include 配置中加入 veui、vue-awesome 和 resize-detector 包：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('node_modules/veui'),
    resolve('node_modules/vue-awesome'),
    resolve('node_modules/resize-detector')
  ]
}

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

Less Loader

由于 Less 3+ 不再默认开启内联 JavaScript 解析，而 veui-theme-one 依赖了这一功能，所以我们需要手动开启配置项。

使用 Vue CLI 2.x + webpack 模板初始化的项目，请在项目的 build/utils.js 文件中进行如下修改即可：

-    less: generateLoaders('less'),
+    less: generateLoaders('less', { javascriptEnabled: true }),

© Baidu, Inc. 2019