创建项目

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

如果您使用的是 JS 模板，则必须存在 jsconfig.json 才能使 CLI 运行时不出现错误。

# npm 6.x
npm create vite@latest my-vue-app --template vue-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue-ts

添加 Tailwind 及其配置

安装 tailwindcss 及其对等依赖项，然后生成 tailwind.config.js 并配置 postcss 插件。

Vite 已经拥有 postcss 依赖项，因此您无需在 package.json 中再次安装它。

npm install -D tailwindcss autoprefixer

如果您正在使用 postcss.config.js，那么这些更改将无关紧要。

vite.config

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

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'

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

编辑 tsconfig/jsconfig.json

如果您使用的是 TypeScript，则 Vite 的当前版本将配置拆分为三个文件，需要对 tsconfig.app.json 进行相同的更改。

在 tsconfig.json 或 jsconfig.json 的 compilerOptions 中添加以下代码，以便您的应用程序可以解析路径而不会出现错误。

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

更新 vite.config.ts

在 vite.config.ts 中添加以下代码，以便您的应用程序可以解析路径而不会出现错误。

# (so you can import "path" without error)
npm i -D @types/node

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

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'

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

删除默认 Vite 样式

删除默认 Vite 样式表 ./src/style.css

运行 CLI

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

npx shadcn-vue@latest init

配置 components.json

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

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/assets/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

更新 main.ts

删除 style.css 的导入并添加 tailwind 样式导入 import './assets/index.css'

import { createApp } from 'vue'
- import './style.css'
import App from './App.vue'
+ import './assets/index.css'

createApp(App).mount('#app')

就是这样

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

npx shadcn-vue@latest add button

上面的命令将 Button 组件添加到您的项目中。您可以像这样导入它。

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

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