小雷带你从0到1搭建Vue项目（2）
在上一篇文章里，我带大家初步进行了创建Vue项目的环境准备和使用不同脚手架工具创建了一个Vue项目，并对比了不同工具的特点。没看过我上一篇文章的朋友可以点击这里。在这篇文章里我会带大家进一步完成Vue中项目的初始化。
三、项目初始化
1、使用 Vue CLI 初始化项目全流程
（1）. 打开终端（Windows 示例）
按 Win+R 输入 cmd 或 powershell
（2）. 创建新项目
# 基础命令（交互式创建）
vue create my-vue-project
# 快速创建（使用默认配置）
vue create my-vue-project --default
（3）. 交互式配置（重点步骤）
执行vue create my-vue-project命令后终端会显示配置选项，以下是典型交互流程：
? Please pick a preset:
> Default (Vue 3)
Default (Vue 2)
Manually select features
选 Manually select features 自定义配置（推荐）
接下来让我们为项目选择功能模块：
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
◉ TypeScript
◉ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◉ Unit Testing
◉ E2E Testing
注意在这里是按空格键勾选，按 Enter 确认。
然后是选择Vue版本：
? Choose a version of Vue.js that you want to use:
> 3.x
2.x
配置路由：
? Use history mode for router? (Requires proper server setup for index.html fallback in production)
> Yes
No
在这里Yes：使用历史路径模式（如 /about）；No：使用哈希模式（如 /#/about）。具体两者的区别我会在后面详述，历史路径需要后端配合，而哈希模式不需要，所以一般我们自己创建项目时选择哈希路由。
选择 CSS 预处理器：
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass)
Less
Stylus
具体选择可根据自身情况而定。
选择代码规范工具：
? Pick a linter / formatter config:
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
选择代码检查时机：
? Pick additional lint features:
◉ Lint on save
◉ Lint and fix on commit
配置文件寄存方式：
? Where do you want to store these settings?
> In package.json
In a separate config file (vue.config.js)
推荐选 In a separate config file，方便后续修改。
是否保存预设：
? Save this as a preset for future projects? (y/N)
输入 y 并命名，下次可直接使用预设创建项目。这里视情况而定，如果不嫌麻烦可以不用保存预设。
最后就是我在上一篇文章中提到的安装依赖并启动项目。
# 进入项目目录
cd my-vue-project
# 安装依赖（npm/yarn 任选）
npm install
# 或
yarn
# 启动开发服务器
npm run serve
# 或
yarn serve
2、使用 Vite 初始化项目全流程
使用Vite创建项目就快多了，一行命令就可完成项目创建：
# 创建 Vue 3 项目（默认模板）
npm init vite@latest my-vite-app -- --template vue
如果我们后续用到其他功能模块可以自行手动安装。下面我介绍一下vite中我常用的一项配置，为src目录配置别名：
首先在项目根目录创建 vite.config.js，打开该文件添加如下代码：
import { resolve } from 'path'
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, 'src'), // 将 @ 指向 src 目录
},
},
})
然后是安装依赖并启动项目：
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run preview
3、项目结构解析
初始化完成后，项目目录结构如下：
my-vite-app/
├── public/ # 静态资源（直接复制到 dist）
│ └── favicon.ico
├── src/ # 源代码
│ ├── assets/ # 资源文件
│ │ └── logo.png
│ ├── components/ # 组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # 主 HTML
├── package.json # 依赖和脚本
├── vite.config.js # Vite 配置
└── tsconfig.json # TypeScript 配置（若选择 TypeScript 模板）
4、常见问题解决方案
（1）、依赖安装失败
由于npm官方源处于国外，有时可能会由于网络问题导致依赖安装过慢或者失败。换源命令如下：
# 使用国内镜像
npm install --registry=https://registry.npmmirror.com
（2）端口占用
有时VueCLI或者Vite的默认端口可能会被其他应用占用，这是我们就需要指定其他端口：
#Vue CLI
npm run serve -- port 9000 # 指定其他端口
#Vite
npm run dev -- port 9000
好了，今天给大家展示了创建一个Vue项目的完整初始化流程。如果这篇文章帮助到你的话，还希望多多点赞转发，也期待与各位在评论区的讨论。
