Storefront-ui · Nuxt 模块

安装所有依赖

使用 Nuxt 3，最快的入门方式是使用 @storefront-ui/nuxt 模块。Storefront-io Nuxt 模块将在 nuxt 内部自动安装 @nuxtjs/tailwindcss 和 storefront-ui tailwindcss 预设。

# npm
npm i -D @storefront-ui/nuxt

# yarn
yarn add -D @storefront-ui/nuxt

# pnpm
pnpm add -D @storefront-ui/nuxt

将 Nuxt Tailwind 模块添加到你的 `nuxt.config.ts`

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@storefront-ui/nuxt']
})

Tailwind 配置

由于我们在底层使用 @nuxtjs/tailwindcss，因此可以在 nuxt.config.ts 文件中使用 tailwindcss 属性。除此之外，还有默认的 tailwind 方式通过 tailwind.config.ts 文件创建配置。

在内部，@nuxtjs/tailwindcss 将合并您可以添加配置的三个位置。按优先级排序，这些选项是

tailwind.config.ts 文件
在 nuxt.config.ts 文件中使用 tailwindcss 属性
Storefront UI 默认配置

::tip 添加已安装包的路径为了让 Tailwind 正确检测 Storefront UI 组件中使用的实用程序类，您需要将 node_modules 文件夹所在位置的路径添加到 content 属性。在下面的示例中，我们使用的是 node_modules 的默认位置，但如果您在 monorepo 中工作，则可能会有所不同。:

// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default <Config>{
  content: ['./**/*.vue'],
};

自定义 `tailwind.css` 文件

如果您要创建自己的 Tailwind CSS 文件，请确保为 Tailwind 的每个图层类型（base、components 和 utilities）添加 @tailwind 指令。

/* ~/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

您已准备就绪

现在，您可以在应用程序中导入 Storefront UI 组件，并且 @storefront-ui/vue 库中的所有 Tailwind 实用程序都可以在您的项目中使用。因为 storefront-ui 也从模块提供，所以 @storefront-ui/vue 可以通过 Nuxt 自动导入获得。