Nuxt

安装并配置 Nuxt。

创建项目 ​

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

bash
npx nuxi@latest init my-app

安装 TypeScript ​

如果您遇到错误 ERROR: Cannot read properties of undefined (reading 'sys') (x4)，请继续将 TypeScript 作为依赖项安装，如 此问题 中所述

bash
npm install -D typescript

安装 TailwindCSS 模块 ​

bash
npx nuxi@latest module add @nuxtjs/tailwindcss

添加 Nuxt 模块 ​


安装以下软件包。

bash
npx nuxi@latest module add shadcn-nuxt

配置 nuxt.config.ts ​

ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  }
})

运行 CLI ​

运行 shadcn-vue 初始化命令来设置您的项目

bash
npx shadcn-vue@latest init

配置 components.json ​

您将被问及一些问题来配置 components.json

txt
Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Write configuration to components.json. Proceed? > Y/n

应用程序结构 ​

这是 Nuxt 应用程序的默认结构。您可以将其用作参考

txt
.
├── pages
│   ├── index.vue
│   └── dashboard.vue
├── components
│   ├── ui
│   │   ├── alert-dialog
│   │   │   ├── AlertDialog.vue
│   │   │   └── ...
│   │   ├── button
│   │   │   ├── Button.vue
│   │   │   └── ...
│   │   ├── dropdown-menu
│   │   │   ├── Dropdown.vue
│   │   │   └── ...
│   │   └── ...
│   ├── MainNav.vue
│   ├── PageHeader.vue
│   └── ...
├── lib
│   └── utils.ts
├── assets
│   ├── css
│   │   └── tailwind.css
├── app.vue
├── nuxt.config.ts
├── package.json
├── tailwind.config.js
└── tsconfig.json
  • 我将 UI 组件放在 components/ui 文件夹中。
  • 其余的组件，例如 <PageHeader /> 和 <MainNav /> 放在 components 文件夹中。
  • lib 文件夹包含所有实用程序函数。我有一个 utils.ts，在那里我定义了 cn 助手。
  • assets/css 文件夹包含全局 CSS。

就是这样 ​

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

bash
npx shadcn-vue@latest add button

上面的命令将 Button 组件添加到您的项目中。Nuxt autoImport 将处理组件的导入，您只需按如下方式使用它

vue
<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>
在 GitHub 上编辑此页面