9.7k
新建

Nuxt

上一页下一页

安装并配置 Nuxt。

创建项目

首先使用 create-nuxt-app 创建一个新的 Nuxt 项目

pnpm create nuxt@latest

添加 Tailwind CSS

如何设置 tailwindcss

pnpm add tailwindcss @tailwindcss/vite -D

将 app/assets/css/tailwind.css 中的所有内容替换为以下代码

app/assets/css/tailwind.css
@import "tailwindcss";

使用以下代码更新 nuxt.config.ts

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  // ...
  css: ['~/assets/css/tailwind.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

添加 Nuxt 模块

跳过此步骤会因为 Nuxt 的自动导入功能而触发大量控制台警告。

安装以下软件包。

pnpm dlx nuxi@latest module add shadcn-nuxt

配置 nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: ['shadcn-nuxt'],
  shadcn: {
    /**
     * Prefix for all the imported component.
     * @default "Ui"
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * Will respect the Nuxt aliases.
     * @link https://nuxtjs.org.cn/docs/api/nuxt-config#alias
     * @default "@/components/ui"
     */
    componentDir: '@/components/ui'
  }
})

添加一个用于提供 ssrWidth 的 Nuxt 插件（可选）

某些组件需要通过 VueUse 设置 ssrWidth，以避免在移动端出现水合（Hydration）错误。

将以下插件添加到你的 Nuxt 应用中：app/plugins/ssr-width.ts

阅读更多关于 useSSRWidth 的信息

import { provideSSRWidth } from '@vueuse/core'

export default defineNuxtPlugin((nuxtApp) => {
  provideSSRWidth(1024, nuxtApp.vueApp)
})

运行 Nuxt Prepare

如果你正在初始化一个新项目，你需要运行该命令以便 Nuxt 生成必要的 .nuxt 文件夹

pnpm dlx nuxi prepare

运行 CLI

运行 shadcn-vue 初始化命令来配置你的项目

pnpm dlx shadcn-vue@latest init

系统会询问你几个问题以配置 components.json。

Which color would you like to use as base color? › Neutral

添加组件

现在你可以开始将组件添加到你的项目中了。

pnpm dlx shadcn-vue@latest add button

上面的命令会将 Button 组件添加到你的项目中。Nuxt 的自动导入（autoImport）功能将处理组件的导入，你可以直接使用它

pages/index.vue
<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>
ViteAstro