Vue CLI 4.0 项目初始化完整指南
环境准备
在开始创建项目之前，需要确保本地开发环境已配置好以下工具：
- Node.js（建议使用 LTS 版本）
- npm（Node.js 安装后自带）
- Vue CLI（Vue 官方脚手架工具）
如果尚未安装 Vue CLI，可通过以下命令全局安装：
npm install -g @vue/cli
# 或
yarn global add @vue/cli
创建新项目
在命令行中进入目标目录，执行创建命令：
vue create my-vue-app
执行后会出现交互式配置界面。
选择配置模式
默认提供两种模式：
- 默认配置：使用 Vue2 或 Vue3 默认模板
- 手动配置：按需选择功能和选项
使用上下方向键移动光标，选择「Manually select features」，按回车确认。
选择项目特性
通过方向键上下移动，空格键切换选中状态。以下是可配置的功能项：
? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default ([Vue 3] babel, eslint)
> Manually select features
可用功能选项详解
- Babel：JavaScript 编译器，将 ES6+ 语法转换为向后兼容的 ES5 代码
- TypeScript：JavaScript 的超集，支持强类型定义，需编译为 JS 执行
- Progressive Web App (PWA) Support：渐进式 Web 应用支持
- Router：Vue Router 路由管理
- Vuex：Vue 状态管理模式
- CSS Pre-processors：CSS 预处理器（支持 Sass、Less、Stylus 等）
- Linter / Formatter：代码质量检查与格式化（如 ESLint）
- Unit Testing：单元测试框架
- E2E Testing：端到端测试框架
配置项详情
Router 模式选择
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
推荐选择「N」。Hash 模式打包后可直接部署，无需服务器额外配置。History 模式需要服务器配置反向代理以支持 SPA 路由 fallback。
CSS 预处理器选择
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS
Less
Stylus
推荐使用 Sass/SCSS。相比 node-sass，dart-sass 是官方推荐版本，新特性优先支持。注意：dart-sass 需要保存文件后才会触发编译。
代码规范工具
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
ESLint + Prettier 是目前主流配置方案，结合了代码检查和自动格式化功能。
代码检测时机
? Pick additional lint features:
(*) Lint on save
( ) Lint and fix on commit
建议选择「Lint on save」，保存时即时检测问题，便于及时修复。提交时检测可能导致问题积累过多。
单元测试框架
? Pick a unit test solution:
Mocha + Chai
Jest
- Jest：配置简洁、内置代码覆盖率统计、与 Babel 集成良好
- Mocha + Chai：灵活性高，需要额外配置测试环境
推荐项目使用 Jest，上手更快。
配置文件存放方式
? Where do you prefer placing config files?
In dedicated config files
In package.json
推荐选择「In dedicated config files」，配置文件独立存放，结构更清晰。独立存放会在项目根目录生成以下文件：
.eslintrc.jsbabel.config.jstests/unit.spec.js
保存配置模板
? Save this as a preset for future projects? (y/N)
输入「Y」可保存当前配置供后续项目使用，需输入预设名称。
启动项目
配置完成后，等待依赖安装完成。进入项目目录：
cd my-vue-app
启动开发服务器：
npm run serve
或使用 Yarn：
yarn serve
服务启动后，访问命令行显示的本地地址（通常是 http://localhost:8080）即可查看项目。
项目结构概览
my-vue-app/
├── public/ # 静态资源目录
├── src/ # 源代码目录
│ ├── assets/ # 资源文件
│ ├── components/ # 组件
│ ├── views/ # 页面视图
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── tests/ # 测试文件
├── babel.config.js # Babel 配置
├── package.json # 项目依赖
└── vue.config.js # Vue CLI 配置
