diff --git a/README.md b/README.md
index 61d903f7..7f591827 100644
--- a/README.md
+++ b/README.md
@@ -412,6 +412,7 @@ In the Vue runtime environment, the default is the installed code that has been
No back-end API is configured in the `Vue` case. For details, please refer to `React` and `api` to set reverse proxy
+> Vue example powered by [**modern-vue-template**](https://github.com/byoungd/modern-vue-template)
## Contribution
Thanks [pleasedmi](https://github.com/pleasedmi)、[Elena211314](https://github.com/Elena211314)、[zb201307](https://github.com/zb201307) for donation
diff --git a/examples/vue/.commitlintrc.js b/examples/vue/.commitlintrc.js
new file mode 100644
index 00000000..4032119a
--- /dev/null
+++ b/examples/vue/.commitlintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+ extends: ['cz'],
+}
diff --git a/examples/vue/.cz-config.js b/examples/vue/.cz-config.js
new file mode 100644
index 00000000..7d6fdf69
--- /dev/null
+++ b/examples/vue/.cz-config.js
@@ -0,0 +1,33 @@
+module.exports = {
+ types: [
+ { value: 'feat', name: 'feat: 增加新功能' },
+ { value: 'fix', name: 'fix: 修复bug' },
+ { value: 'ui', name: 'ui: 更新UI' },
+ { value: 'refactor', name: 'refactor: 代码重构' },
+ { value: 'release', name: 'release: 发布' },
+ { value: 'deploy', name: 'deploy: 部署' },
+ { value: 'docs', name: 'docs: 修改文档' },
+ { value: 'test', name: 'test: 增删测试' },
+ { value: 'chore', name: 'chore: 更改配置文件' },
+ { value: 'style', name: 'style: 样式修改不影响逻辑' },
+ { value: 'revert', name: 'revert: 版本回退' },
+ { value: 'add', name: 'add: 添加依赖' },
+ { value: 'minus', name: 'minus: 版本回退' },
+ { value: 'del', name: 'del: 删除代码/文件' },
+ { value: 'init', name: 'init: 初始提交' },
+ ],
+ scopes: [],
+ messages: {
+ type: '选择更改类型:\n',
+ scope: '更改的范围:\n',
+ // 如果allowcustomscopes为true，则使用
+ // customScope: 'Denote the SCOPE of this change:',
+ subject: '简短描述:\n',
+ body: '详细描述. 使用"|"换行:\n',
+ breaking: 'Breaking Changes列表:\n',
+ footer: '关闭的issues列表. E.g.: #31, #34:\n',
+ confirmCommit: '确认提交?',
+ },
+ allowCustomScopes: true,
+ allowBreakingChanges: ['feat', 'fix'],
+}
diff --git a/examples/vue/.editorconfig b/examples/vue/.editorconfig
new file mode 100644
index 00000000..5d126348
--- /dev/null
+++ b/examples/vue/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/examples/vue/.env.development b/examples/vue/.env.development
new file mode 100644
index 00000000..1c984373
--- /dev/null
+++ b/examples/vue/.env.development
@@ -0,0 +1,16 @@
+# server env
+VITE_SERVER_ENV = 'development'
+
+# open dev login
+VITE_OPEN_DEV_LOGIN = 'YES'
+
+# drop console
+VITE_BUILD_DROP_CONSOLE = 'NO'
+
+# base api
+VITE_BASE_API = 'https://api.xxx.com'
+
+# Versions
+VITE_VER_MAIN = '1'
+VITE_VER_SUB = '0.0.1'
+VITE_VER_STATE = 'dev'
diff --git a/examples/vue/.env.production b/examples/vue/.env.production
new file mode 100644
index 00000000..b017391b
--- /dev/null
+++ b/examples/vue/.env.production
@@ -0,0 +1,16 @@
+# server env
+VITE_SERVER_ENV = 'production'
+
+# open dev login
+VITE_OPEN_DEV_LOGIN = 'NO'
+
+# drop console
+VITE_BUILD_DROP_CONSOLE = 'YES'
+
+# base api
+VITE_BASE_API = 'https://api.xxx.com'
+
+# Versions
+VITE_VER_MAIN = '1'
+VITE_VER_SUB = '0.0.1'
+VITE_VER_STATE = 'prod'
diff --git a/examples/vue/.env.test b/examples/vue/.env.test
new file mode 100644
index 00000000..1ced4540
--- /dev/null
+++ b/examples/vue/.env.test
@@ -0,0 +1,16 @@
+# server env
+VITE_SERVER_ENV = 'production'
+
+# open dev login
+VITE_OPEN_DEV_LOGIN = 'YES'
+
+# drop console
+VITE_BUILD_DROP_CONSOLE = 'NO'
+
+# base api
+VITE_BASE_API = 'https://api.xxx.com'
+
+# Versions
+VITE_VER_MAIN = '1'
+VITE_VER_SUB = '0.0.1'
+VITE_VER_STATE = 'prod'
diff --git a/examples/vue/.eslintignore b/examples/vue/.eslintignore
new file mode 100644
index 00000000..9e0d7b2b
--- /dev/null
+++ b/examples/vue/.eslintignore
@@ -0,0 +1,17 @@
+node_modules
+public
+apps/modern-vue/dist
+apps/modern-vue/build
+.build/*
+.nuxt
+.history
+apps/modern-vue/static/*
+apps/modern-vue/static/js
+apps/modern-vue/static/sw.js
+apps/modern-vue/static/pdf
+apps/modern-vue/static/simple-project
+jsconfig.json
+package.json
+package-lock.json
+yarn.lock
+types/generated/*
diff --git a/examples/vue/.eslintrc.js b/examples/vue/.eslintrc.js
new file mode 100644
index 00000000..d538cb97
--- /dev/null
+++ b/examples/vue/.eslintrc.js
@@ -0,0 +1,31 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true,
+ browser: true,
+ },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:vue/vue3-essential',
+ 'plugin:vue/vue3-strongly-recommended',
+ '@vue/typescript/recommended',
+ '@vue/eslint-config-prettier',
+ '@vue/eslint-config-typescript',
+ 'prettier',
+ ],
+ parserOptions: {
+ ecmaVersion: 2020,
+ },
+ plugins: ['vue', 'prettier'],
+ // add your custom rules here
+ rules: {
+ 'prettier/prettier': [
+ 'error',
+ {},
+ {
+ usePrettierrc: true,
+ },
+ ],
+ '@typescript-eslint/ban-ts-comment': 'off',
+ },
+}
diff --git a/examples/vue/.gitattributes b/examples/vue/.gitattributes
new file mode 100644
index 00000000..79a85db5
--- /dev/null
+++ b/examples/vue/.gitattributes
@@ -0,0 +1,14 @@
+# Don't allow people to merge changes to these generated files, because the result
+# may be invalid. You need to run "rush update" again.
+pnpm-lock.yaml merge=text
+shrinkwrap.yaml merge=binary
+npm-shrinkwrap.json merge=binary
+yarn.lock merge=binary
+
+# Rush's JSON config files use JavaScript-style code comments. The rule below prevents pedantic
+# syntax highlighters such as GitHub's from highlighting these comments as errors. Your text editor
+# may also require a special configuration to allow comments in JSON.
+#
+# For more information, see this issue: https://github.com/microsoft/rushstack/issues/1088
+#
+*.json linguist-language=JSON-with-Comments
diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
index 403adbc1..aa9c8253 100644
--- a/examples/vue/.gitignore
+++ b/examples/vue/.gitignore
@@ -1,23 +1,111 @@
+# Logs
+logs
+*.log
.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
-pnpm-debug.log*
+lerna-debug.log*
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+build
+.vite-ssg-temp
+
+# gen
+src/auto-imports.d.ts
+src/components.d.ts
diff --git a/examples/vue/.prettierrc b/examples/vue/.prettierrc
new file mode 100644
index 00000000..d2e14bcc
--- /dev/null
+++ b/examples/vue/.prettierrc
@@ -0,0 +1,10 @@
+{
+ "printWidth": 90,
+ "semi": false,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5",
+ "proseWrap": "always",
+ "endOfLine": "auto",
+ "bracketSpacing": true
+}
diff --git a/examples/vue/LICENSE b/examples/vue/LICENSE
new file mode 100644
index 00000000..6153da10
--- /dev/null
+++ b/examples/vue/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 han
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/examples/vue/README.md b/examples/vue/README.md
new file mode 100644
index 00000000..9298c414
--- /dev/null
+++ b/examples/vue/README.md
@@ -0,0 +1,194 @@
+## Modern Vue
+
+[Modern Vue](https://github.com/byoungd/modern-vue-template) stack 2022 with **Micro front
+end** & **Monorepo** 🎉.
+
+Joyful development experience 😄.
+
+The `main` branch will keep clean for quickly creating Vue3 web app.
+
+Monorepo architecture please visit branch
+[monorepo](https://github.com/byoungd/modern-vue-template/tree/monorepo).
+
+
+English | 简体中文
+
+
+## Features
+
+- ⚡️ [Vue 3](https://github.com/vuejs/vue-next),
+ [Vite 2](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/),
+ [ESBuild](https://github.com/evanw/esbuild) - born with fastness
+
+- ⚡️ Build Optimization with compress
+
+- ⚡️ CDN by Uploading static files to OSS
+
+- 🦾 Environmental distinction
+
+- 🦾 **Monorepo** by Rush
+
+- 🎨 Commitlint
+
+- 🎨 Formatting with **prettier** and **pretty-quick**
+
+- 🗂 File based routing
+
+- 📦 Components auto importing
+
+- 🍍 [State Management via Pinia](https://pinia.esm.dev/)
+
+- 📑 Layout system
+
+- [Extend Script Setup Component Name to co-operate with Vue Devtools](https://github.com/vbenjs/vite-plugin-vue-setup-extend)
+
+- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
+
+- 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS
+ framework
+
+- 😃
+ [Use icons from any icon sets, with no compromise](https://github.com/antfu/unplugin-icons)
+
+- 🌍 I18n ready
+
+- 🗒 [Markdown Support](https://github.com/antfu/vite-plugin-md)
+
+- 🔥 Use the [new `
+
+
+
+
+
+