我们把这个 Vue3 + TypeScript 前端研发模板仓库 的初始化脚本一次性补全到可直接运行的状态，包括：

• 完整的目录结构
• 所有配置文件
• 研发规范文档
• 示例功能模块（Example Feature）
• 初始化脚本（执行后直接生成可运行工程）

这样你在本地执行脚本后，就能直接 npm install && npm run dev 启动项目。

init-template.sh（完整可运行版）

#!/bin/bashset -ePROJECT_NAME="frontend-template"mkdir -p $PROJECT_NAMEcd $PROJECT_NAMEecho " 初始化 $PROJECT_NAME ..."# -------------------------# package.json# -------------------------cat > package.json <<'EOF'{  "name": "frontend-template",  "version": "1.0.0",  "private": true,  "type": "module",  "scripts": {    "dev": "vite",    "build": "vite build",    "preview": "vite preview",    "lint": "eslint \"src/**/*.{ts,vue}\"",    "format": "prettier --write \"**/*.{ts,vue,js,json,css,md}\"",    "stylelint": "stylelint \"src/**/*.css\"",    "prepare": "husky install",    "test": "vitest run"  },  "dependencies": {    "axios": "^1.7.2",    "vue": "^3.4.38",    "vue-router": "^4.4.3"  },  "devDependencies": {    "@commitlint/cli": "^19.3.0",    "@commitlint/config-conventional": "^19.2.2",    "@types/node": "^20.14.12",    "@typescript-eslint/eslint-plugin": "^7.16.1",    "@typescript-eslint/parser": "^7.16.1",    "@vitejs/plugin-vue": "^5.1.2",    "eslint": "^8.57.0",    "eslint-config-prettier": "^9.1.0",    "eslint-plugin-import": "^2.29.1",    "eslint-plugin-vue": "^9.27.0",    "husky": "^9.0.11",    "lint-staged": "^15.2.7",    "prettier": "^3.3.3",    "stylelint": "^16.8.1",    "stylelint-config-standard": "^36.0.1",    "typescript": "^5.5.4",    "vite": "^5.4.1",    "vitest": "^2.0.5"  },  "lint-staged": {    "src/**/*.{ts,vue,js}": [      "eslint --fix",      "prettier --write"    ],    "src/**/*.{css,scss}": [      "stylelint --fix"    ]  }}EOF# -------------------------# 配置文件# -------------------------cat > tsconfig.json <<'EOF'{  "compilerOptions": {    "target": "ES2022",    "useDefineForClassFields": true,    "module": "ESNext",    "moduleResolution": "Bundler",    "strict": true,    "jsx": "preserve",    "sourceMap": true,    "resolveJsonModule": true,    "esModuleInterop": true,    "lib": ["ES2022", "DOM"],    "baseUrl": ".",    "paths": { "@/*": ["src/*"] }  },  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts"]}EOFcat > vite.config.ts <<'EOF'import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';export default defineConfig({  plugins: [vue()],  server: { port: 5173 }});EOFcat > .eslintrc.cjs <<'EOF'module.exports = {  root: true,  env: { browser: true, es2022: true, node: true },  parser: 'vue-eslint-parser',  parserOptions: {    parser: '@typescript-eslint/parser',    ecmaVersion: 'latest',    sourceType: 'module'  },  plugins: ['@typescript-eslint', 'vue', 'import'],  extends: [    'eslint:recommended',    'plugin:vue/vue3-recommended',    'plugin:@typescript-eslint/recommended',    'plugin:import/recommended',    'plugin:import/typescript',    'prettier'  ],  rules: {    'vue/multi-word-component-names': 'off',    'import/order': ['error', {      'newlines-between': 'always',      groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index']    }],    '@typescript-eslint/no-explicit-any': 'warn',    'no-console': ['warn', { allow: ['error'] }],    'max-lines': ['warn', { max: 500 }],    complexity: ['warn', { max: 15 }]  },  settings: { 'import/resolver': { typescript: true } }};EOFcat > .prettierrc <<'EOF'{  "singleQuote": true,  "semi": true,  "trailingComma": "all",  "printWidth": 100,  "tabWidth": 2,  "endOfLine": "lf"}EOFcat > .stylelintrc.json <<'EOF'{  "extends": ["stylelint-config-standard"],  "rules": {    "string-quotes": "single",    "color-hex-length": "short",    "selector-class-pattern": "^[a-z0-9\\-]+$",    "max-nesting-depth": 3  }}EOFcat > commitlint.config.cjs <<'EOF'module.exports = {  extends: ['@commitlint/config-conventional'],  rules: {    'header-max-length': [2, 'always', 100],    'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']]  }};EOFcat > .gitignore <<'EOF'node_modulesdist.DS_Store.env*EOF# -------------------------# 研发规范文档# -------------------------cat > FRONTEND_GUIDELINES.md <<'EOF'# 前端研发规范（生产级）（此处粘贴我们之前整理的完整规范内容）EOF# -------------------------# 源码目录# -------------------------mkdir -p src/{router,styles,shared/{utils,security},services/{obs},features/example/{components,services,types}}mkdir tests# index.htmlcat > index.html <<'EOF'<!doctype html><html lang="zh-CN">  <head>    <meta charset="UTF-8" />    <meta name="csrf-token" content="dev-csrf-token" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>前端模板项目</title>  </head>  <body>    <div id="app"></div>    <script type="module" src="/src/main.ts"></script>  </body></html>EOF# main.tscat > src/main.ts <<'EOF'import { createApp } from 'vue';import { createRouter, createWebHistory } from 'vue-router';import App from './App.vue';import routes from './router';import './styles/index.css';const router = createRouter({ history: createWebHistory(), routes });createApp(App).use(router).mount('#app');EOF# App.vuecat > src/App.vue <<'EOF'<template>  <div class="app">    <header class="app__header">      <h1>前端模板项目</h1>      <nav>        <RouterLink to="/">首页</RouterLink>        <RouterLink to="/example">示例</RouterLink>      </nav>    </header>    <main class="app__main">      <RouterView />    </main>  </div></template><script lang="ts" setup></script><style>.app__header { display: flex; gap: 16px; padding: 12px; background: #f5f5f5; }.app__main { padding: 16px; }</style>EOF# router/index.tscat > src/router/index.ts <<'EOF'import ExampleComponent from '@/features/example/components/ExampleComponent.vue';const routes = [  { path: '/', component: { template: '<div>欢迎使用前端模板项目</div>' } },  { path: '/example', component: ExampleComponent }];export default routes;EOF# styles/index.csscat > src/styles/index.css <<'EOF'body { margin: 0; font-family: sans-serif; }.card { background: #fff; border: 1px solid #ddd; padding: 16px; border-radius: 8px; }EOF# 示例组件cat > src/features/example/components/ExampleComponent.vue <<'EOF'<template>  <div class="card">    <h2>示例组件</h2>    <p>这是一个示例功能模块。</p>    <button @click="