在 Nuxt 应用中设置和定制 Ant Design 系统

我通常不使用 UI 库，因为它们可能很繁琐且难以覆盖，这会导致臃肿。但是，Ant Design 最近赢得了我的喜爱，因为它易于使用，具有可扩展的默认值，并拥有精致的设计。

Nuxt 和 Ant Design 可以很好地协同工作，部分原因是 Nuxt 的代码拆分和树抖动功能，更不用说 Nuxt 的全新静态目标部署选项。我可以使用 Ant Design 以极高的性能分数提供应用程序。

将两者结合起来有点棘手，并且没有太多关于如何操作的文档，因此以下是如何设置的步骤。让我们开始吧！

安装 Ant.design

第一步是安装 ant-design-vue 包，以及 Less.js 和 less-loader，我们将在创建 Less 变量时需要它们

yarn add ant-design-vue less less-loader
# or
npm i ant-design-vue less less-loader

现在，让我们通过插件告诉 Nuxt 全局使用它。我们将创建一个名为 antd-ui.js 的文件

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)

您可能会注意到，与 Ant Design 入门指南中概述的过程不同，我们没有导入他们提到的全局 CSS 文件。这是因为我们将手动导入基础变量 Less 文件，以便我们可以覆盖它。

我们在 nuxt.config.js 文件中需要做几件事。首先，让我们注册我们刚刚创建的插件

plugins: ["@/plugins/antd-ui"],

接下来，我们将让 webpack 知道我们希望构建 Less

build: {
   loaders: {
     less: {
       lessOptions: {
         javascriptEnabled: true,
       },
    },
  },
}

最后，我们需要为我们的变量创建一个全局样式表，该样式表会导入 Ant Design 的默认值以及我们的覆盖。

css: [
  "~/assets/variables.less"
],

我们可以看到这个文件存在于 /assets 文件夹中，所以让我们创建它。我们将在其中创建一个名为 variables.less 的文件，并导入 Ant Design 的 Less 变量

@import '~ant-design-vue/dist/antd.less';

在这行下方，有许多变量可以覆盖。这只是一个示例。其余变量在这里，您需要通过它们的 @ 符号包含它们，并将它们更改为您希望的任何内容

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

我们可以开始了！无需将我们需要的内容导入到每个组件中，因为 Nuxt 现在会处理这个问题。如果您想覆盖变量中未包含的非常具体的样式，您也可以在 layouts/default.vue 文件中找到关联的类并覆盖它们。

Ant.design 和 Nuxt 为您提供了构建应用程序的强大框架，既快速又轻松。尽情享受吧！

安装 Ant.design

评论