推荐使用vue-cli生成带完整工程化能力的模板，通过交互式选择typescript、router、pinia、eslint+prettier等特性，并配置标准化目录结构与tsconfig.json、eslint规则及npm脚本。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
快速生成符合企业级规范的Vue项目代码模板，避免从零配置Webpack、Vite、ESLint、Prettier和目录结构，节省至少2小时重复搭建时间。
使用Vite CLI一键创建标准Vue模板
打开终端，执行命令：vite create my-vue-app --template vue。
进入项目目录：cd my-vue-app → 运行 npm install 安装依赖。
这一步会生成最简Vue3 + Vite基础结构，但不含ESLint、TypeScript或路由——仅适合验证性原型，【不可直接用于生产环境】。
用vue-cli生成带完整工程化能力的模板
确保已全局安装 Vue CLI：npm install -g @vue/cli（若未安装，此步必须先执行）。
运行交互式创建命令：vue create my-prod-app。
在选项界面中，用方向键选择 【Manually select features】 → 按空格勾选：TypeScript、Router、Vuex/Pinia、CSS Pre-processors、Linter/Formatter、Unit Testing、E2E Testing。
后续提示中，为 ESLint 选择 【Lint on save】，为格式化选择 Prettier + ESLint 配合模式，保存配置为独立文件（.eslintrc.js 和 .prettierrc），这样团队协作时规则可被 Git 跟踪。
基于已有模板仓库克隆定制化版本
方法一：直接克隆开源标准模板
执行 git clone https://github.com/your-org/vue3-ts-pinia-template.git my-project → 删除 .git 文件夹 → 运行 rm -rf .git && git init 重新初始化本地仓库。
方法二：用 degit 快速拉取无历史记录的模板
先安装：npx degit your-org/vue3-ts-pinia-template my-project → 进入目录后立即执行 npm install。
注意：如果模板中包含 env.example，务必复制为 .env 并填写实际 API 地址，否则开发服务器启动后页面空白且控制台无报错提示。
手动注入标准化目录与配置文件
第一步：在 src/ 下创建标准子目录：assets（静态资源）、components（通用组件）、views（路由视图）、router（路由配置）、store（状态管理）、utils（工具函数）、types（全局类型声明）。
第二步：在项目根目录添加 tsconfig.json，关键字段必须包含："compilerOptions": { "target": "ES2018", "module": "ESNext", "lib": ["ES2020", "DOM"], "skipLibCheck": true, "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "forceConsistentCasingInFileNames": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }。
第三步：将 ESLint 配置文件中 env 项补全为 {"browser": true, "es2021": true, "node": true, "jest": true}，否则 Vue 组合式 API 中的 ref、computed 会被误标为未定义。
第四步：在 package.json 的 scripts 中加入："lint": "eslint --ext .ts,.js,.vue src/", "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue}\"", "prepare": "husky install"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
