安装

• 安装 Konsta UI
• 添加配置
• Roboto 字体
• 用法

我们假设您已经拥有一个使用 Vue 和 Tailwind CSS 配置的项目。

安装 Konsta UI

首先，我们需要安装 Konsta UI 库

npm i konsta

添加配置

然后，我们需要使用 Konsta UI 配置扩展我们的 Tailwind CSS 配置。

在您的 tailwind.config.js 文件中

const konstaConfig = require('konsta/config');

// wrap your config with konstaConfig
module.exports = konstaConfig({
  // rest of your usual Tailwind CSS config here
  ...
});

konstaConfig 将使用一些 Konsta UI 所需的额外变体和辅助工具扩展默认 (或您自定义的) Tailwind CSS 配置。

Roboto 字体

Konsta UI 为 iOS 主题使用系统字体，为 Material Design 主题使用 Roboto 字体。

如果您开发的是 Web 应用程序，则需要将 Roboto 字体 添加到您的应用程序中才能正确显示。

例如，可以从 Google Fonts 添加

在 HTML 中

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

或在 CSS 中

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

用法

安装过程完成后，让我们检查一下 如何在 Vue 应用程序中使用 Konsta UI 组件。