chore(examples): add vue-component-bundle example (#459)

Author: chenjiahan

examples/vue-component-bundle/README.md

@@ -0,0 +1,3 @@
+# @examples/vue-component
+
+This example demonstrates how to use Rslib to build a simple Vue component.

examples/vue-component-bundle/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@examples/vue-component-bundle",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "rslib build && vue-tsc"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-vue": "^1.0.5",
+    "@rslib/core": "workspace:*",
+    "typescript": "^5.6.3",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  }
+}

examples/vue-component-bundle/rslib.config.ts

@@ -0,0 +1,19 @@
+import { pluginVue } from '@rsbuild/plugin-vue';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  plugins: [pluginVue()],
+  lib: [
+    {
+      format: 'esm',
+      output: {
+        distPath: {
+          css: '.',
+        },
+      },
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+});

examples/vue-component-bundle/src/Counter.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h2 class="counter-text">Counter: {{ count }}</h2>
+    <counter-button @click="decrement" label="-" />
+    <counter-button @click="increment" label="+" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CounterButton from './CounterButton.vue';
+
+const count = ref(0);
+
+const increment = () => count.value++;
+const decrement = () => count.value--;
+</script>
+
+<style scoped>
+.counter-text {
+  font-size: 50px;
+}
+</style>

examples/vue-component-bundle/src/CounterButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <button type="button" @click="onClick">{{ label }}</button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  onClick: () => void;
+}>();
+</script>
+
+<style scoped>
+.button {
+  background: yellow;
+}
+</style>

examples/vue-component-bundle/src/index.ts

@@ -0,0 +1,3 @@
+import Counter from './Counter.vue';
+
+export { Counter };

examples/vue-component-bundle/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "outDir": "dist",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}