Vite

安装并配置 Vite。

观看 Vue School 关于如何安装 shadcn-vue 的视频。

创建项目

首先使用 vite 创建一个新的 Vue 项目。


pnpm create vite@latest my-vue-app --template vue-ts

添加 Tailwind CSS


pnpm add tailwindcss @tailwindcss/vite

将 src/style.css 中的所有内容替换为以下内容。

src/style.css

@import "tailwindcss";

编辑 tsconfig.json 文件

当前版本的 Vite 将 TypeScript 配置拆分为三个文件，其中两个需要进行编辑。在 tsconfig.json 和 tsconfig.app.json 文件的 compilerOptions 部分添加 baseUrl 和 paths 属性。

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

编辑 tsconfig.app.json 文件

将以下代码添加到 tsconfig.app.json 文件中，以便为您的 IDE 解析路径。

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

更新 vite.config.ts

将以下代码添加到 vite.config.ts 中，以便您的应用程序能够无误地解析路径。


pnpm add -D @types/node

import path from 'node:path'
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

运行 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 组件添加到您的项目中。您可以像这样导入它：

pages/index.vue

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>

安装 Nuxt

本页内容

创建项目添加 Tailwind CSS 编辑 tsconfig.json 文件编辑 tsconfig.app.json 文件更新 vite.config.ts 运行 CLI 添加组件