Vue3项目初始化实操指南，从CLI创建到配置选项详解
本文系统梳理 Vue 3 项目通过 Vue CLI 创建的完整流程，涵盖目录准备、命令执行、特性选择（Vue 版本、路由、CSS 预处理器、ESLint）、配置文件存放方式等关键步骤，并结合实际终端交...
Vue 3 自 2020 年正式发布以来，已成为前端开发主流框架之一。对于新项目启动，Vue CLI 仍是多数开发者首选的脚手架工具。尽管 Vite 已逐渐成为新建项目的推荐方案，但 Vue CLI 在企业级中大型项目中仍具广泛适用性，尤其在需深度定制构建配置或集成传统工具链的场景下。本文基于真实操作流程，还原 Vue 3 项目初始化的完整路径。
首先需准备项目根目录。以 Windows 系统为例，可在任意路径下新建文件夹，如 C:\Program Files\project；Linux 或 macOS 用户则可使用 mkdir ~/vue-projects 创建目录。随后通过命令行进入该目录：cd C:\Program Files\project（Windows）或 cd ~/vue-projects（类 Unix 系统）。
- Default ([Vue 2] babel, eslint)：快速生成 Vue 2 项目；
- Default ([Vue 3] babel, eslint)：快速生成 Vue 3 项目；
- Manually select features：手动配置，提供最大灵活性。
- Choose Vue version：明确指定使用 Vue 3（若未显式选择，部分旧版 CLI 可能默认 Vue 2）；
- Babel：启用 ES6+ 语法转译，兼容低版本浏览器；
- TypeScript：支持强类型开发，提升大型项目可维护性；
- Router：集成 Vue Router 实现单页应用导航；
- Vuex：状态管理方案（注：Vue 3 中 Pinia 已成官方推荐，但 CLI 仍保留 Vuex 选项）；
- CSS Pre-processors：支持 Sass/SCSS、Less、Stylus 等预处理器；
- Linter/Formatter：代码质量保障工具，如 ESLint + Prettier 组合；
- Unit Test / E2E Testing：测试能力集成。
在实际操作中，常见组合为：Vue 3 + Babel + Router + Vuex + Sass + ESLint。其中关于路由模式的选择值得注意：当启用“Use history mode for router”时，需后端配合处理 404 跳转，否则直接访问子路径可能出现空白页。因此初学者通常选择“否”（输入 n），采用默认 hash 模式以规避部署问题。
CSS 预处理器方面，Sass/SCSS 因其成熟生态与社区支持被广泛采用；Less 功能简洁易上手；Stylus 语法灵活但学习曲线略陡。多数团队倾向于 Sass，因其与 Bootstrap 4+、Element Plus 等 UI 库兼容性更佳。
代码规范环节，ESLint 是事实标准。配置项中，“ESLint + Standard config”提供开箱即用的规则集；检查时机可选“Lint on save”（保存时校验）或“Lint and fix on commit”（提交前自动修复，需 Git 环境）。后者更适合协作开发，但对新手可能造成干扰，故推荐初期选用前者。
配置文件存放策略影响项目结构清晰度。选项“In dedicated config files”会将 .babelrc、.eslintrc.js、postcss.config.js 等独立成文件，便于查阅与修改；而“In package.json”则将其内联至 package.json 的字段中，适合轻量项目。企业级项目普遍倾向前者，以提升可维护性。
完成上述选择后, CLI 将询问是否保存本次配置为 preset，供后续快速复用。若为一次性项目，可输入 n 跳过；若属团队标准模板，则可保存为 my-vue3-preset 等名称。
配置确认后，CLI 自动执行依赖安装，耗时取决于网络与机器性能。安装完成后，进入项目目录并运行：npm run serve。本地开发服务器启动，默认监听 http://localhost:8080，浏览器访问即可看到 Vue 默认欢迎页。
- 需要复杂 Webpack 插件定制（如自定义 loader、多入口构建）；
- 项目需兼容 IE11 或老旧环境（通过 Babel + polyfill 精准控制）；
- 团队已有成熟 CLI 脚手架体系，迁移成本高。
此外，补充素材提及的 Prettier 集成问题，在 CLI 初始化阶段即可一并解决：选择 Linter 时勾选“ESLint + Prettier”，CLI 会自动配置 eslint-plugin-prettier 与 prettier 依赖，并在 .eslintrc.js 中启用 prettier/prettier 规则，实现保存即格式化。
对比其他技术栈初始化流程（如 Spring Boot 的 Maven POM 或 Django 的 startproject），Vue CLI 的交互式设计显著降低了前端工程化门槛。它将原本分散于文档中的配置项整合为可视化决策树，使开发者无需记忆大量参数即可产出标准化项目结构。
实际工程中，许多团队会在 CLI 生成基础后进一步封装：例如添加 husky + lint-staged 实现提交前校验，集成 Jest 或 Cypress 完善测试覆盖，或引入 TypeScript 类型定义增强 IDE 支持。这些扩展均建立在 CLI 提供的稳定骨架之上。
最后需强调，Vue 3 的 Composition API 与
阅读原文
