feat: add vue3 demo

demos/vue3/README.md

@@ -0,0 +1,7 @@
+# vue3 demo
+
+## 运行
+```
+pnpm i
+pnpm dev
+```

demos/vue3/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "vue3-demo",
+    "ignored": true,
+    "version": "0.0.1",
+    "scripts": {
+      "dev": "pnpm --filter vue3-* --parallel dev",
+      "build": "pnpm --filter vue3-* --parallel build",
+      "serve": "pnpm --filter vue3-* --parallel serve",
+      "stat": "pnpm --filter vue3-* --parallel stat"
+    }
+  }
+

demos/vue3/vue-3-base/emp.config.ts

@@ -0,0 +1,41 @@
+import {defineConfig} from '@empjs/cli'
+import lightningcss from '@empjs/plugin-lightningcss'
+import Vue3 from '@empjs/plugin-vue3'
+import {pluginRspackEmpShare} from '@empjs/share'
+export default defineConfig(() => {
+  return {
+    plugins: [
+      Vue3(),
+      lightningcss(),
+      pluginRspackEmpShare({
+        name: 'vue3Base',
+        // dts: {
+        //   consumeTypes: true,
+        //   generateTypes: {
+        //     compilerInstance: 'vue-tsc',
+        //   },
+        // },
+        shared: {
+          vue: {
+            requiredVersion: '^3',
+          },
+        },
+        exposes: {
+          './ButtonComponent': './src/components/ButtonComponent',
+          './TableComponent': './src/components/TableComponent',
+          './JSXComponent': './src/components/JSXComponent',
+          './TsxScript': './src/components/TsxScript',
+          './Antd': './src/Antd',
+          './Home': './src/Home',
+        },
+      }),
+    ],
+    appEntry: 'main.ts',
+    server: {port: 9301, open: false},
+    html: {title: 'EMP Vue3 Base'},
+    debug: {
+      clearLog: false,
+      showRsconfig: false,
+    },
+  }
+})

demos/vue3/vue-3-base/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "vue3-base",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "devDependencies": {
+    "@empjs/cli": "3.2.7",
+    "@empjs/plugin-vue3": "3.2.0"
+  },
+  "dependencies": {
+    "@empjs/plugin-lightningcss": "3.2.2",
+    "@empjs/share": "3.2.0",
+    "ant-design-vue": "^4.1.2",
+    "vue": "^3.4.20"
+  },
+  "scripts": {
+    "dev": "emp dev",
+    "build": "emp build",
+    "start": "emp serve",
+    "stat": "emp build --analyze",
+    "emp": "emp"
+  },
+  "author": "",
+  "license": "ISC"
+}

demos/vue3/vue-3-base/src/Antd.ts

@@ -0,0 +1,2 @@
+import Antd from 'ant-design-vue'
+export default Antd

demos/vue3/vue-3-base/src/App.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1>Vue 3 Base</h1>
+    <span>svg component:</span>
+    <!-- <Logo style="width: 100px" /> -->
+    <span>svg image:</span>
+    <div :style="{
+      display: 'inline-block',
+      width: '100px',
+      height: '100px',
+      background: `url(${LogoImage}) no-repeat`,
+    }"></div>
+    <TableComponent />
+    <ButtonComponent />
+    <JSXComponent />
+    <Count />
+    <TsxScript />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'App',
+}
+</script>
+
+<script lang="ts" setup>
+// import Logo from './logo.svg?component'
+import LogoImage from './logo.svg'
+import TableComponent from './components/TableComponent.vue'
+import ButtonComponent from './components/ButtonComponent.vue'
+import JSXComponent from './components/JSXComponent'
+import Count from './components/Count.vue'
+import TsxScript from './components/TsxScript.vue'
+</script>
+
+<style lang="less">
+body {
+  padding: 10px;
+}
+</style>

demos/vue3/vue-3-base/src/Home.vue

@@ -0,0 +1,6 @@
+<template>
+    <div>
+      <h1>Host Home</h1>
+    </div>
+  </template>
+

demos/vue3/vue-3-base/src/bootstrap.ts

@@ -0,0 +1,6 @@
+import Antd from 'ant-design-vue'
+import {createApp} from 'vue'
+import App from './App.vue'
+const app = createApp(App)
+app.use(Antd)
+app.mount('#emp-root')

demos/vue3/vue-3-base/src/components/ButtonComponent.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <AButton type="primary" @click="add">add</AButton>
+    <span class="value">value: {{ value }}</span>
+    <p>
+      {{JSON.stringify(props)}}
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ButtonComponent',
+}
+</script>
+
+<script lang="ts" setup>
+import {ref} from 'vue'
+
+const value = ref(0)
+
+function add() {
+  value.value++
+}
+const props = defineProps({
+  attr1: String,
+  attr2: Boolean
+})
+</script>
+
+<style lang="less" scoped>
+.value {
+  margin-left: 10px;
+}
+</style>

demos/vue3/vue-3-base/src/components/Count.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+import {Table} from 'ant-design-vue'
+import {defineComponent} from 'vue'
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+]
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+]
+export default defineComponent({
+  data() {
+    return {
+      count: 1,
+      dataSource,
+      columns,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    {{ count.toFixed(2) }}
+
+    <a-table :data-source="dataSource" :columns="columns" />
+
+    <pre>{{ JSON.stringify(dataSource, null, 2) }}</pre>
+  </div>
+</template>

demos/vue3/vue-3-base/src/components/JSXComponent.tsx

@@ -0,0 +1,22 @@
+import {Button} from 'ant-design-vue'
+import {defineComponent, ref} from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'JSXComponent',
+  setup() {
+    const value = ref(0)
+    function add() {
+      value.value++
+    }
+
+    return () => (
+      <div>
+        <p>============ jsx component start =============</p>
+        <Button onClick={add}>add</Button>
+        <span class={styles.space}>value:{value.value}</span>
+        <p>============ jsx component end =============</p>
+      </div>
+    )
+  },
+})

demos/vue3/vue-3-base/src/components/TableComponent.vue

@@ -0,0 +1,45 @@
+<template>
+  <ATable :data-source="dataSource" :columns="columns" />
+</template>
+
+<script lang="ts">
+export default {
+  name: 'TableComponent',
+}
+</script>
+
+<script lang="ts" setup>
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+]
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+]
+</script>
+
+<style lang="less" scoped></style>

demos/vue3/vue-3-base/src/components/TsxScript.vue

@@ -0,0 +1,37 @@
+<script lang="tsx">
+import {defineComponent, ref} from 'vue';
+
+export default defineComponent({
+  name: 'TsxScript',
+  // https://vuejs.org//guide/typescript/composition-api.html#without-script-setup
+  props: {
+    attr1: String,
+    attr2: Boolean
+  },
+  setup(props) {
+    const count = ref(0)
+    function add() {
+      count.value++
+    }
+    console.log(props)
+
+    return () => (
+      <>
+        <p>============ lang=tsx component start =============</p>
+        <AButton type="primary" onClick={add}>add</AButton>
+        <span class="value">count: {count.value}</span>
+        <p>
+          props: {JSON.stringify(props)}
+        </p>
+        <p>============ lang=tsx component end =============</p>
+      </>
+    )
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.value {
+  margin-left: 10px;
+}
+</style>

demos/vue3/vue-3-base/src/components/index.module.less

@@ -0,0 +1,3 @@
+.space {
+  margin-left: 10px;
+}

demos/vue3/vue-3-base/src/main.ts

@@ -0,0 +1 @@
+import('./bootstrap')

demos/vue3/vue-3-base/src/shims-vue.d.ts

@@ -0,0 +1,19 @@
+declare module '*.vue' {
+  import type {DefineComponent} from 'vue'
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
+  export default component
+}
+
+declare module '*.svg' {
+  import type Vue from 'vue'
+  import type {VueConstructor} from 'vue'
+  const content: VueConstructor<Vue>
+  export default content
+}
+
+declare module '*.less' {
+  const classes: {readonly [key: string]: string}
+  export default classes
+}
+
+declare module 'ATable'

demos/vue3/vue-3-base/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@empjs/cli/emp-tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "allowJs": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}