如何用Vue CLI 创建 Vue 项目

使用 Vue CLI 创建 Vue 项目的步骤如下，适用于 Vue 2 和 Vue 3（Vue CLI 会自动根据配置适配版本）。整个过程通过命令行完成，即使是新手也能轻松上手。

---

❤ 【作者主页—📚优质文章、获取更多优质源码】

一.安装依赖环境
Vue CLI 依赖 Node.js 和 npm（Node.js 自带），因此第一步需要确保这两个工具已安装。

检查 Node.js 和 npm 是否安装打开终端（Windows 用 CMD/PowerShell，Mac/Linux 用 Terminal），输入以下命令：

node -v   # 查看Node.js版本（需 ≥8.9，推荐10.0+）
npm -v    # 查看npm版本（通常随Node.js一起安装）

如果未安装或版本过低，需先安装 Node.js：

• 下载地址：Node.js 官网（推荐 “LTS 长期支持版”，安装时勾选 “Add to PATH”）。
• 安装完成后，重新打开终端，再次执行上述命令确认版本。

二.全局安装 Vue CLI

Vue CLI 是一个全局工具，需要先通过 npm 全局安装。

在终端输入以下命令：

# 全局安装Vue CLI（如果npm速度慢，可先切换淘宝镜像：npm config set registry https://registry.npm.taobao.org）
npm install -g @vue/cli

安装完成后，验证是否安装成功：

vue --version  # 或 vue -V（大写V）

如果输出类似 @vue/cli 5.0.8 的版本号，说明安装成功。

三.创建 Vue 项目

使用vue create命令创建项目，步骤如下：

1.进入项目存放目录先通过cd命令进入你想存放项目的文件夹（例如 “桌面”）：

# Windows示例：进入桌面
cd C:\Users\你的用户名\Desktop# Mac/Linux示例：进入桌面
cd ~/Desktop

2.创建项目输入vue create 项目名（项目名建议用小写，多个单词用短横线连接，例如my-vue-project）：

vue create my-vue-project

3.选择项目配置（核心步骤）执行命令后，会出现配置选项，分为两种模式：
▷▶▷默认配置（Default）：快速创建，包含 Babel（转译 ES6 + 语法）和 ESLint（代码规范检查），适合新手快速上手。
▷▶▷手动配置（Manually select features）：自定义需要的功能（推荐，可按需选择路由、状态管理等）。

---

选项 1：默认配置（快速创建）

直接按Enter键，CLI 会自动安装依赖，等待几分钟（取决于网络速度），项目创建完成。

选项 2：手动配置（推荐，详细说明）

按方向键↓选择Manually select features，按Enter进入自定义配置。

接下来需要选择项目所需的 “特性”（按空格键勾选 / 取消，选完后按Enter）：常用必选 / 可选特性说明：

• Babel：必选，转译 ES6 + 语法（让老浏览器兼容）。
• TypeScript：可选，若需要用 TS 开发则勾选。
• Progressive Web App (PWA) Support：可选，开发 PWA 应用（离线可用）。
• Router：必选，Vue 路由（实现页面跳转）。
• Vuex：可选，Vue 状态管理（管理全局数据）。
• CSS Pre-processors：必选，CSS 预处理器（推荐选 Sass/SCSS，方便写嵌套样式）。
• Linter / Formatter：可选，代码规范检查（推荐选，强制统一代码风格）。
• Unit Testing/E2E Testing：可选，测试相关（新手可暂不选）。

例如：新手推荐勾选 Babel + Router + CSS Pre-processors + Linter。

手动配置后续选项（按顺序选择）

1. 选择 Vue 版本若勾选了 Router/Vuex，会提示选择 Vue 版本：

   • 选3.x（Vue 2）或2.x（Vue 3），根据需求选择（新手推荐 Vue 3）。

2. Router 是否使用 history 模式路由模式：Y（history 模式，URL 无#）或n（hash 模式，URL 带#）。

   • 新手建议选n（hash 模式，避免部署时需要服务器配置）。

3. 选择 CSS 预处理器按需求选择（推荐Sass/SCSS (with dart-sass)，功能全、速度快）。

4. 选择 ESLint 代码规范推荐ESLint + Standard config（标准规范，简单易上手）。

5. 选择 ESLint 检查时机推荐Lint on save（保存时自动检查）。

6. 配置文件存放位置推荐In dedicated config files（单独的配置文件，结构清晰）。

7. 是否保存为预设（供下次使用）输入n（不保存，新手无需），或输入预设名保存（下次可直接用）。

四.启动项目

项目创建完成后，终端会提示进入项目目录并启动开发服务器

1.进入项目目录

cd my-vue-project  # 替换为你的项目名

2.启动开发服务器

npm run serve  # 或 yarn serve（如果用yarn）

3.访问项目

启动成功后，终端会显示访问地址，通常是：

• 本地：http://localhost:8080
• 局域网：http://你的IP:8080（同一网络的设备可访问）打开浏览器访问上述地址，看到 Vue 默认欢迎页，说明项目创建成功！

五.项目结构说明（核心文件）

创建完成的项目结构中，核心文件 / 文件夹如下：

my-vue-project/
├── node_modules/    # 依赖包（无需手动修改）
├── public/          # 静态资源（如图片、index.html）
├── src/             # 源代码（核心开发目录）
│   ├── assets/      # 图片、样式等资源
│   ├── components/  # 可复用组件
│   ├── router/      # 路由配置（router/index.js）
│   ├── views/       # 页面组件（配合路由使用）
│   ├── App.vue      # 根组件
│   └── main.js      # 入口文件（初始化Vue实例）
├── package.json     # 项目配置（依赖、脚本命令等）
└── README.md        # 项目说明

常用命令

• 启动开发服务器：npm run serve（开发时用，自动热更新）
• 构建生产版本（打包上线）：npm run build（生成dist文件夹，可部署到服务器）
• 代码规范检查：npm run lint（修复不符合规范的代码）
• 安装新依赖：npm install 包名（例如npm install axios安装请求库）

常见问题

✘安装 Vue CLI 时提示 “权限不足”：
      Windows：用管理员身份打开终端。
      Mac/Linux：在命令前加sudo（例如sudo npm install -g @vue/cli）。
✘启动项目时端口被占用：

      终端会提示 “Port 8080 is already in use”，此时可按提示输入Y自动切换端口，或手动修改vue.config.js配置端口。
✘忘记手动配置的选项：

      可通过vue add 插件名补装（例如vue add router补装路由）。

按照上述步骤操作，你就能顺利通过 Vue CLI 创建并启动 Vue 项目。现在，可以开始在 src 目录中编写 Vue 代码了

六.更多干货

--------------------- - -----✈---------   ---------✈--------------------✈-------
1.如果我的博客对你有帮助或你喜欢我的博客内容，请 “👍点赞” “✍️评论” “★收藏” 一键三连哦！

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、微信小程序模板 、等! 「在这里一起探讨知识，互相学习」！

3.以上内容技术相关问题✉欢迎一起交流学习 ☟   ☟   ☟