Storefront-ui · Nuxt 模块

安装所有依赖项

使用 Nuxt 3，最快的入门方式是使用 @storefront-ui/nuxt 模块。Storefront-io Nuxt 模块将会在 nuxt 和 storefront-ui tailwindcss 预设中自动安装 @nuxtjs/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 组件中使用的 utility 类，您需要将路径添加到 content 属性，该路径指向您的 node_modules 文件夹所在的位置。在下面的示例中，我们使用 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 utility 类都将在您的项目中可用。由于 storefront-ui 也从模块提供，因此 @storefront-ui/vue 可以从 Nuxt 自动导入中获得。