🎉 init:底层初始化

2024-05-30 19:07:35 +08:00 · 2024-05-30 19:07:35 +08:00 · b0441ed8de
commit b0441ed8de
30 changed files with 5591 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,199 @@
+{
+  "extends": [
+    // 这一行告诉ESLint去使用@typescript-eslint/recommended规则集。这个规则集包含了TypeScript团队推荐的一系列规则，有助于识别TypeScript代码中的常见问题，比如语法错误、潜在的类型问题等。
+    "plugin:@typescript-eslint/recommended",
+    // 这行配置引入了Vue 3的官方ESLint插件推荐的规则集。它包含了对于Vue 3单文件组件（SFCs）的最佳实践建议，帮助开发者遵循Vue的编码规范，包括模板、脚本和样式部分的检查
+    "plugin:vue/vue3-recommended",
+    // 此行配置启用了Prettier的ESLint插件，并使用其推荐的规则。Prettier是一个流行的代码格式化工具，能够自动格式化代码以保持一致的风格。通过此配置，你的代码风格将与Prettier的标准保持一致，减少因格式差异导致的代码审查冲突。
+    "plugin:prettier/recommended"
+  ],
+    "env": {
+    // 告诉ESLint你的代码将在浏览器环境中运行。因此，ESLint会启用或强化那些与浏览器环境相关的规则，比如禁止使用Node.js特有的全局变量（如require）。
+    "browser": true,
+      // 表明你的代码设计为在Node.js环境中执行。启用这个选项后，ESLint会认识Node.js的全局变量和Node.js特有的API调用，避免这些被误报为错误。
+      "node": true,
+        // 指出你的项目使用Jest作为测试框架。这会配置ESLint以理解Jest的全局变量和函数，确保在编写测试代码时不会因为使用了Jest的特性而触发不必要的警告或错误。
+        "jest": true,
+          // 指示你的代码基于ECMAScript 6（ES6，也称作ES2015）或更高版本的标准。启用此选项后，ESLint会支持ES6的语法特性，并根据这些新标准调整相关规则，比如允许使用箭头函数、解构赋值等ES6特性。
+          "es6": true
+  },
+  "plugins": [
+    // 这个插件使得ESLint能够理解并检查Vue.js单文件组件（SFCs）中的代码。它提供了对Vue模板语法、script部分以及style部分的 linting 规则，帮助开发者遵循Vue的最佳实践，提升代码质量和可维护性
+    "vue",
+    // 插件是专门为TypeScript设计的，它允许ESLint理解和 lint TypeScript 代码。这个插件集成了许多有用的规则，用以识别TypeScript特有的一些潜在问题，比如类型错误提示、不必要的类型断言等，从而提高TypeScript代码的质量和类型安全性。
+    "@typescript-eslint"
+  ],
+    "globals": {
+    // 这两个全局变量通常与Cypress测试框架相关，cy是Cypress提供的命令链方法的主入口点，用于编写测试代码；Cypress则是该框架的全局对象，包含配置和其他功能。标记为readonly表示这些变量不应在代码中被重新赋值，仅用于读取和调用。
+    "cy": "readonly",
+      "Cypress": "readonly",
+        // 表示clipboardData是一个预期存在的全局变量，可能与浏览器的剪贴板操作有关，标记为只读意味着它不应该被修改
+        "clipboardData": "readonly",
+          // 定义了一个名为PKG_VERSION的全局变量，这里的true表示这是一个可写的全局变量，没有特别限制其使用方式。这种变量可能用于存储项目版本信息等。
+          "PKG_VERSION": true,
+            // 这两个全局变量与Vue 3的Composition API紧密相关。defineProps用于定义组件接收的props，而defineEmits用于定义组件可以发出的事件。它们都被标记为只读，意味着这些函数不应该被赋予新的值，仅用于组件内部的属性和事件声明
+            "defineProps": "readonly",
+              "defineEmits": "readonly"
+  },
+  "parserOptions": {
+    // 指定了ESLint应该使用@typescript-eslint/parser作为代码解析器。这个解析器是专门为TypeScript设计的，能够理解TypeScript的语法特性，使得ESLint能够正确地解析和 lint TypeScript 代码。
+    "parser": "@typescript-eslint/parser",
+      // 告诉ESLint你的代码使用的是ES模块（import/export语法），而不是传统的CommonJS模块（如require）。这会影响如何解析模块导入导出语句
+      "sourceType": "module",
+        // 允许在代码的任何位置使用import和export语句，而不局限于模块顶层。这在某些特定的项目配置或使用场景下可能有用，但通常建议仅在模块顶层使用导入导出以遵循最佳实践。
+        "allowImportExportEverywhere": true,
+          // 启用对JSX的支持。这意味着ESLint会正确解析包含JSX元素（一种HTML-like语法，常用于React和其他库中编写用户界面）的代码，不会将其视为错误。当你的项目中包含前端组件并使用JSX编写时，这一设置是必要的。
+          "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    // 这个设置指定了ESLint在检查导入语句时应考虑的文件扩展名列表。列表中的每一个扩展名都代表了一种ESLint会认为是有效导入目标的文件类型。
+    "import/extensions": [
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx"
+    ]
+  },
+  // 这段配置详细地定义了ESLint的规则设置，覆盖了代码风格、导入管理、以及TypeScript和Vue特定的规则。以下是一些关键规则及其含义的简要说明：
+  // 通用代码风格规则
+  // "no-console": ["error", { "allow": ["info", "warn", "error"] }]: 错误级别地禁止使用console.log等方法，但允许console.info、console.warn和console.error。
+  // "no-continue": "off", "no-restricted-syntax": "off", "no-plusplus": "off" 等: 这些规则被关闭，意味着允许使用continue语句、不限制特定语法结构（如for循环）、允许自增自减操作符等。
+  // "no-param-reassign": "off", "no-shadow": "off": 关闭参数重赋值和变量阴影的检查。
+  // "no-underscore-dangle": ["error"]: 错误级别地禁止在标识符中使用前导或尾随下划线（某些例外可能通过其他配置允许）。
+  // 未使用变量和表达式
+  // "no-unused-vars": "off", "no-unused-expressions": "off": 关闭未使用变量和未使用的表达式的检查。
+  // 函数和循环
+  // "func-names": "off", "guard-for-in": "off", "consistent-return": "off": 不强制函数命名规则、不检查for...in循环的安全性、不强制函数返回一致性。
+  // 导入规则
+  // "import/extensions": "off", "import/no-unresolved": "off", "import/no-extraneous-dependencies": "off": 关闭导入文件扩展名检查、未解决的导入路径检查、以及禁止导入非直接依赖。
+  // "import/prefer-default-export": "off": 不强制模块使用默认导出。
+  // TypeScript规则
+  // @typescript-eslint: 大多数TypeScript相关的规则被关闭或放宽，如允许any类型、不强制模块边界类型、允许require导入、允许空函数、允许特定类型注释等。但也有配置，如"@typescript-eslint/no-unused-vars"，设置为警告级别，并指定了忽略模式以忽略以_开头的变量。
+  // Vue规则
+  // "vue/require-default-prop", "vue/multi-word-component-names", "vue/no-deprecated-slot-attribute": 这些Vue规则被关闭，意味着组件不必提供默认prop、组件名称不必多词、允许使用已废弃的slot属性。
+  // 整体来看，这些规则配置放松了很多常见的代码风格和最佳实践检查，可能旨在提高开发速度或适应特定团队的编码习惯。然而，过度放宽规则可能牺牲代码质量和可维护性，因此建议根据项目实际需要仔细权衡。
+  "rules": {
+    "no-console": [
+      "error",
+      {
+        "allow": ["info", "warn", "error"]
+      }
+    ],
+      // code style config
+      "no-continue": "off",
+        "no-restricted-syntax": "off",
+          "no-plusplus": "off",
+            "no-param-reassign": "off",
+              "no-shadow": "off",
+                "no-underscore-dangle": ["error"],
+                  "no-unused-vars": "off",
+                    "no-unused-expressions": "off",
+                      "no-return-assign": "off",
+                        "no-use-before-define": "off",
+                          "func-names": "off",
+                            "guard-for-in": "off",
+                              "consistent-return": "off",
+                                "no-restricted-globals": "off",
+                                  "default-param-last": "off",
+                                    "default-case": "off",
+                                      "prefer-spread": "off",
+
+                                        // import config
+                                        "import/extensions": "off",
+                                          "import/no-unresolved": "off",
+                                            "import/no-extraneous-dependencies": "off",
+                                              "import/prefer-default-export": "off",
+                                                "import/no-relative-packages": "off",
+
+                                                  // typescript config
+                                                  "@typescript-eslint/no-explicit-any": "off",
+                                                    "@typescript-eslint/explicit-module-boundary-types": "off",
+                                                      "@typescript-eslint/no-require-imports": 0,
+                                                        "@typescript-eslint/no-var-requires": 0,
+                                                          "@typescript-eslint/prefer-for-of": 0,
+                                                            "@typescript-eslint/ban-types": 0,
+                                                              "@typescript-eslint/no-unused-vars": [
+                                                                1,
+                                                                {
+                                                                  "argsIgnorePattern": "^_",
+                                                                  "varsIgnorePattern": "^_"
+                                                                }
+                                                              ],
+                                                                "@typescript-eslint/no-empty-function": 0,
+                                                                  "@typescript-eslint/ban-ts-comment": 0,
+                                                                    "vue/require-default-prop": 0,
+                                                                      "vue/multi-word-component-names": 0,
+                                                                        "vue/no-deprecated-slot-attribute": 0
+  },
+  "overrides": [
+    {
+      // "files": ["*.vue"]: 指定此override应用于所有扩展名为.vue的文件，即Vue单文件组件（SFCs）。 在rules部分，针对Vue组件设置了特定的规则：
+      "files": ["*.vue"],
+      // 此规则强制组件名称在模板中必须遵循“kebab-case”（短横线连接的小写单词，例如<my-component>）。数字2表示如果违反此规则，ESLint将以错误级别报告（最严格的级别，通常会导致构建失败或警告）。
+      "rules": {
+        "vue/component-name-in-template-casing": [2, "kebab-case"],
+        // 这个规则被设置为0，意味着完全关闭了对组件默认属性（props）的要求。Vue通常推荐为组件的props提供默认值，以增强组件的可复用性，但此处决定不强制执行此最佳实践。
+        "vue/require-default-prop": 0
+      }
+    },
+    {
+      // "files": 列出了覆盖规则将应用的文件路径模式。
+      "files": [
+        // **/_example/*: 匹配任何层级下以_example为目录名的文件。
+        "**/_example/*",
+        // **/_example - ts/*: 类似地，匹配任何层级下以_example - ts为目录名的
+        "**/_example - ts/*",
+        // script/**/* 和script/*: 匹配script目录下的所有文件，无论深度如何。
+        "script/**/* ",
+        "script/*",
+        // *.js: 匹配任何直接位于根目录下的.js文件。
+        "*.js",
+        // site/**/*和site/*: 匹配site目录下的所有文件，不论层级。
+        "site/**/*",
+        // 
+        "site/*"
+      ],
+      // "rules": 定义了在上述指定的文件范围内生效的特定规则。
+      "rules": {
+        // "no-var-requires": 0: 禁止使用require语句中的变量声明（var关键字），但在这些文件中该规则被关闭。
+        "no-var-requires": 0,
+        // "no-console": 0: 允许使用console.log等console方法，不报错。
+        "no-console": 0,
+        // "no-unused-expressions": 0: 不检查未使用的表达式，如未赋值的函数调用。
+        "no-unused-expressions": 0,
+        // "no-alert": 0: 允许使用alert函数，不报错。
+        "no-alert": 0
+      }
+    },
+    {
+      // "files": 指定了覆盖规则适用的文件类型，这里是所有的TypeScript (*.ts) 和 TypeScript with JSX (*.tsx) 文件。
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      // "rules": 针对这些文件类型，配置了一个特定的TypeScript ESLint规则
+      "rules": {
+        // "@typescript-eslint/explicit-function-return-type": 0: 禁用了
+        "@typescript-eslint/explicit-function-return-type": 0
+      }
+    },
+    {
+      // "files": 指定了覆盖规则适用的文件模式，这里是所有以.test.js结尾的文件，即测试脚本文件。
+      "files": [
+        "*.test.js"
+      ],
+      "rules": {
+        // "import/no-dynamic-require": "off": 关闭了import/no-dynamic-require规则。这条规则通常禁止在运行时动态地使用require()来导入模块，以鼓励静态分析和提前发现潜在的模块加载错误。但在测试环境中，动态加载模块可能是为了模拟或测试特定条件下的行为，因此在这个上下文中关闭该规则是有道理的
+        "import/no-dynamic-require": "off",
+        // "global-require": "off": 同样，关闭了global-require规则。这条规则通常建议避免在全局作用域使用require()，鼓励模块化的代码结构。然而，在测试文件中，有时直接在全局作用域使用require()来引入测试工具、模拟模块或设置测试环境是常见的做法，因此在此场景下关闭该规则可以减少不必要的警告。
+        "global-require": "off"
+      }
+    },
+    // 单独的"files": "*"}配置段在ESLint的overrides部分表示一个非常宽泛的覆盖规则，理论上意在应用于所有文件
+    {
+      "files": "*"
+    }
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/.prettierrc.js
+++ b/.prettierrc.js
@ -0,0 +1,37 @@
+module.exports = {
+  // 一行最多 120 字符
+  printWidth: 120,
+  // 使用 2 个空格缩进
+  tabWidth: 2,
+  // 不使用缩进符，而使用空格
+  useTabs: false,
+  // 行尾需要有分号
+  semi: true,
+  // 使用单引号
+  singleQuote: true,
+  // 对象的 key 仅在必要时用引号
+  quoteProps: 'as-needed',
+  // jsx 不使用单引号，而使用双引号
+  jsxSingleQuote: false,
+  // 末尾需要有逗号
+  trailingComma: 'all',
+  // 大括号内的首尾需要空格
+  bracketSpacing: true,
+  // 箭头函数，只有一个参数的时候，也需要括号
+  arrowParens: 'always',
+  // 每个文件格式化的范围是文件的全部内容
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  // 不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 不需要自动在文件开头插入 @prettier
+  insertPragma: false,
+  // 使用默认的折行标准
+  proseWrap: 'preserve',
+  // 根据显示样式决定 html 要不要折行
+  htmlWhitespaceSensitivity: 'css',
+  // vue 文件中的 script 和 style 内不用缩进
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf
+  endOfLine: 'lf',
+};
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,2 @@
+
+```
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1,3 @@
+// 是一个TypeScript引用指令，通常出现在使用Vite作为开发服务器的项目中。这条注释有着特殊的意义，它告知TypeScript编译器去包含来自@types/vite__client的类型声明文件。Vite客户端类型包含了用于Vite提供的客户端实用类型声明，比如在浏览器环境中可用的全局变量或API。这样可以确保在项目中使用Vite的特性时，编辑器和TypeScript能够提供正确的代码补全和类型检查，提高开发体验。
+/// <reference types="vite/client" />
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,58 @@
+{
+  "name": "dykj",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
+    "ts:check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "echarts": "^5.5.0",
+    "element-plus": "^2.7.3",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.10",
+    "highlight.js": "^11.9.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "npm-run-all2": "^6.1.2",
+    "prettier": "^3.2.5",
+    "prettier-eslint": "^16.3.0",
+    "typescript": "~5.4.0",
+    "vite": "^5.2.8",
+    "vue-tsc": "^2.0.11",
+    "sass": "^1.69.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vitejs/plugin-legacy": "^5.3.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-ejs": "^1.7.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-progress": "^0.0.7",
+    "vite-plugin-purge-icons": "^0.10.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-top-level-await": "^1.3.1"
+  }
+}
--- a/package.md
+++ b/package.md
@ -0,0 +1,180 @@
+{
+
+<!-- 项目名称 -->
+
+"name": "dykj",
+
+<!-- 项目的版本号 -->
+
+"version": "0.0.0",
+
+<!-- 表示这是一个私有项目，不会被发布到公共npm仓库。 -->
+
+"private": true,
+
+<!-- 表示这是一个私有项目，不会被发布到公共npm仓库。 -->
+
+"type": "module",
+"scripts": {
+
+<!-- 运行开发服务器，使用Vite作为开发环境。 -->
+
+"dev": "vite",
+
+<!-- 构建项目，先执行类型检查，然后执行构建命令。这里使用run - p（可能是npm - run - all的一个别名）来并行运行多个脚本。 -->
+
+"build": "run-p type-check \"build-only {@}\" --",
+
+<!-- 在本地预览生产构建的应用 -->
+
+"preview": "vite preview",
+
+<!-- 单独执行构建操作 -->
+
+"build-only": "vite build",
+
+<!-- 使用vue - tsc强制进行类型检查。 -->
+
+"type-check": "vue-tsc --build --force",
+
+<!-- lint": "eslint . --ext ...": 运行ESLint对项目进行代码规范检查，并自动修复问题，支持多种文件扩展名。 -->
+
+"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+
+<!-- 使用Prettier格式化src/目录下的所有文件。 -->
+
+"format": "prettier --write src/"
+
+<!--TypeScript项目提供的类型检查器。 -->
+
+"ts:check": "vue-tsc --noEmit",
+
+},
+"dependencies": {
+
+<!-- 状态管理库，Vue中的轻量级状态管理解决方案。 -->
+
+"pinia": "^2.1.7",
+
+<!-- Vue框架的核心库。 -->
+
+"vue": "^3.4.21",
+
+<!-- Vue的路由管理库。 -->
+
+"vue-router": "^4.3.0"
+
+<!-- ui框架 -->
+
+"element-plus": "^2.7.3",
+
+<!--图表  -->
+
+"echarts": "^5.5.0",
+
+<!--@wangeditor/editor 及 @wangeditor/editor-for-vue: 分别是WangEditor的核心库和针对Vue的适配组件，WangEditor是一个轻量级的Web富文本编辑器，适用于构建需要文本编辑功能的应用。  -->
+
+"@wangeditor/editor": "^5.1.23",
+"@wangeditor/editor-for-vue": "^5.1.10"
+
+<!-- cropperjs: 一个易用的图片裁剪JavaScript库，可以在Web应用中提供图片裁剪功能。 -->
+
+"cropperjs": "^1.6.1",
+
+<!--代码高亮库，支持多种编程语言的语法高亮显示。 -->
+
+"highlight.js": "^11.9.0",
+
+},
+"devDependencies": {
+
+<!-- 一个用于修补ESLint与某些 TypeScript 工具集成时可能遇到的问题的库，版本"^1.8.0"表示兼容1.8.0及以上的版本。 -->
+
+"@rushstack/eslint-patch": "^1.8.0",
+
+<!-- 提供了一个针对Node.js 20版本的TS配置文件，简化了TypeScript配置，"^20.1.4"指定了使用的版本范围。 -->
+
+"@tsconfig/node20": "^20.1.4",
+
+<!-- Node.js的TypeScript类型声明文件，让TypeScript能更好地理解和验证Node.js的API调用，"^20.12.5"指定了版本兼容范围。 -->
+
+"@types/node": "^20.12.5",
+
+<!-- Vue官方提供的ESLint配置，帮助遵循Vue和TypeScript的最佳实践，"^9.0.0"和"^13.0.0"是各自的版本要求。 -->
+
+"@vue/tsconfig": "^0.5.1",
+
+ <!-- 一个强大的JavaScript和TypeScript代码质量工具，"^8.57.0"指定了版本。 -->
+
+"eslint": "^8.57.0",
+
+ <!-- 为ESLint提供Vue.js相关的规则和解析器，"^9.23.0"指定了版本。 -->
+
+"eslint-plugin-vue": "^9.23.0",
+
+<!-- 一个npm脚本任务的运行工具，允许你并行或顺序执行多个脚本，"^6.1.2"指定了版本。注意：正式的包名为npm-run-all，这里的“2”可能是笔误。 -->
+
+"npm-run-all2": "^6.1.2",
+
+<!-- 一个代码格式化工具，确保团队代码风格的一致性，"^3.2.5"指定了版本。 -->
+
+"prettier": "^3.2.5",
+
+<!-- 编程语言TypeScript的编译器，提供了对JavaScript的强大类型检查和更现代的语法支持，"~5.4.0"意味着使用5.4.0版本或其补丁更新版 -->
+
+"typescript": "~5.4.0",
+
+<!-- 一个由Vue.js作者尤雨溪开发的现代化的前端构建工具，用于快速开发和优化Web应用，"^5.2.8"指定了版本。 -->
+
+"vite": "^5.2.8",
+
+<!-- 一个专为Vue项目的TypeScript类型检查和错误报告工具，"^2.0.11"指定了版本。 -->
+
+"vue-tsc": "^2.0.11"
+
+<!--@typescript-eslint/eslint-plugin, @typescript-eslint/parser: ESLint的插件和解析器，专为TypeScript项目设计，提供更准确的代码质量检查。  -->
+
+"@typescript-eslint/eslint-plugin": "^7.1.0",
+"@typescript-eslint/parser": "^7.1.0",
+
+<!--@vitejs/plugin-legacy, @vitejs/plugin-vue, @vitejs/plugin-vue-jsx: Vite的官方插件，分别用于支持老旧浏览器兼容、Vue和Vue JSX的编译和优化。  -->
+
+"@vitejs/plugin-legacy": "^5.3.1",
+"@vitejs/plugin-vue": "^5.0.4",
+"@vitejs/plugin-vue-jsx": "^3.1.0",
+
+<!--eslint, eslint-config-prettier, eslint-plugin-prettier, eslint-plugin-vue: ESLint相关依赖，用于JavaScript和Vue项目的代码风格检查和格式化。  -->
+
+"eslint-config-prettier": "^9.1.0",
+"eslint-plugin-prettier": "^5.1.3",
+"eslint-plugin-vue": "^9.22.0",
+
+<!--prettier, prettier-eslint: 代码格式化工具，确保代码风格统一。  -->
+
+"prettier": "^3.2.5",
+"prettier-eslint": "^16.3.0",
+
+<!-- sass: CSS预处理器，增加了变量、嵌套规则、混合、继承等特性。 -->
+
+"sass": "^1.69.5"
+
+<!-- vite-plugin-compression, vite-plugin-ejs, vite-plugin-eslint, vite-plugin-progress, vite-plugin-purge-icons, vite-plugin-svg-icons, vite-plugin-top-level-await: Vite的各种插件，分别用于资源压缩、EJS模板支持、ESLint集成、构建进度显示、图标自动清理、SVG图标集成、顶级await支持等。 -->
+
+"vite-plugin-compression": "^0.5.1",
+"vite-plugin-ejs": "^1.7.0",
+"vite-plugin-eslint": "^1.8.1",
+"vite-plugin-progress": "^0.0.7",
+"vite-plugin-purge-icons": "^0.10.0",
+"vite-plugin-svg-icons": "^2.0.1",
+"vite-plugin-top-level-await": "^1.3.1",
+}
+
+<!-- 行在你的项目package.json文件中表示该项目所采用的许可证类型。MIT许可是一种广泛使用的开源软件许可证，它允许用户自由地使用、修改及分发软件，既可用于商业目的也可以是非商业目的。该许可证对软件使用者的限制极少，基本上只要求保留学术署名和免责声明即可。这意味着采纳MIT许可的项目具有很高的开放性和灵活性，对于促进软件共享和协作是非常友好的。 -->
+
+"license": "MIT",
+
+<!-- node版本号 -->
+
+"engines": {
+"node": ">= 16.0.0",
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+      </nav>
+    </div>
+  </header>
+
+  <RouterView />
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+  max-height: 100vh;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  nav {
+    text-align: left;
+    margin-left: -1rem;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@ -0,0 +1,88 @@
+<script setup lang="ts">
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
+      >Cypress Component Testing</a
+    >.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,14 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
+})
+
+export default router
--- a/src/stores/counter.ts
+++ b/src/stores/counter.ts
@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,9 @@
+<script setup lang="ts">
+import TheWelcome from '../components/TheWelcome.vue'
+</script>
+
+<template>
+  <main>
+    <TheWelcome />
+  </main>
+</template>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,89 @@
+{
+  // 这个对象包含了TypeScript编译器的各种配置选项。
+  "compilerOptions": {
+    // 指定项目中可用的库文件，包括最新的ECMAScript特性、DOM API、可迭代的DOM集合以及scripthost API。
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ],
+    // 指定编译输出的ECMAScript目标版本为最新版本。
+    "target": "esnext",
+    // 指定输出目录为lib，编译后的JavaScript文件将放于此。
+    "outDir": "lib",
+    // 生成对应的.d.ts声明文件。
+    "declaration": true,
+    // 使用最新的模块系统（如ES模块）。
+    "module": "esnext",
+    // 使用Node.js的模块解析规则。
+    "moduleResolution": "node",
+    // 不将每个文件作为单独的模块进行类型检查
+    "isolatedModules": false,
+    //启用实验性的装饰器特性
+    "experimentalDecorators": true,
+    //允许默认导入，改善CommonJS和ES模块之间的互操作性。
+    "esModuleInterop": true,
+    //提高类型检查严格度，除了strictNullChecks被关闭，意味着允许隐式null或undefined。
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": false,
+    //编译时移除注释
+    "removeComments": true,
+    //隐藏索引签名中的隐式any错误。?这里报错
+    "suppressImplicitAnyIndexErrors": false,
+    //许从没有默认导出的模块中默认导入。
+    "allowSyntheticDefaultImports": true,
+    //允许直接导入JSON文件。
+    "resolveJsonModule": true,
+    //允许编译JavaScript文件。
+    "allowJs": true,
+    //保留JSX语法，通常用于React等库。
+    "jsx": "preserve",
+    //设定基本目录，相对路径的起点。
+    "baseUrl": "./",
+    //提供路径别名映射，方便模块导入，例如将@src/*映射到src/*，简化导入路径。
+    "paths": {
+      //
+      "@src/*": [
+        "src/*"
+      ],
+      //
+      "tdesign-vue-next": [
+        "src"
+      ],
+      //
+      "tdesign-vue-next/es/locale/*": [
+        "src/locale/*"
+      ],
+      //
+      "@common/*": [
+        "src/_common/*"
+      ],
+      //
+      "@test/utils": [
+        "test/utils"
+      ]
+    }
+  },
+  // 定义了哪些文件或目录会被编译器包含进来
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "src/**/*.vue",
+    "scripts/rollup.config.js"
+  ],
+  //定义了哪些文件或目录会被排除在编译之外，比如node_modules等。
+  "exclude": [
+    "node_modules",
+    "src/_common",
+    "dist",
+    "lib",
+    "cjs",
+    "esm",
+    "es",
+    "global.d.ts"
+  ],
+  //禁止保存文件时自动编译。
+  "compileOnSave": false
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,22 @@
+// 这部分从Node.js的内置模块导入了两个函数，fileURLToPath 和 URL。它们主要用于处理文件路径和URL之间的转换，这对于Vite配置中的别名功能特别有用。
+import { fileURLToPath, URL } from 'node:url'
+// 这里导入了Vite的defineConfig函数，以及Vue和Vue JSX的插件。
+import { defineConfig } from 'vite'
+// 
+import vue from '@vitejs/plugin-vue'
+// 
+import vueJsx from '@vitejs/plugin-vue-jsx'
+// 通过defineConfig函数定义配置对象，并在其plugins属性中添加了之前导入的Vue和Vue JSX插件。这两个插件会在Vite启动时自动应用到项目中，使得Vue和Vue JSX的功能得以实现
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+  ],
+  resolve: {
+    // 通过alias属性设置了一个路径别名。在这里，@符号被映射到了项目源码目录（src）的绝对路径。这样做可以让开发者在导入模块时使用更简短的路径，
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`