⏰ 别再浪费时间了！10 分钟搞定 Vue 项目环境搭建，萌新也能轻松上手

🐾 背景

在当今前端开发中，手写原生 HTML/CSS/JavaScript 已经不能满足现代项目的需求。

笔者作为一个过来人，我深刻理解新手在项目搭建时遇到的困惑，所以写下本文。

为什么选择Vue？

✅ 社区活跃，遇到问题容易找到解决方案

✅ 学习曲线平缓，适合新手快速上手

✅ 生态完善，拥有丰富的插件和工具支持

本文将带你从零开始，一步步完成 Vue 项目的创建、配置和运行。

跟着做，你不仅能避开我踩过的坑，还能为后续创建一个稳定的开发环境。

💦 创建

接下来开始创建 Vue 项目，过程可能比较繁琐，但耐心跟着做会有收获。

1.win10 终端输入 node 查看是否已安装 node.js。（node 安装十分简单，一路 next 即可，本文使用 node 16演示）

node

更换清华源，提高下载速度

npm config set registry https://registry.npmmirror.com

2.全局安装 vue。(只需安装一次，下次就可以直接用 vue 命令创建前端项目)

npm install -g @vue/cli

3.定位到自己保存项目的目录，并进入终端创建 vue 工程。（假设项目命名为 test）

vue create test

执行命令后，按下方向键，选择 Manually select features。

再按 enter 进入自定义配置。

4.选择拓展

我们一般选择添加 Router、Vuex，去掉 Linner / Formatter。（点击空格键进行选择）

5.选择 Vue版本

定位到 Choose Vue version 选项（有些版本没有这一行，那就选择 VueX），enter 进入。

enter 选择 3.x 下一步是否选择 history mode for router，建议选 y。

接下来选择 In package.json。

下一步会询问你是否保存当前的配置方案，选 y 会让你选择一个保存名。

这里我选择 y，并命名为 base-config。（意思就是基础配置，这个配置方案很常用）

点击 enter 后，在工作目录（这里是 D:\D-DeskTop\VueMs）下开始创建 vue 初始工程，如果卡住就按 f5 刷新一下。

🚀 启动

创建成功后，工程目录结构如下。

进入工程根目录（上图），执行 npm 命令，运行程序。

cd test

npm run server

启动成功后，访问对应网址。 http://localhost:8080/

结果如下

✏️ 开发

将 vue 项目拖入 idea 进行开发。最好使用专业版 idea，才能下载 vue.js 插件进行开发。

第一次 idea 会提示你下载 vue.js。

如图，代码有颜色。

选择 add configuration 添加配置。

点击 + 号，再选择 npm。

Script 输入 serve（图片有误，应该是 serve 而不是 server），package.json 定位到项目根目录的 package.json。

以后点击 serve 旁边的启动键就可以运行 vue 项目。