create-bc-app 1.0.7

package/template-vue-js/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "template-vue-js",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build:test": "vite build --mode test",
+    "build:prod": "vite build --mode prod",
+    "lint": "eslint",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
+  },
+  "dependencies": {
+    "@fscut/bochui": "^0.1.4",
+    "@fsdev/element-plus": "^2.7.3",
+    "vue": "^3.4.29"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.6.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitest/ui": "^1.6.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.6.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "globals": "^15.8.0",
+    "happy-dom": "^14.12.3",
+    "less": "^4.2.0",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
+  }
+}

package/template-vue-js/public/group.svg

@@ -0,0 +1,3 @@
+<svg width="279" height="279" viewBox="0 0 279 279" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M139.498 0C62.5761 0 0 62.5761 0 139.498C0 216.42 62.5761 278.996 139.498 278.996C216.42 278.996 278.996 216.42 278.996 139.498C278.996 62.5761 216.42 0 139.498 0ZM30.1684 194.987C49.5097 191.592 78.7184 189.352 118.336 212.68C148.529 227.936 174.416 233.793 191.665 234.605C201.385 235.048 210.515 234.507 218.709 233.03C197.325 251.166 169.691 262.141 139.498 262.141C91.8341 262.141 50.4694 234.777 30.1684 194.987ZM255.866 178.156C242.873 191.567 225.746 196.858 206.381 200.057C180.199 204.387 145.576 199.786 118.065 192.084C100.127 187.064 83.6153 183.102 63.9295 180.937C46.9505 179.067 31.9648 178.55 23.2292 178.427C19.1198 166.172 16.8559 153.081 16.8559 139.474C16.8559 71.853 71.8776 16.8313 139.498 16.8313C142.008 16.8313 144.518 16.9297 146.979 17.0774C142.082 22.8847 133.396 33.3427 126.235 42.9888C115.432 57.5562 102.317 72.7881 102.341 96.0665C102.366 109.699 113.292 126.235 124.709 136.472C133.248 144.149 135.069 151.113 132.067 159.652C130.467 164.204 121.535 178.008 110.437 183.668L131.673 189.082C131.673 189.082 147.594 179.263 157.732 164.081C167.92 148.8 164.745 129.434 150.744 116.614C137.111 104.138 125.275 90.8744 126.358 80.0472C127.465 69.22 130.787 59.6971 143.165 41.783C150.941 30.5129 156.871 22.4664 159.824 18.5292C217.798 28.2491 262.14 78.743 262.14 139.449C262.14 153.008 259.901 166 255.866 178.156Z" fill="#1D46CC"/>
+</svg>

package/template-vue-js/src/App.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Example from './components/Example.vue'
+</script>
+
+<template>
+  <a href="https://wiki.fsdev.cn/frontend/storybook" target="_blank">
+    <img src="/group.svg" class="logo" alt="Vite logo">
+  </a>
+  <a href="https://wiki.fsdev.cn/frontend/storybook" target="_blank">
+    <img src="./assets/bochui.svg" class="logo vue" alt="Vue logo">
+  </a>
+  <Example msg="Vite + Vue + TS example project" />
+</template>
+
+<style scoped lang="less">
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

package/template-vue-js/src/assets/bochui.svg

@@ -0,0 +1,7 @@
+<svg width="735" height="136" viewBox="0 0 735 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M650.965 135.526C637.945 135.526 627.034 133.046 618.23 128.086C609.55 123.003 603.412 115.935 599.816 106.883C596.22 97.7069 595.6 87.043 597.956 74.8911L612.464 2.72406H649.291L634.969 74.3332C633.977 79.5411 633.668 84.067 634.04 87.911C634.412 91.7549 635.466 94.9789 637.202 97.5829C639.061 100.187 641.479 102.109 644.455 103.349C647.555 104.465 651.213 105.023 655.429 105.023C660.513 105.023 664.915 104.031 668.635 102.047C672.479 99.9388 675.641 96.6529 678.121 92.1889C680.725 87.601 682.709 81.6491 684.073 74.3332L698.395 2.72406H734.664L719.97 76.5651C716.126 95.9089 708.439 110.603 696.907 120.647C685.375 130.566 670.061 135.526 650.965 135.526Z" fill="#1D46CC"/>
+<path d="M550.589 2.72406H587.417L561.377 132.922H524.549L550.589 2.72406ZM474.516 132.922H437.688L463.728 2.72406H500.556L474.516 132.922ZM537.383 82.1451H482.142L488.28 51.6414H543.521L537.383 82.1451Z" fill="#1D46CC"/>
+<path d="M371.421 135.526C358.153 135.526 346.559 133.108 336.639 128.272C326.843 123.437 319.28 116.741 313.948 108.185C308.616 99.5049 305.95 89.523 305.95 78.2391C305.95 66.9553 307.934 56.5394 311.902 46.9915C315.87 37.4436 321.45 29.1977 328.641 22.2538C335.833 15.1859 344.389 9.73 354.309 5.88604C364.353 2.04209 375.451 0.120117 387.603 0.120117C399.631 0.120117 410.294 2.22809 419.594 6.44404C428.894 10.66 435.838 16.7359 440.426 24.6718L413.828 45.8755C410.852 40.9156 406.946 37.1336 402.111 34.5297C397.399 31.9257 391.757 30.6237 385.185 30.6237C378.861 30.6237 373.095 31.7397 367.887 33.9717C362.803 36.2037 358.401 39.3656 354.681 43.4576C350.961 47.5495 348.109 52.3855 346.125 57.9654C344.141 63.4213 343.149 69.3732 343.149 75.8212C343.149 81.6491 344.389 86.795 346.869 91.2589C349.473 95.5989 353.131 99.0089 357.843 101.489C362.679 103.845 368.383 105.023 374.955 105.023C380.783 105.023 386.363 103.845 391.695 101.489C397.151 99.1329 402.172 95.2889 406.76 89.957L428.522 111.347C421.206 120.151 412.774 126.413 403.226 130.132C393.679 133.728 383.077 135.526 371.421 135.526Z" fill="#1D46CC"/>
+<path d="M213.378 135.526C199.986 135.526 188.454 133.108 178.782 128.272C169.111 123.313 161.671 116.555 156.463 107.999C151.255 99.4428 148.651 89.523 148.651 78.2391C148.651 66.8313 150.635 56.4154 154.603 46.9915C158.571 37.4436 164.151 29.1977 171.343 22.2538C178.535 15.1859 187.09 9.73 197.01 5.88604C207.054 2.04209 218.028 0.120117 229.932 0.120117C243.324 0.120117 254.856 2.60008 264.527 7.56002C274.199 12.396 281.639 19.0919 286.847 27.6478C292.055 36.2037 294.659 46.1235 294.659 57.4074C294.659 68.8152 292.675 79.2931 288.707 88.841C284.739 98.2649 279.159 106.511 271.967 113.579C264.775 120.523 256.158 125.917 246.114 129.76C236.194 133.604 225.282 135.526 213.378 135.526ZM216.54 105.023C222.988 105.023 228.692 103.845 233.652 101.489C238.736 99.1329 243.014 95.8469 246.486 91.631C250.082 87.291 252.81 82.3931 254.67 76.9371C256.53 71.4812 257.46 65.7153 257.46 59.6394C257.46 53.8114 256.22 48.7275 253.74 44.3876C251.384 40.0476 247.912 36.6996 243.324 34.3437C238.86 31.8637 233.342 30.6237 226.77 30.6237C220.446 30.6237 214.742 31.8017 209.658 34.1577C204.574 36.5136 200.234 39.8616 196.638 44.2015C193.166 48.4175 190.5 53.2534 188.64 58.7094C186.78 64.1653 185.85 69.9312 185.85 76.0071C185.85 81.7111 187.028 86.795 189.384 91.2589C191.864 95.5989 195.336 99.0089 199.8 101.489C204.388 103.845 209.968 105.023 216.54 105.023Z" fill="#1D46CC"/>
+<path d="M0.121826 132.922L26.1615 2.72406H92.0047C106.76 2.72406 117.982 5.39003 125.67 10.722C133.358 15.9299 137.202 23.4318 137.202 33.2277C137.202 41.2876 134.97 48.1075 130.506 53.6874C126.042 59.2673 120.028 63.5453 112.464 66.5212C104.9 69.3732 96.4066 70.7992 86.9827 70.7992L92.1907 61.8713C104.219 61.8713 113.766 64.4753 120.834 69.6832C127.902 74.8911 131.436 82.207 131.436 91.6309C131.436 101.055 128.77 108.805 123.438 114.881C118.23 120.957 111.1 125.483 102.049 128.458C93.1206 131.434 83.0148 132.922 71.7309 132.922H0.121826ZM41.7853 106.325H73.7769C80.2248 106.325 85.3087 105.023 89.0287 102.419C92.8726 99.8148 94.7946 95.9709 94.7946 90.8869C94.7946 87.043 93.3686 84.253 90.5167 82.517C87.6647 80.7811 84.0068 79.9131 79.5428 79.9131H44.0173L49.0392 54.4314H78.6128C82.9528 54.4314 86.6107 53.8734 89.5867 52.7574C92.6867 51.6414 94.9806 49.9675 96.4686 47.7355C97.9566 45.5035 98.7006 42.7756 98.7006 39.5516C98.7006 35.9556 97.3366 33.3517 94.6086 31.7397C91.8807 30.1277 88.0987 29.3217 83.2628 29.3217H57.2231L41.7853 106.325Z" fill="#1D46CC"/>
+</svg>

package/template-vue-js/src/assets/group.svg

@@ -0,0 +1,3 @@
+<svg width="279" height="279" viewBox="0 0 279 279" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M139.498 0C62.5761 0 0 62.5761 0 139.498C0 216.42 62.5761 278.996 139.498 278.996C216.42 278.996 278.996 216.42 278.996 139.498C278.996 62.5761 216.42 0 139.498 0ZM30.1684 194.987C49.5097 191.592 78.7184 189.352 118.336 212.68C148.529 227.936 174.416 233.793 191.665 234.605C201.385 235.048 210.515 234.507 218.709 233.03C197.325 251.166 169.691 262.141 139.498 262.141C91.8341 262.141 50.4694 234.777 30.1684 194.987ZM255.866 178.156C242.873 191.567 225.746 196.858 206.381 200.057C180.199 204.387 145.576 199.786 118.065 192.084C100.127 187.064 83.6153 183.102 63.9295 180.937C46.9505 179.067 31.9648 178.55 23.2292 178.427C19.1198 166.172 16.8559 153.081 16.8559 139.474C16.8559 71.853 71.8776 16.8313 139.498 16.8313C142.008 16.8313 144.518 16.9297 146.979 17.0774C142.082 22.8847 133.396 33.3427 126.235 42.9888C115.432 57.5562 102.317 72.7881 102.341 96.0665C102.366 109.699 113.292 126.235 124.709 136.472C133.248 144.149 135.069 151.113 132.067 159.652C130.467 164.204 121.535 178.008 110.437 183.668L131.673 189.082C131.673 189.082 147.594 179.263 157.732 164.081C167.92 148.8 164.745 129.434 150.744 116.614C137.111 104.138 125.275 90.8744 126.358 80.0472C127.465 69.22 130.787 59.6971 143.165 41.783C150.941 30.5129 156.871 22.4664 159.824 18.5292C217.798 28.2491 262.14 78.743 262.14 139.449C262.14 153.008 259.901 166 255.866 178.156Z" fill="#1D46CC"/>
+</svg>

package/template-vue-js/src/components/ExampleComponent.vue

@@ -0,0 +1,28 @@
+<template>
+  <FsCard v-bind="curArgs" v-model="value">
+    <h1>{{ msg }}</h1>
+  </FsCard>
+</template>
+<script setup>
+import { computed, ref } from 'vue'
+
+defineOptions({
+  name: 'ExampleComponent'
+})
+
+defineProps<{ msg: string }>()
+
+const value = ref(true)
+const curArgs = computed(() => ({
+  type: 'content',
+  title: 'BOCHUI卡片标题',
+  isCardFold: true,
+  showSwitch: true,
+  switchOpenText: '开',
+  switchCloseText: '关'
+}))
+</script>
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import ElementPlus from '@fsdev/element-plus'
+import '@fsdev/element-plus/dist/index.css'
+import BochUI from '@fscut/bochui'
+import '@fscut/bochui/lib/style.css'
+
+createApp(App)
+.use(ElementPlus) 
+.use(BochUI)
+.mount('#app')

package/template-vue-js/src/style.css

@@ -0,0 +1,19 @@
+:root {
+  font-family: var(--font-family);
+}
+
+body {
+  margin         : 0;
+  display        : flex;
+  justify-content: center;
+  place-items    : center;
+  min-width      : 320px;
+  min-height     : 100vh;
+}
+
+#app {
+  max-width : 1280px;
+  margin    : 0 auto;
+  padding   : 2rem;
+  text-align: center;
+}

package/template-vue-js/test/App.test.ts

@@ -0,0 +1,16 @@
+import { mount } from '@vue/test-utils' 
+import { describe, it, expect } from 'vitest'
+import Example from '../src/components/ExampleComponent.vue'
+import App from '../src/App.vue'
+
+describe('App.vue', () => {
+  it('text app.vue', () => {
+    const wrapper = mount(App) 
+    // 渲染app.vue组件
+    const example = wrapper.findComponent(Example)
+    // 检查 example 组件是否存在
+    expect(example.exists()).toBe(true)
+    // 检查props 对不对  
+    expect(example.props('msg')).toBe('Vite + Vue + JS example project')
+  })
+})

package/template-vue-js/test/Example.test.ts

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils' 
+import { describe, it, expect } from 'vitest'
+import Example from '../src/components/ExampleComponent.vue'
+
+describe('Example.vue', () => {
+  it('render this correct text', () => {
+    const wrapper = mount(Example, {
+      props: {
+        msg: 'Vite + Vue + TS example project'
+      }
+    })
+    expect(wrapper.find('h1').text()).toBe('Vite + Vue + TS example project')
+  })
+
+  it('increments the count whine button is clicked', async() => {
+    const wrapper = mount(Example)
+    await wrapper.find('fs-button').trigger('click')
+    expect(wrapper.find('div').text()).toBe('Count: 1')
+  })
+})
+

package/template-vue-js/vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    global: true,
+    environment: 'happy-dom',
+    deps: {
+      inline: ['@vue']
+    }
+  }
+})

package/template-vue-ts/.eslintrc.cjs

@@ -0,0 +1,201 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/recommended',
+    'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-strongly-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'eslint:recommended'
+  ],
+  globals: {
+    'process': true
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser'
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'vue/multi-word-component-names': ['off'],
+    'vue/no-v-for-template-key': 'off',
+    'vue/no-multiple-template-root': 'off',
+    'vue/no-v-model-argument': 'off',
+    'vue/max-attributes-per-line': ['error', {
+      'singleline': {
+        'max': 3
+      },
+      'multiline': {
+        'max': 3
+      }
+    }],
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [2, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': [2, 'allow-null'],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [1, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': 'off',
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 1,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [1, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': ['error', 'always', { 'markers': ['/'] }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 0,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

package/template-vue-ts/.gitlab-ci.yml

@@ -0,0 +1,41 @@
+stages:
+  - install
+  - eslint
+  - notify
+
+cache:
+  key: '$CI_COMMIT_REF_SLUG'
+
+install:
+  stage: install
+  cache:
+         paths:
+           - node_modules/
+  script: 
+   - cnpm install
+  tags:
+   - sonar
+
+eslint:
+  stage: eslint
+  cache:
+    paths:
+      - node_modules/
+  script:
+    - npm run lint
+  tags:
+    - sonar
+ 
+notify-fail:
+  stage: notify
+  cache:
+    paths:
+      - node_modules/
+  script:
+    - >
+      curl 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=需要找企业微信管理员或斌斌'
+      -H 'Content-Type: application/json'
+      -d "{\"msgtype\":\"markdown\",\"markdown\":{\"content\":\"项目构建结果：<font color=\\"warning\\">失败</font>\n>本次构建由：  $GITLAB_USER_NAME 触发\n>项目名称：$CI_PROJECT_NAME\n>提交号：$CI_COMMIT_SHA\n>提交日志：$CI_COMMIT_MESSAGE\n>构建分支：  $CI_COMMIT_REF_NAME\n>流水线地址：[$CI_PIPELINE_URL]($CI_PIPELINE_URL)\"}}"
+  when: on_failure
+  tags:
+    - sonar

package/template-vue-ts/README.md

@@ -0,0 +1,16 @@
+# 这是一个 Vue 3 + TypeScript + Vite 的示例项目
+ 该项目已经配置：
+ - eslint
+ - less
+ - bochui
+ - eslint gitlab 代码检查流水线
+ - 单元测试
+ - vitest 官方文档
+ ![alt text](image.png)
+
+
+你可能需要配置：
+- vue-router
+- pinia
+- fs-utils
+- axios

package/template-vue-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/group.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>example project</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>