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

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

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

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

#!/bin/bash
set -e

PROJECT_NAME="frontend-template"
mkdir -p $PROJECT_NAME
cd $PROJECT_NAME

echo " 初始化 $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"]
}
EOF

cat > vite.config.ts <<'EOF'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: { port: 5173 }
});
EOF

cat > .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 } }
};
EOF

cat > .prettierrc <<'EOF'
{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "endOfLine": "lf"
}
EOF

cat > .stylelintrc.json <<'EOF'
{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "string-quotes": "single",
    "color-hex-length": "short",
    "selector-class-pattern": "^[a-z0-9\\-]+#34;,
    "max-nesting-depth": 3
  }
}
EOF

cat > 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']]
  }
};
EOF

cat > .gitignore <<'EOF'
node_modules
dist
.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.html
cat > 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.ts
cat > 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.vue
cat > 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.ts
cat > 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.css
cat > 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="