Note: Vue 3 + Rsbuild + Tailwind 4

225 条记录
21 私有链接

225 条记录 · 21 私有链接

过滤器

每页链接数

20 50 100

Note: Vue 3 + Rsbuild + Tailwind 4

咱们直接从 0 开始，一步一步把 Vue 3 + Rsbuild + Tailwind 4 搭起来，并顺便写个小页面练习一下。

一、准备环境（只做一次）

Node 版本
建议：Node 20+（Rsbuild 与很多新工具都推荐用新 LTS）。GitHub

用 node -v 看一下版本，不够的话去 node 官网装个 20 LTS。

包管理器
你熟悉啥用啥就行：npm / pnpm / yarn。
下面我用 pnpm 和 npm 都写出来，你挑一种照着敲。

二、用 Rsbuild 初始化 Vue 3 项目

1. 创建工程

在终端里到你想放项目的目录，执行：

# 用 pnpm
pnpm create rsbuild@latest

# 或者用 npm
npm create rsbuild@latest

随后会出现一堆交互式问题（大概是这样的）：Rsbuild

Project name: rsbuild-vue-tailwind-demo（随便起）
Select framework: 选 Vue 3
Language: 看你习惯，TypeScript 或 JavaScript 都可以

脚手架跑完之后，进入目录安装依赖：

cd rsbuild-vue-tailwind-demo

# 任选其一
pnpm install
# or
npm install

2. 运行开发环境

pnpm dev
# or
npm run dev

浏览器打开提示的地址（一般是 http://localhost:3000），能看到一个 Vue 3 的 hello 页面，就说明：

✅ Rsbuild + Vue 3 基本 OK 了

💡 背后发生了什么？
脚手架已经帮你：

安装了 @rsbuild/core
安装并启用了 @rsbuild/plugin-vue，让 Rsbuild 能编译 .vue 单文件组件Rsbuild+2极客大学+2

你可以打开 rsbuild.config.ts 看看，大概会有类似：

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
});

三、集成 Tailwind CSS 4

接下来我们在这个项目里接入 Tailwind CSS v4，按 Rsbuild 官方推荐方式走。Rsbuild+1

注意：Tailwind 4 必须用 .css 文件，不能放到 scss/less/stylus 里。Rsbuild

第 1 步：安装依赖

在项目根目录运行：

# pnpm
pnpm add -D tailwindcss @tailwindcss/postcss

# 或 npm
npm install -D tailwindcss @tailwindcss/postcss

第 2 步：配置 PostCSS

在项目根目录新建文件：postcss.config.mjs：

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

这一步就是告诉 Rsbuild：

“构建 CSS 的时候，请把 Tailwind 4 的 PostCSS 插件串进去。”Rsbuild

第 3 步：创建 Tailwind 入口 CSS

在 src 目录下新建 index.css（名字随便，但要统一）：

/* src/index.css */
@import "tailwindcss";

/* 你也可以加点全局样式，比如： */
body {
  @apply bg-slate-100 text-slate-900;
}

Tailwind 4 不再用 @tailwind base/components/utilities，而是直接 @import "tailwindcss"。Rsbuild+1

第 4 步：在入口文件引入 CSS

打开 src/main.ts（或 main.js），确认里头有类似：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css'; //  把刚才的 Tailwind 入口文件引进来

createApp(App).mount('#root');

如果没有，就自己加上一行 import './index.css';。

第 5 步：跑一下验证

重新启动 / 刷新 dev：

pnpm dev
# or
npm run dev

然后在 App.vue 里随便写一段带 Tailwind class 的 DOM，看是否生效。

例如改成：

<template>
  <main class="min-h-screen flex items-center justify-center">
    <section class="bg-white shadow-xl rounded-2xl p-8 max-w-md w-full">
      <h1 class="text-3xl font-bold mb-4 text-slate-900">
        Hello Rsbuild + Vue 3 + Tailwind 4 👋
      </h1>
      <p class="text-slate-600">
        如果你看到的是一个白色卡片 + 阴影 + 居中布局，
        说明 Tailwind 4 已经接好了。
      </p>
    </section>
  </main>
</template>

能看到样式就说明：

✅ Vue 3 + Rsbuild + Tailwind 4 组合已经跑通。

四、做一个小练习：组件 + 状态 + Tailwind 布局

既然你是练习，我们顺便再写一个简单的交互组件，熟悉一下这一套栈的开发体验。

继续编辑 App.vue：

<script setup>
import { ref } from 'vue';

const count = ref(0);

const cards = [
  { id: 1, title: '快速开发', desc: 'Rsbuild 提供极速构建和热更新体验。' },
  { id: 2, title: 'Vue 3 组合式 API', desc: '更好的类型推导与逻辑复用。' },
  { id: 3, title: 'Tailwind 4', desc: '实用类 + 新配置方式，更简单。' },
];
</script>

<template>
  <main class="min-h-screen bg-slate-100 flex items-center justify-center px-4">
    <section class="w-full max-w-3xl space-y-6">
      <!-- 顶部标题 + 计数器 -->
      <header
        class="bg-white rounded-2xl shadow-md px-6 py-4 flex items-center justify-between"
      >
        <div>
          <h1 class="text-2xl font-bold text-slate-900">
            Vue 3 + Rsbuild + Tailwind 4 练习
          </h1>
          <p class="text-sm text-slate-500 mt-1">
            尝试修改这个页面，多写几个组件和样式。
          </p>
        </div>

        <div class="flex items-center gap-3">
          <span class="text-sm text-slate-500">点击次数</span>
          <span class="text-2xl font-semibold text-blue-600 tabular-nums">
            {{ count }}
          </span>
          <button
            class="inline-flex items-center justify-center rounded-xl px-4 py-2
                     text-sm font-medium bg-blue-600 text-white
                     hover:bg-blue-700 active:scale-95
                     transition duration-150 ease-out"
            @click="count++"
          >
            点我 +
          </button>
        </div>
      </header>

      <!-- 卡片列表 -->
      <section class="grid gap-4 md:grid-cols-3">
        <article
          v-for="card in cards"
          :key="card.id"
          class="bg-white rounded-2xl shadow-sm p-4 border border-slate-100
                 hover:shadow-md hover:-translate-y-0.5 transition"
        >
          <h2 class="text-base font-semibold text-slate-900 mb-2">
            {{ card.title }}
          </h2>
          <p class="text-sm text-slate-600">
            {{ card.desc }}
          </p>
        </article>
      </section>
    </section>
  </main>
</template>

这个小 demo 会让你体验到：

组合式 API（ref、<script setup>）
Tailwind 4 的布局类（flex、grid、shadow 等）
Rsbuild 的 dev 体验（改一行马上刷新 / HMR）

五、接下来可以怎么系统练习？

你可以照这个顺序往下玩：

再做两个页面 + 路由

装 vue-router，做 /dashboard、/settings 之类的小后台。

抽几个基础组件

Button、Card、Modal，用 Tailwind 把常用样式封装一下。

体验构建速度

随便多加点页面、依赖，然后跑 pnpm build / npm run build 感受一下。

一个 Vue 3 + Rsbuild 项目，同时用 Tailwind 做布局，用 Vant 4 做移动端 UI 组件，跑在手机浏览器里的 H5。

一、简单版：在现有项目里装上 Vant 4

这里假设你已经有：Vue 3 + Rsbuild + Tailwind 4 项目，并且是 JS 版本。
没有 TS 也没关系，Vant 对 JS 完全兼容。

1. 安装 Vant

在你的项目根目录（有 package.json 的地方）运行：

# pnpm（你之前用这个就继续用）
pnpm add vant

# 或者 npm
npm install vant

Vant 官方推荐的 Vue3 安装方式就是这样：npm i vant。

2. 在入口 main.js 里注册 Vant 组件

打开 src/main.js，大致会是这样：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css'; // 你的 Tailwind 入口

我们先用“全局注册 + 全量样式”的最简单写法：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';

// ① 引入 Vant 所有样式
import 'vant/lib/index.css';
// ② 按需引入你要用的组件（先来几个常见的）
import { Button, Cell, CellGroup } from 'vant';

const app = createApp(App);

// ③ 全局注册这些组件
app.use(Button);
app.use(Cell);
app.use(CellGroup);

app.mount('#root');

先不用管“按需 css”这些优化，能跑起来最重要，后面再精细化。

3. 在 App.vue 里用上 Vant 组件（配合 Tailwind）

我们写一个完全偏移动端布局的小首页，替换你现在的 App.vue 内容就行：

<script setup>
import { ref } from 'vue';

const visitCount = ref(0);

const menus = [
  { id: 1, title: '订单管理', desc: '查看和管理用户订单' },
  { id: 2, title: '商品管理', desc: '维护商品信息和库存' },
  { id: 3, title: '用户管理', desc: '查看用户数据与行为' },
];
</script>

<template>
  <!-- 整个页面居中，适配手机宽度 -->
  <main class="min-h-screen bg-slate-100 flex justify-center px-4 py-6">
    <!-- 限制最大宽度为 480，手机上刚好一屏 -->
    <section class="w-full max-w-md space-y-4">
      <!-- 顶部：统计卡片 + Vant 按钮 -->
      <div class="bg-white rounded-2xl shadow-md p-4">
        <h1 class="text-xl font-bold mb-1">
          移动端控制台
        </h1>
        <p class="text-xs text-slate-500 mb-4">
          Vue 3 + Rsbuild + Tailwind 4 + Vant 4
        </p>

        <div class="flex items-center justify-between">
          <div>
            <p class="text-xs text-slate-400">今日访问</p>
            <p class="text-2xl font-semibold tabular-nums">
              {{ visitCount }}
            </p>
          </div>

          <!-- 这里是 Vant 的按钮组件 -->
          <van-button type="primary" @click="visitCount++">
            点我 +
          </van-button>
        </div>
      </div>

      <!-- 下方：Vant 的 Cell 列表 -->
      <van-cell-group inset title="功能">
        <van-cell
          v-for="item in menus"
          :key="item.id"
          :title="item.title"
          :label="item.desc"
          is-link
        />
      </van-cell-group>
    </section>
  </main>
</template>

只要前面的 main.js 注册好了 Button、Cell、CellGroup，这段就能正常跑起来。

4. 确认一下移动端 meta（很重要）

在 Rsbuild 生成的 index.html（或 public/index.html）里，确保 <head> 里面有这一句：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

没有的话自己加上，这样手机浏览器打开的时候，才会按手机宽度去布局，而不是当成 PC 页面。

到这一步，你已经有了：

✅ Vue 3 + Rsbuild + Tailwind 4
✅ Vant 4 组件可以正常使用
✅ 页面在手机浏览器里看起来就是标准的 H5 风格

二、进阶版：自动按需引入（写 <van-button> 就能用）

上面那种方式，每次要用新组件都要：

import { Button } from 'vant'
app.use(Button)

有点烦。
Vant 官方提供了一个专门的解析器：@vant/auto-import-resolver，配合 unplugin-vue-components 就能做到：

你在模板里写 <van-button>，它自动帮你 import + 注册 + 引入样式。

1. 安装按需引入相关依赖

在你项目根目录执行：

# pnpm
pnpm add -D @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import

# 或 npm
npm install -D @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import

@vant/auto-import-resolver 官方说明里有这些依赖的组合，并且明确支持 Rspack / Rsbuild。

2. 在 Rsbuild 里配置 unplugin（关键）

我们要利用 Rsbuild 对 Rspack 插件的支持，在 rsbuild.config.mjs（或 .js）里挂上这两个 unplugin。
Rsbuild 文档里已经给了 unplugin-vue-components/rspack 的示例。

如果你用的是 ESM 配置（比如 rsbuild.config.mjs）

// rsbuild.config.mjs
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

// 关键：用 rspack 版本的 unplugin
import Components from 'unplugin-vue-components/rspack';
import AutoImport from 'unplugin-auto-import/rspack';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [
        // 自动导入 Vue API（ref、computed 等）
        AutoImport({
          imports: ['vue'],
          resolvers: [VantResolver()],
          // dts 可以关掉，你是 JS 项目就无所谓了
          dts: false,
        }),
        // 自动导入组件（van-button / van-cell 等）
        Components({
          resolvers: [VantResolver()],
          dts: false,
        }),
      ],
    },
  },
});

如果你用的是 CommonJS 配置（比如 rsbuild.config.js）

// rsbuild.config.js
const { defineConfig } = require('@rsbuild/core');
const { pluginVue } = require('@rsbuild/plugin-vue');

const Components = require('unplugin-vue-components/rspack');
const AutoImport = require('unplugin-auto-import/rspack');
const { VantResolver } = require('@vant/auto-import-resolver');

module.exports = defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [
        AutoImport({
          imports: ['vue'],
          resolvers: [VantResolver()],
          dts: false,
        }),
        Components({
          resolvers: [VantResolver()],
          dts: false,
        }),
      ],
    },
  },
});

这段配置的意思是：

扫描你的 .vue 文件
看到 <van-button> / showToast 等
自动加上对应的 import 和样式引入，打包时做按需。

3. 改回“什么都不手动导入”的 main.js

有了自动导入之后，你可以把之前 main.js 里这些删掉：

// ❌ 这些可以删了
// import 'vant/lib/index.css';
// import { Button, Cell, CellGroup } from 'vant';
// app.use(Button);
// app.use(Cell);
// app.use(CellGroup);

只保留最基础的部分：

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';

createApp(App).mount('#root');

然后在 .vue 里你继续愉快地写：

<van-button type="primary">确定</van-button>
<van-cell-group>
  <van-cell title="xxx" />
</van-cell-group>

不需要再想着“我是不是忘记 import 什么组件了”。

三、下一步可以怎么玩？

你现在这套栈已经非常适合做 手机端后台 / H5 落地页 / 轻量 App 了。
下一步可以往这几个方向练习：

加上 vue-router

/login、/home、/settings 之类的路由
顶部用 Vant 的 <van-tabbar> 做底部导航

加个状态管理（Pinia）

存 token、用户信息
不同页面之间共享

做一个完整的“手机端管理控制台骨架”

登录页（Vant Form + Field）
Layout（顶部标题 + 主列表 + Tabbar）
1～2 个业务页面（比如订单列表 + 详情）

November 18, 2025 at 4:23:42 PM GMT+8 * · 永久链接

/shaare/B-T2LQ

过滤器

每页链接数

20 50 100