@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.config.ts 文件使用默认的 tailwind 方式创建配置。

在内部，@nuxtjs/tailwindcss 会合并您可以添加配置的三个位置。按照优先级顺序，选项分别是

1. tailwind.config.ts 文件
2. nuxt.config.ts 文件中的 tailwindcss 属性
3. Storefront UI 默认配置

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

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

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

自定义 tailwind.css 文件

如果您要创建自己的 Tailwind CSS 文件，请确保为 Tailwind 的每个层类型（基础、组件和实用程序）添加 @tailwind 指令。

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

准备就绪

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