🌐 Nodejs.cn

Vite

PreviousNext

安装并配置 Vite。

创建项目

🌐 Create project

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

🌐 Start by creating a new Vue project using vite:

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

添加 Tailwind CSS

🌐 Add Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

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

🌐 Replace everything in src/style.css with the following:

src/style.css
@import "tailwindcss";

编辑 tsconfig.json 文件

🌐 Edit tsconfig.json file

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

🌐 The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

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

编辑 tsconfig.app.json 文件

🌐 Edit tsconfig.app.json file

将以下代码添加到 tsconfig.app.json 文件中，以解决 IDE 的路径问题：

🌐 Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

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

更新 vite.config.ts

🌐 Update 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

🌐 Run the CLI

运行 shadcn-vue init 命令来设置你的项目：

🌐 Run the shadcn-vue init command to setup your project:

pnpm dlx shadcn-vue@latest init

我们会问你几个问题来配置 components.json。

🌐 You will be asked a few questions to configure components.json.

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

添加组件

🌐 Add Components

你现在可以开始向你的项目添加组件。

🌐 You can now start adding components to your project.

pnpm dlx shadcn-vue@latest add button

上面的命令将会把 Button 组件添加到你的项目中。然后你可以这样导入它：

🌐 The command above will add the Button component to your project. You can then import it like this:

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

<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>
安装Nuxt