feat: add rsbuild vue3-vant example (#33)

rsbuild/vue3-vant/.gitignore

@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

rsbuild/vue3-vant/README.md

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

rsbuild/vue3-vant/auto-imports.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const showToast: typeof import('vant/es')['showToast']
+}

rsbuild/vue3-vant/components.d.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanActionBar: typeof import('vant/es')['ActionBar']
+    VanActionBarButton: typeof import('vant/es')['ActionBarButton']
+    VanActionBarIcon: typeof import('vant/es')['ActionBarIcon']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanCol: typeof import('vant/es')['Col']
+    VanSwipe: typeof import('vant/es')['Swipe']
+    VanSwipeItem: typeof import('vant/es')['SwipeItem']
+    VanTag: typeof import('vant/es')['Tag']
+  }
+}

rsbuild/vue3-vant/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "rsbuild-vue3-vant",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "vant": "^4.8.2",
+    "vue": "^3.4.12"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.4.15",
+    "@rsbuild/plugin-vue": "^0.4.15",
+    "@vant/auto-import-resolver": "^1.1.0",
+    "typescript": "^5.3.3",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0"
+  }
+}

rsbuild/vue3-vant/rsbuild.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "@rsbuild/core";
+import { pluginVue } from "@rsbuild/plugin-vue";
+import AutoImport from "unplugin-auto-import/rspack";
+import Components from "unplugin-vue-components/rspack";
+import { VantResolver } from "@vant/auto-import-resolver";
+
+export default defineConfig({
+  plugins: [pluginVue()],
+  tools: {
+    rspack: {
+      plugins: [
+        AutoImport({
+          resolvers: [VantResolver()],
+        }),
+        Components({
+          resolvers: [VantResolver()],
+        }),
+      ],
+    },
+  },
+});

rsbuild/vue3-vant/src/App.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="goods">
+    <van-swipe class="goods-swipe" :autoplay="3000">
+      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
+        <img :src="thumb" />
+      </van-swipe-item>
+    </van-swipe>
+
+    <van-cell-group>
+      <van-cell>
+        <template #title>
+          <div class="goods-title">{{ goods.title }}</div>
+          <div class="goods-price">{{ formatPrice(goods.price) }}</div>
+        </template>
+      </van-cell>
+      <van-cell class="goods-express">
+        <template #title>
+          <van-col span="10">Express: {{ goods.express }}</van-col>
+          <van-col span="14">Remain: {{ goods.remain }}</van-col>
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+    <van-cell-group class="goods-cell-group">
+      <van-cell value="Title" icon="shop-o" is-link @click="sorry">
+        <template #title>
+          <span class="van-cell-text">Text</span>
+          <van-tag class="goods-tag" type="danger">Text</van-tag>
+        </template>
+      </van-cell>
+      <van-cell title="Title" icon="location-o" is-link @click="sorry" />
+    </van-cell-group>
+
+    <van-cell-group class="goods-cell-group">
+      <van-cell title="Title" is-link @click="sorry" />
+    </van-cell-group>
+
+    <van-action-bar>
+      <van-action-bar-icon icon="chat-o" @click="sorry">
+        Text
+      </van-action-bar-icon>
+      <van-action-bar-icon icon="cart-o" @click="onClickCart">
+        Text
+      </van-action-bar-icon>
+      <van-action-bar-button type="warning" @click="sorry">
+        Text
+      </van-action-bar-button>
+      <van-action-bar-button type="danger" @click="sorry">
+        Text
+      </van-action-bar-button>
+    </van-action-bar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import appleURL from "./static/apple.jpeg";
+
+const goods = ref({
+  title: "Goods Title",
+  price: 2680,
+  express: "Express",
+  remain: 19,
+  thumb: [appleURL],
+});
+
+const formatPrice = (price: number) => {
+  return "¥" + (price / 100).toFixed(2);
+};
+
+const onClickCart = () => {
+  // replace this with your actual router logic
+};
+
+const sorry = () => {
+  showToast("TODO");
+};
+</script>
+
+<style lang="less">
+body {
+  font-size: 16px;
+  background-color: #f8f8f8;
+  -webkit-font-smoothing: antialiased;
+}
+
+.goods {
+  padding-bottom: 50px;
+
+  &-swipe {
+    img {
+      width: 100%;
+      display: block;
+    }
+  }
+
+  &-title {
+    font-size: 16px;
+  }
+
+  &-price {
+    color: #f44;
+  }
+
+  &-express {
+    color: #999;
+    font-size: 12px;
+    padding: 5px 15px;
+  }
+
+  &-cell-group {
+    margin: 15px 0;
+  }
+
+  &-tag {
+    margin-left: 5px;
+  }
+}
+</style>

rsbuild/vue3-vant/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@rsbuild/core/types" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  // eslint-disable-next-line
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

rsbuild/vue3-vant/src/index.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.mount('#root');

rsbuild/vue3-vant/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src", "./auto-imports.d.ts", "components.d.ts"]
+}