Baidu DLS

返回 DLS

起步

为了使 VEUI 在你的项目中运行,请按下述步骤完成所有安装及配置。

安装

使用 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/app'
  ],
  plugins: [
    'veui',
    'lodash'
  ]
}

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

webpack Loader

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

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

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

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

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

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

全局样式

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

除此之外还需自行引入 :focus-visible polyfill 以更好地处理焦点交互样式(为什么?)。

从 JavaScript 引入:

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