核心原则让AI“记住”最佳实践你只需验收AI的训练数据里包含了海量的开源项目配置它知道Vite最新的最佳配置是什么TypeScript的推荐配置项有哪些ESLint Prettier怎么配合不同环境下环境变量怎么设置打包优化应该开启哪些选项你不需要记住这些你只需要告诉AI你要做什么然后验收它生成的东西。1. 第一步一键生成完整项目极速版如果你用的是Cursor最快捷的方式是直接用CtrlK生成整个项目。提示词“你是一个资深前端架构师。请帮我从零初始化一个Vue3项目项目名admin-system。技术要求构建工具Vite最新版框架Vue3Composition API script setup语言TypeScript严格模式状态管理Pinia带持久化插件路由Vue Routerhistory模式UI组件库Element Plus按需导入HTTP请求Axios统一封装代码规范ESLint Prettier HuskyGit提交前自动检查CSSSCSS支持全局变量请生成以下文件package.json包含所有依赖和scripts命令vite.config.ts含路径别名/、代理配置、打包优化tsconfig.jsontsconfig.node.json严格模式.eslintrc.js.prettierrc.json代码规范.env.development.env.production环境变量src/main.ts入口文件挂载App注册插件src/App.vue根组件src/router/index.ts路由配置src/stores/index.tsPinia主入口 持久化插件配置src/api/request.tsaxios统一封装src/utils/storage.tslocalStorage工具一个示例页面src/views/Home.vue展示Hello World 路由测试README.md项目启动说明所有代码使用TypeScript不使用any。配置项遵循业界最佳实践。”⚠️注意这个提示词非常长但足够详细。AI会一次性生成13个文件覆盖项目启动所需的所有配置。你只需要复制粘贴项目就搭好了。2. 第二步核心配置文件逐个解析AI生成了很多文件作为小白你可能看不懂每一行是干什么的。下面我们把最重要的几个配置文件拆开讲清楚。①vite.config.ts— 构建配置import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers export default defineConfig({ plugins: [ vue(), // Element Plus 按需导入 AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], resolve: { alias: { : path.resolve(__dirname, src), // 路径别名让你写 /components 而不是 ../../components }, }, server: { port: 3000, proxy: { /api: { target: http://localhost:8080, // 后端API地址 changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ), }, }, }, build: { rollupOptions: { output: { manualChunks: { // 把第三方库分开打包利用浏览器缓存 vendor: [vue, vue-router, pinia], element: [element-plus], }, }, }, chunkSizeWarningLimit: 1000, }, })为什么这么配alias解决路径地狱问题写/components比../../../components清爽多了proxy解决开发环境跨域问题manualChunks把第三方库分开打包用户再次访问时可以从缓存加载速度快很多②tsconfig.json— TypeScript配置{ compilerOptions: { target: ES2020, useDefineForClassFields: true, module: ESNext, lib: [ES2020, DOM, DOM.Iterable], skipLibCheck: true, moduleResolution: bundler, allowImportingTsExtensions: true, resolveJsonModule: true, isolatedModules: true, noEmit: true, jsx: preserve, strict: true, // ← 严格模式必须开 noUnusedLocals: true, // ← 检查未使用的变量 noUnusedParameters: true, noFallthroughCasesInSwitch: true, baseUrl: ., paths: { /*: [src/*] // ← 跟vite.config.ts的alias保持一致 } }, include: [src/**/*.ts, src/**/*.d.ts, src/**/*.vue], exclude: [node_modules] }为什么这么配strict: true强制类型检查虽然刚开始会报很多错但能让代码质量大幅提升paths跟vite.config.ts的alias配合让TypeScript也能识别/路径③.eslintrc.js— 代码规范module.exports { root: true, env: { browser: true, es2021: true, node: true, }, extends: [ plugin:vue/vue3-recommended, // Vue3官方推荐规则 plugin:typescript-eslint/recommended, // TypeScript规则 prettier, // 关掉跟Prettier冲突的规则 ], parser: vue-eslint-parser, parserOptions: { parser: typescript-eslint/parser, ecmaVersion: latest, sourceType: module, }, rules: { vue/multi-word-component-names: off, // 允许单文件名 typescript-eslint/no-explicit-any: error, // 禁止使用any no-console: process.env.NODE_ENV production ? warn : off, }, }为什么这么配强制执行禁止使用any强迫你写类型虽然麻烦但能减少Bug生产环境console.log报警告避免不小心把调试日志带到线上3. 第三步验证项目是否能跑AI生成了所有文件后按以下步骤验证① 安装依赖npm install # 或 pnpm install如果提示依赖版本冲突让AI帮你解决“我的package.json里依赖有版本冲突安装时报错错误信息如下[粘贴报错信息]请帮我调整版本号。”② 启动开发服务器npm run dev访问http://localhost:3000看到页面说明项目启动成功(端口号需与vite.config.ts中配置的port一致) ✅③ 检查所有功能检查项验证方法✅ 页面能正常打开访问localhost:3000显示内容✅ 路由跳转正常点击导航或手动输入URL页面切换正常✅ 路径别名有效在代码中import xx from /components/xxx不报错✅ 代理配置有效调用/api/xxx接口能代理到后端如果有后端的话✅ ESLint生效故意写一个const a: any 1终端/编辑器会报错✅ Element Plus按需导入使用el-button页面正常显示不报错4. 第四步用AI初始化Git仓库项目搭好后下一步是提交代码提示词“请帮我生成.gitignore文件忽略node_modules、dist、.env.local、*.log等一份commitlint.config.jsGit提交信息规范一份husky的pre-commit钩子配置提交前自动跑ESLint然后告诉我初始化Git仓库的完整命令。”AI会生成所有文件并给你命令# 初始化Git仓库 git init # 添加.gitignore文件用AI生成的内容 # 添加commitlint配置 # 安装husky npm install -D husky npx husky install # 添加pre-commit钩子 npx husky add .husky/pre-commit npm run lint # 首次提交 git add . git commit -m feat: 初始化项目脚手架 git remote add origin [你的远程仓库地址] git push -u origin main5. 第五步让AI生成“开箱即用”的示例模块项目搭好了但空荡荡的。让AI生成一个示例模块方便你复制模板提示词“请帮我生成一个用户管理模块的完整代码作为示例模板。包含src/views/user/UserList.vue列表页src/views/user/UserForm.vue新增/编辑弹窗src/api/modules/user.ts用户相关接口src/stores/user.ts用户状态管理src/router/modules/user.ts用户路由配置功能列表展示、搜索、新增、编辑、删除。使用 Element Plus 组件TypeScript类型完整。”这样你就有了一个完整的“模板模块”以后写其他模块订单、商品、分类直接复制改名就行。6. 常见的项目初始化踩坑与解决方案踩坑1依赖版本冲突现象npm install时报错peer dependency conflict解决方案给AI看报错让它帮你调整版本号或使用npm install --legacy-peer-deps踩坑2路径别名在Vue文件中不生效现象import xxx from /components/xxx报Cannot find module解决方案检查vite.config.ts的alias和tsconfig.json的paths是否一致踩坑3Element Plus按需导入后组件样式丢失现象el-button能显示但没有任何样式解决方案确认vite.config.ts中的AutoImport和Components插件配置正确并安装了unplugin-vue-components和unplugin-auto-import踩坑4代理配置不生效请求404现象/api/user请求返回404解决方案检查后端实际地址是否http://localhost:8080确认rewrite规则是否多余万能解决法遇到任何报错把完整的报错信息 相关配置文件一起丢给Claude Code它能给出精确的修复方案。7. 人工验收清单AI帮你搭好了项目你作为“30%的人工”需要逐项确认检查项确认内容✅ 项目能跑npm run dev无报错✅ 类型检查通过npx vue-tsc --noEmit无报错或有可控的warning✅ ESLint通过npm run lint无报错✅ 路径别名生效/在Vue和TS文件中都能正常使用✅ 代理配置正确能正常调用后端接口如果有✅ 打包测试npm run build能成功生成dist目录✅ 环境变量替换正确开发环境读.env.development生产环境读.env.production✅ Git钩子生效提交时自动跑ESLint不通过则拦截✅ README完善其他团队成员能根据README启动项目8. 进阶让AI生成Docker部署配置如果项目要上容器可以让AI顺便生成Docker配置提示词“请帮我生成一份Dockerfile和nginx.conf用于部署这个Vue3项目。要求使用多阶段构建先构建再用nginx提供服务nginx配置支持SPA路由所有路由都指向index.html开启gzip压缩配置缓存策略静态资源强缓存HTML文件协商缓存”这样连运维配置都一步到位了。8.12 本篇小结项目初始化是AI最能发挥价值的环节5分钟搞定原本半天的工作核心配置Vite/TypeScript/ESLint让AI生成你只需验收万能方法把完整的报错信息 配置文件丢给AI快速解决踩坑下篇预告AI生成了这么多代码但质量过关吗第9篇我们讲代码审查篇—— 怎么用AI当你的代码审查员保证代码质量和安全性。