@ctzy-web-client/create-web-client 1.0.4

package/templates/qiankun-subapp-vue-template/jsconfig.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true
+    }
+}

package/templates/qiankun-subapp-vue-template/mocks/test.js

@@ -0,0 +1,60 @@
+export default [
+  {
+    url: '/api/app1/test',
+    method: 'post',
+    response: () => {
+      return {
+        status: 0,
+        totalRecCount: 100,
+        data: [
+          {
+            id: 1,
+            coverImagePath:
+              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F008jVjSaly1h7qs2falb6j30xc0hiaby.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670167112&t=b697bd35640101f031b63a210638111c',
+            price: 1.1,
+            desc: '一二三四五六七八就',
+          },
+          {
+            id: 2,
+            coverImagePath: '',
+            price: 2,
+            desc: '大萨达大大大大所大大所大所大所大所大多撒所大',
+          },
+          {
+            id: 3,
+            coverImagePath:
+              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F008jVjSaly1h7qs2falb6j30xc0hiaby.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670167112&t=b697bd35640101f031b63a210638111c',
+            price: 12.234,
+            desc: '奥术大师大所多奥术大师大',
+          },
+          {
+            id: 4,
+            coverImagePath:
+              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F008jVjSaly1h7qs2falb6j30xc0hiaby.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670167112&t=b697bd35640101f031b63a210638111c',
+            price: 15,
+            desc: '的点点滴滴多多多多多多多多多多的点点滴滴的毒打所所大',
+          },
+        ],
+      };
+    },
+  },
+  {
+    url: '/api/app1/test/get',
+    method: 'post',
+    response: () => {
+      return {
+        status: 0,
+        totalRecCount: 100,
+        data: [
+          {
+            id: 1,
+            coverImagePath:
+              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Fmw690%2F008jVjSaly1h7qs2falb6j30xc0hiaby.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670167112&t=b697bd35640101f031b63a210638111c',
+            price: 1.1,
+            desc: '一二三四五六七八就',
+          },
+        ],
+      };
+    },
+  },
+];

package/templates/qiankun-subapp-vue-template/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "web-client-app-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.19.6",
+    "@types/node": "^18.11.9",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "typescript": "^4.6.4",
+    "unplugin-vue-macros": "^0.16.0",
+    "mockjs": "^1.1.0",
+    "vite": "^3.1.0",
+    "vite-plugin-babel": "^1.1.2",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-externals": "^0.5.1"
+  },
+  "dependencies": {
+    "@ctzy-web-client/ioc-annotations": "^1.0.6",
+    "@ctzy-web-client/plugin-component-vue": "^1.0.5",
+    "element-plus": "^2.2.19",
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.6",
+    "web-base-client-vue": "^1.0.7",
+    "vite-plugin-qiankun": "^1.0.15"
+  }
+}

package/templates/qiankun-subapp-vue-template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/qiankun-subapp-vue-template/src/interceptors/AppRequestInterceptors.js

@@ -0,0 +1,50 @@
+import { service } from '@ctzy-web-client/ioc-annotations';
+import { RequestInterceptors } from 'web-base-client-vue';
+
+@service(RequestInterceptors)
+export default class AppRequestInterceptors extends RequestInterceptors {
+  /**
+   * 请求发起的处理程序
+   * @param {Object} config 请求配置
+   * @returns
+   */
+  request(config) {
+    return config;
+  }
+
+  /**
+   * 处理请求发起的错误
+   * @param {Error} e 错误
+   */
+  requestError(e) {
+    return Promise.reject(new Error('请求错误'));
+  }
+
+  /**
+   * 响应处理程序
+   * @param {Object} response 响应对象
+   * @param {Object} response.config 请求配置
+   * @param {Object} response.data 请求结果
+   * @param {Number} response.status 请求状态
+   * @param {String} response.statusText 请求状态描述
+   * @param {Object} response.request 请求对象
+   * @returns
+   */
+  response(response) {
+    let { data, status, statusText } = response;
+
+    if (status === 200) {
+      return data;
+    } else {
+      throw new Error(`请求异常:[${status}] ${statusText}`);
+    }
+  }
+
+  /**
+   * 处理系统级别响应错误 404  等等
+   * @param {Error} e 错误
+   */
+  responseError(e) {
+    return Promise.reject(new Error('请求错误'));
+  }
+}

package/templates/qiankun-subapp-vue-template/src/interceptors/AppRouterInterceptors.js

@@ -0,0 +1,25 @@
+import { service } from '@ctzy-web-client/ioc-annotations';
+import { RouterInterceptors } from 'web-base-client-vue';
+
+@service(RouterInterceptors)
+export default class AppRouterInterceptors extends RouterInterceptors {
+  /**
+   * 设置一个导航守卫，在任何导航前执行。
+   * @param {*} to 我们要导航到的路由地址
+   * @param {*} from 我们从哪里来的路由地址
+   * @param {*} next next (可选) - 回调以验证导航
+   */
+  beforeEach(to, from, next) {
+    return next();
+  }
+
+  /**
+   * 设置一个导航守卫，在导航即将解析之前执行。在这个状态下，所有的组件都已经被获取，并且其他导航守卫也已经成功。
+   * @param {*} to 我们要导航到的路由地址
+   * @param {*} from 我们从哪里来的路由地址
+   * @param {*} next next (可选) - 回调以验证导航
+   */
+  beforeResolve(to, from, next) {
+    return next();
+  }
+}

package/templates/qiankun-subapp-vue-template/src/main.js

@@ -0,0 +1,23 @@
+import { Application } from 'web-base-client-vue';
+import { qiankunWindow } from 'vite-plugin-qiankun/es/helper';
+import WebClientComponent from '@ctzy-web-client/plugin-component-vue';
+import "@ctzy-web-client/plugin-component-vue/style"
+
+//自动加载拦截器
+import.meta.glob('./interceptors/**/*.js', { eager: true });
+//自动加载服务
+import.meta.glob('./services/**/*.js', { eager: true });
+
+const appName = import.meta.env.VITE_APPLICATION_NAME;
+
+const applicaiton = new Application(appName, {
+  global: qiankunWindow,
+  routeBaseUrl: `/${appName}`,
+  request: {
+    baseURL: import.meta.env.VITE_REQUEST_BASE_URL,
+    timeout: import.meta.env.VITE_REQUEST_TIMEOUT * 1000,
+  },
+  pages: import.meta.glob('./pages/*/index.vue'),
+});
+
+applicaiton.use(WebClientComponent).mount('#app');

package/templates/qiankun-subapp-vue-template/src/models/TestDataModel.js

@@ -0,0 +1,45 @@
+import { dataTable, tableColumn, dataForm, formColumn } from 'web-base-client-vue';
+
+@dataTable({ name: 'test', title: '测试数据模型' })
+@dataForm({ name: 'test', title: '测试' })
+export default class TestDataModel {
+  @formColumn({ title: '编号', visible: false })
+  @tableColumn({ title: '编号', visible: false })
+  id = '';
+
+  @formColumn({ title: '封面图', name: 'coverImagePath' })
+  @tableColumn({
+    title: '封面图',
+    name: 'coverImagePath',
+    type: 'image',
+    width: '100px',
+  })
+  coverImage = '';
+
+  @formColumn({
+    title: '价格',
+    type: 'number',
+    rules: [
+      { pattern: /\d{1,10}(\.\d{1,2})?$/, message: '请输入正确的价格格式!' },
+    ],
+  })
+  @tableColumn({
+    title: '价格',
+    type: 'number',
+    rule: 'd:2',
+    width: '100px',
+    template: '￥${value} - adas',
+  })
+  price = '';
+
+  @formColumn({
+    title: '描述',
+    submitName: 'title',
+    rules: [{ type: 'string', max: 10, message: '描述不能超过10个字符!' }],
+  })
+  @tableColumn({ title: '描述', rule: 's:10', width: '200px' })
+  desc = '';
+
+  @formColumn({ title: '状态' })
+  status = '';
+}

package/templates/qiankun-subapp-vue-template/src/pages/form/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-card>
+    <template #header>
+      <el-page-header class="page-header" :icon="null">
+        <template #title>
+          <el-button link @click="$router.back()"> 返回</el-button>
+        </template>
+        <template #content>默认表单 </template>
+        <template #extra>
+          <el-button type="primary" @click="dataForm1.submit()"
+            >保存表单</el-button
+          >
+        </template>
+      </el-page-header>
+    </template>
+    <BwaDataForm
+      ref="dataForm1"
+      :dataForm="dataForm"
+      :recID="'1'"
+      labelWidth="200px"
+    >
+      <!-- 使用(form-item-字段名)的插槽可用于自定义指定字段的输入框 -->
+      <template v-slot:form-item-status="{ record, column, dataForm }">
+        <ElSelect v-model="record.status" clearable>
+          <ElOption :value="1">1</ElOption>
+          <ElOption :value="2">2</ElOption>
+          <ElOption :value="3">3</ElOption>
+        </ElSelect>
+      </template>
+    </BwaDataForm>
+    <el-main> 表单结果:{{ dataForm1 ? dataForm1.dataForm.data : '' }} </el-main>
+  </el-card>
+  <el-card style="margin-top: 20px">
+    <template #header>
+      <el-page-header class="page-header" :icon="null">
+        <template #title>
+          <el-button link @click="$router.back()"> 返回</el-button>
+        </template>
+        <template #content>自由布局表单 </template>
+        <template #extra>
+          <el-button type="primary" @click="dataForm2.submit()"
+            >保存表单</el-button
+          >
+        </template>
+      </el-page-header>
+    </template>
+    <!-- <BwaDataForm
+      ref="dataForm2"
+      :dataForm="dataForm"
+      :recID="id"
+      labelPosition="top"
+    >
+      <el-container>
+        <el-main>
+          <BwaDataFormItem name="desc" />
+        </el-main>
+        <el-aside width="400px">
+          <el-main>
+            <BwaDataFormItem name="price" />
+            <BwaDataFormItem name="coverImage" />
+            <BwaDataFormItem name="status">
+              <template v-slot="{ record, column, dataForm }">
+                <ElSelect v-model="record.status" clearable>
+                  <ElOption :value="1">1</ElOption>
+                  <ElOption :value="2">2</ElOption>
+                  <ElOption :value="3">3</ElOption>
+                </ElSelect>
+              </template>
+            </BwaDataFormItem>
+          </el-main>
+        </el-aside>
+      </el-container>
+    </BwaDataForm> -->
+    <el-main> 表单结果:{{ dataForm2 ? dataForm2.dataForm.data : '' }} </el-main>
+  </el-card>
+</template>
+<script>
+import { ref, reactive, watch, computed } from 'vue';
+import { useDataForm } from 'web-base-client-vue';
+import TestDataModel from '../../models/TestDataModel';
+export const route = '/form/:id?';
+export const parent = '';
+export const meta = {};
+export default {
+  name: 'data-from',
+  props: {
+    id: String,
+  },
+  setup() {
+    const dataForm1 = ref();
+    const dataForm2 = ref();
+
+    const dataForm = useDataForm(TestDataModel);
+
+    const columnNames = ['coverImage', 'price', 'desc'];
+    // 获取当前显示的列列表
+    const columns = dataForm.value.getDisplayColumns();
+
+    watch(
+      computed(() => dataForm.value.data.status),
+      (status) => {
+        // 显示所有列
+        for (const column of columns) {
+          column.show();
+        }
+
+        if (typeof status !== 'number') {
+          return;
+        }
+
+        // 隐藏选中列
+        dataForm.value.getColumn(columnNames[status - 1]).hide();
+      }
+    );
+
+    return { dataForm, dataForm1, dataForm2 };
+  },
+};
+</script>
+<style scoped></style>

package/templates/qiankun-subapp-vue-template/src/pages/home/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <BwaDataTable :dataTable="dataTable">
+    <template #header="{ dataTable }">
+      <el-page-header class="page-header" :icon="null">
+        <template #breadcrumb>
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>测试二级页面</el-breadcrumb-item>
+            <el-breadcrumb-item>测试三级页面</el-breadcrumb-item>
+          </el-breadcrumb>
+        </template>
+        <template #title>
+          {{ dataTable.title }}
+        </template>
+        <template #content></template>
+        <template #extra>
+          <el-button type="primary" @click="$router.push('/form')"
+            >新增</el-button
+          >
+        </template>
+      </el-page-header>
+    </template>
+
+    <template v-slot:table-col-price="{ row, index, column, dataTable }">
+      {{ row.price }} {{ index }}
+    </template>
+
+    <template v-slot:column-append>
+      <BwaDataTableColumn label="ddd">
+        <template v-slot="{ row }"> dsadsadsadsada </template>
+      </BwaDataTableColumn>
+    </template>
+  </BwaDataTable>
+</template>
+<script>
+import { useService, useDataTable } from 'web-base-client-vue';
+import TestServices from '../../services/TestServices';
+import TestDataModel from '../../models/TestDataModel';
+export const route = '/';
+export const parent = '';
+export const meta = {};
+export default {
+  name: 'home',
+  setup() {
+    const testServices = useService(TestServices);
+    const dataTable = useDataTable(TestDataModel);
+
+    testServices.value.loadData();
+
+    return {
+      TestDataModel,
+      dataTable,
+    };
+  },
+};
+</script>
+<style scoped></style>

package/templates/qiankun-subapp-vue-template/src/services/TestServices.js

@@ -0,0 +1,21 @@
+import { service, inject } from '@ctzy-web-client/ioc-annotations';
+import { SimpleOrm } from 'web-base-client-vue';
+import TestDataModel from '../models/TestDataModel';
+
+/**
+ * 测试服务
+ */
+@service()
+export default class TestServices {
+  /**
+   * @type {SimpleOrm}
+   */
+  @inject(SimpleOrm)
+  orm = null;
+
+  async loadData() {
+    const testDataList = await this.orm.fill(TestDataModel);
+
+    console.log(testDataList);
+  }
+}

package/templates/qiankun-subapp-vue-template/vite.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, loadEnv } from "vite";
+import babel from "vite-plugin-babel";
+import { viteMockServe } from "vite-plugin-mock";
+import vue from "@vitejs/plugin-vue";
+import vueMacros from "unplugin-vue-macros/vite";
+import qiankunPlugin from "vite-plugin-qiankun";
+import { viteExternalsPlugin } from "vite-plugin-externals";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode, command }) => {
+  const applicationName = loadEnv(mode, process.cwd()).VITE_APPLICATION_NAME;
+
+  const plugins = [
+    qiankunPlugin(applicationName, { useDevMode: true }),
+    babel({
+      babelConfig: {
+        babelrc: false,
+        configFile: false,
+        plugins: [
+          ["@babel/plugin-proposal-decorators", { version: "legacy" }],
+          ["@babel/plugin-proposal-class-properties", { loose: true }],
+        ],
+      },
+    }),
+    viteMockServe({
+      mockPath: "./mocks",
+      localEnabled: command === "serve",
+    }),
+    vueMacros({
+      plugins: {
+        vue: vue(),
+      },
+    }),
+  ];
+
+  if (process.env.NODE_ENV === "production") {
+    plugins.unshift(
+      viteExternalsPlugin({
+        'vue': "Vue",
+        'vue-router': "VueRouter",
+        "web-base-client-vue": "WebClientVue",
+        "@ctzy-web-client/plugin-component-vue": "WebClientPluginComponentVue",
+      })
+    );
+  }
+
+  return {
+    base: `/${applicationName}/`,
+    server: {
+      port: 5001,
+    },
+    plugins,
+  };
+});

package/templates/qiankun-vue-template/.env

@@ -0,0 +1,4 @@
+# 请求相关 默认超时时间 单位秒
+VITE_REQUEST_TIMEOUT = 10
+# 请求相关 默认请求前缀
+VITE_REQUEST_BASE_URL = /api

package/templates/qiankun-vue-template/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>test</title>
+  </head>
+  <body>
+    <script>
+      window.__DELAY_REGISTER_SERVICES__ = [];
+    </script>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>

package/templates/qiankun-vue-template/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}

package/templates/qiankun-vue-template/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "web-client-app-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "mockjs": "^1.1.0",
+    "unplugin-vue-macros": "^0.16.0",
+    "vite": "^3.1.0",
+    "vite-plugin-babel": "^1.1.2",
+    "vite-plugin-mock": "^2.9.6"
+  },
+  "dependencies": {
+    "@ctzy-web-client/ioc-annotations": "^1.0.6",
+    "@ctzy-web-client/plugin-component-vue": "^1.0.5",
+    "element-plus": "^2.2.19",
+    "vite-plugin-qiankun": "^1.0.15",
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.6",
+    "web-base-client-vue": "^1.0.7"
+  }
+}

package/templates/qiankun-vue-template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/qiankun-vue-template/src/main.js

@@ -0,0 +1,21 @@
+import * as WebClientVue from 'web-base-client-vue';
+import { Application } from 'web-base-client-vue';
+import WebClientPluginComponentVue from '@ctzy-web-client/plugin-component-vue';
+import { qiankunWindow } from 'vite-plugin-qiankun/es/helper';
+import '@ctzy-web-client/plugin-component-vue/style/index.css';
+
+//自动加载拦截器
+import.meta.glob('./interceptors/**/*.js', { eager: true });
+//自动加载服务
+import.meta.glob('./services/**/*.js', { eager: true });
+
+qiankunWindow.WebClientVue = WebClientVue;
+qiankunWindow.WebClientPluginComponentVue = WebClientPluginComponentVue;
+
+
+const applicaiton = new Application('base', {
+  global: qiankunWindow,
+  pages: import.meta.glob('./pages/*/index.vue'),
+});
+
+applicaiton.mount('#app');

package/templates/qiankun-vue-template/src/pages/app/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <BwaMicroApplication entry="http://localhost:5001/app1/" name="app1" />
+</template>
+
+<script setup>
+import { BwaMicroApplication } from 'web-base-client-vue';
+
+defineOptions({
+  name: 'App',
+});
+</script>
+
+<script>
+export const route = '/:appName*';
+</script>

package/templates/qiankun-vue-template/src/services/ApplicaitionService.js

@@ -0,0 +1,6 @@
+import { service } from "@ctzy-web-client/ioc-annotations";
+
+@service()
+export class ApplicationService {
+    
+}

package/templates/qiankun-vue-template/src/services/UserService.js

@@ -0,0 +1,4 @@
+import { service } from '@ctzy-web-client/ioc-annotations';
+
+@service()
+export class UserService {}

package/templates/qiankun-vue-template/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite';
+import babel from 'vite-plugin-babel';
+import vue from '@vitejs/plugin-vue';
+import vueMacros from 'unplugin-vue-macros/vite';
+import { viteMockServe } from 'vite-plugin-mock';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode, command }) => {
+  return {
+    server: {
+      port: 5002,
+    },
+    plugins: [
+      babel({
+        babelConfig: {
+          babelrc: false,
+          configFile: false,
+          plugins: [
+            ['@babel/plugin-proposal-decorators', { version: 'legacy' }],
+            ['@babel/plugin-proposal-class-properties', { loose: true }],
+          ],
+        },
+      }),
+      viteMockServe({
+        mockPath: './mocks',
+        localEnabled: command === 'serve',
+      }),
+      vueMacros({
+        plugins: {
+          vue: vue(),
+        },
+      }),
+    ],
+  };
+});