使用 TailwindCSS 创建仪表板 - 第 1 部分

2025-06-04

使用 TailwindCSS 创建仪表板 - 第 1 部分

定义项目

我选择开发自己的仪表板的主题是有关我们的日常活动和健康。

在这个仪表板中，您将有两个主要目标：您每天想要活动多少分钟以及您想要走多少步。

秉承这些目标，我定义了三个关键绩效指标 (KPI)，这些可衡量的数值能够反映一个人实现关键健康目标的有效性。它们分别是：

  • 体重减轻
  • 活跃分钟数
  • 步骤

定义风格指南

在本节中，我将向您展示我为此仪表板选择的颜色、字体和图标。

  • 调色板

使用Material Design 的颜色选择工具，我最终得到了这两种美妙的颜色：

颜色

  • 字体系列

Paul D. Hunt 的 Source Sans Pro

字体

  • 字体粗细、大小和行高

为此，我将使用tailwind 所使用的方法，以免重新发明轮子。

  • 图像学

图标

由Flaticon的 Elias Bikbulatov 设计

使用 TailwindCSS 设置 NuxtJS

让我们看看以下步骤：

1.创建 NuxtJS 应用

现在我们已经找到了想要的方法，让我们开始吧。首先安装 NuxtJS 和 TailwindCSS。

如果这是您的第一个项目，请确保您已安装 node 和 npm，在本例中是 npx。

node -v
npm -v
npx -v
Enter fullscreen mode Exit fullscreen mode

如果没有，则必须从https://nodejs.org/下载节点

准备好后，我们就开始创建我们的应用程序吧！

npx create-nuxt-app <dashboard-name>
Enter fullscreen mode Exit fullscreen mode

现在，您需要回答所有问题才能自定义您的安装。我给您举个例子：

  • 项目名称：卷心菜

  • 项目描述： Cabbage 是一个用于衡量您的健康目标进展情况的仪表板。

  • 作者姓名： dawntraoz

  • 编程语言： JavaScript

  • 包管理器： npm

  • UI 框架（主要目标！）：Tailwind CSS

  • 自定义服务器框架： Express

  • Nuxt.js 模块： Axios、PWA

  • 代码检查工具： ESLint、Prettier

  • 渲染模式：通用（SSR）

我已经选择了我感兴趣的选项。如果你想了解 NuxtJS 的更多功能，我建议你查看它们的安装指南。

现在我们可以看到运行应用程序的选项，运行 dev one 来检查一切是否正常运行：

# dev server at localhost:3000:
cd cabbage
npm run dev

# prod:
cd cabbage
npm run build
npm run start

# generate static project
npm run generate
Enter fullscreen mode Exit fullscreen mode

如果我们已经有了徽标，我们可以用自己的图标、徽标组件和 PWA 所需的 icon.png 来替换它们。

启动应用程序

2. 配置 TailwindCSS

好吧，我们的环境已经到位，我们将配置 TailwindCSS 以便能够按照我们喜欢的方式使用它。

我做的第一件事是转到他们的默认配置文件并将整个文档复制到我的文件 tailwind.config.js 中。

这并没有增加任何东西，它只是让我们看到我们正在呼叫什么以及它给我们的价值，所以我们不必不断地查看指南。

我们现在要通过主题的扩展选项来定义项目的具体变量。正如我在从 Sketch 到 TailwindCSS 的文章中所解释的那样。

extend: {
    colors: {
      primary: {
        50: '#e0f3ed',
        100: '#b3e1d1',
        200: '#81ceb5',
        300: '#4fba98',
        400: '#27ab83',
        500: '#009c71',
        600: '#008e65',
        700: '#007e56',
        800: '#006e49',
        900: '#00522f'
      },
      complementary: {
        50: '#fce5ea',
        100: '#f9bdcb',
        200: '#f592a9',
        300: '#f06988',
        400: '#ea4c6f',
        500: '#e63658',
        600: '#d53156',
        700: '#c02c52',
        800: '#ab274f',
        900: '#861f48'
      }
    },
    fontFamily: {
      sans: ['Source Sans Pro', 'sans-serif']
    }
}
Enter fullscreen mode Exit fullscreen mode

就颜色变量而言，它们是新的变量，我们可以与 tailwindcss 提供的变量同时使用。但是，字体系列将被替换为“Source Sans Pro”，这是我们将在项目中使用的字体。

为了应用字体，我们需要从 Google Fonts 导入它，并将下面的代码添加到我们的 tailwind.css 文件中。

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap');
Enter fullscreen mode Exit fullscreen mode

一旦我们根据需求进行了配置，让我们开始删除 Nuxt 在 default.vue、index.vue、logo.vue 中作为示例添加的 css 和 html，并在 tailwind.css 文件上导入我们的通用样式：

@import 'tailwindcss/screens'; /* Add Screens to work with the breakpoints easily */

@import './common-styles.css';
Enter fullscreen mode Exit fullscreen mode

创建一个名为 common-styles.css 的文件并添加您的自定义基本样式：

/* Common Styles */
body {
    @apply font-normal text-base;
}

/* - Headings */
h1,
h2,
h3,
h4,
h5,
h6 { @apply font-semibold; }

h1 {
    @apply text-4xl;
}
h2 {
    @apply text-3xl;
}
h3 {
    @apply text-2xl;
}
h4 {
    @apply text-xl;
}
h5 {
    @apply text-lg;
}
h6 {
    @apply text-base;
}
Enter fullscreen mode Exit fullscreen mode

这里重要的是要有清晰的想法并尝试构建我们的代码，以便我们可以根据需要一点一点地扩展它。

开始构建布局

在这个项目中，我们有一个侧边栏，我们将在其中添加菜单，并在右侧添加一个面板，我们可以在其中查看所有信息。

为此，我们在布局中创建一个名为partials的文件夹，并创建一个名为Sidebar.vue的新组件。在其中，我们将我们的徽标和 nuxt 链接添加到我们创建的页面（目前是index.vue ），然后我们将添加styleguide.vue页面。

我们来看看代码：

在组件模板中，我们将添加 logo 以及包含内部链接列表的导航。此外，我们还将使用 tailwind 类来设置其样式：

  • bg- * 背景颜色。
  • p- 、**py- 、**px- * 分别在垂直和水平的所有侧面填充。
  • md: * 表示我们正在使用媒体查询 min-width: 768px
  • w- * 元素的宽度
<template>
  <div class="bg-white py-4 px-3 md:py-6 md:px-8">
    <logo class="w-10 h-10 md:w-12 md:h-12" />
    <nav>
      <ul class="py-4">
        <li class="py-2">
          <nuxt-link to="/" class="nav-link">
            <!-- icon svg -->
          </nuxt-link>
        </li>
        <li class="py-2">
          <nuxt-link to="/styleguide" class="nav-link">
            <!-- icon svg -->
          </nuxt-link>
        </li>
      </ul>
    </nav>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

在这个组件中，我们只需要导入我们使用的 svg，我将它们添加为 vue 组件，以便以后能够使用它们并施加效果。

<script>
import Logo from '~/components/Logo.vue'
// Import icons

export default {
  components: {
    Logo,
    // Icons
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

对于链接，我创建了一个名为.nav-link的类，并添加了 Tailwind 样式，以便轻松复用。如您所见，为了添加以 md: 开头的类（媒体查询），我使用了 @screen md，我们之前已将其导入到 *tailwind.css 中。

链接样式就像一个按钮，为了实现可点击的效果，我使用了shadow- 、 box-shadow 属性和 **transitions 。为了使图标居中，我使用了 **flex * ，它是我的好朋友。

<style scoped>
.nav-link {
  @apply transition-all duration-1000 ease-in-out block w-10 h-10 bg-white text-primary-400 rounded-full flex items-center justify-center shadow-inner;

  @screen md {
    @apply w-12 h-12;
  }
}
.nav-link:hover,
.nuxt-link-exact-active {
  @apply bg-primary-400 text-white shadow-lg;
}
</style>
Enter fullscreen mode Exit fullscreen mode

现在我们有了侧边栏，我们必须将它添加到default.vue布局中，顺便说一下，我们要告诉它至少占据整个屏幕的高度：

<template>
  <div class="flex min-h-screen bg-primary-50">
    <sidebar />
    <nuxt class="flex-auto h-screen overflow-y-auto p-6" />
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 
<script>
import Sidebar from '~/layouts/partials/Sidebar.vue'

export default {
  components: {
    Sidebar
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

为了在页面之间实现微妙的过渡，我们将使用 nuxtJS 提供的类添加动画：

<style scoped>
.page-enter-active {
  animation: acrossIn 0.4s ease-out both;
}
.page-leave-active {
  animation: acrossOut 0.6s ease-in both;
}
@keyframes acrossIn {
  0% {
    transform: translate3d(-0.35%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes acrossOut {
  0% {
    transform: translate3d(0%, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(20%, 0, 0);
    opacity: 0;
  }
}
</style>
Enter fullscreen mode Exit fullscreen mode

结果如下：

结果卷心菜

在接下来的文章中，我将添加新的组件并解释该过程，我希望这对您非常有帮助，并激励您使用 TailwindCSS，它使我们的生活更轻松🥰

我将存储库留在这里，以便您想看一看，而不必在没有亲自尝试的情况下阅读帖子。

https://github.com/Dawntraoz/cabbage

文章来源：https://dev.to/dawntraoz/create-a-dashboard-with-tailwindcss-part-1-3cda
Devto 翻译
PREV
可视化前端性能瓶颈
NEXT
有什么区别：持续集成、持续交付和持续部署。