window10下搭建vue前端开发环境

最新推荐文章于 2025-07-13 14:40:01 发布

原创最新推荐文章于 2025-07-13 14:40:01 发布 · 737 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了Vue开发所需的环境搭建和工具配置。运行环境为Node.js，需下载Vue开发相关依赖项，还介绍了npm常用命令。开发工具使用Visual Studio Code并需安装相关插件，同时提及了git安装、vue调试工具devtools、接口调试工具postMan和hosts配置工具SwitchHosts的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 运行环境：nodejs

下载网址：http://nodejs.cn/download/
根据自己系统选择对应的安装包，我的系统window10 ，64位。

二. 下载vue开发环境相关的依赖项

打开cmd终端，输入node -v，查看nodejs版本号，来检查nodejs是否安装成功了。
安装vue：npm install vue
安装vue脚手架：npm install -g @vue/cli

步骤2安装成功后，在cmd中输入vue，可能提示该命令不存在，无法识别。需要配置环境变量才可以。找到控制面板->系统和安全->系统->高级系统设置->设置用户环境变量

本电脑系统环境变量有权限限制无法修改，可以在用户环境变量添加，找到nodejs安装目录下node_global，注意：一定要放在npm环境变量的前面

我也入了一个坑，就是我的电脑c盘有操作文件权限，需要配置一下当前用户对该文件夹有读写权限才可以。
在这里插入图片描述

npm常用命令

. 查看npm全局安装的依赖：npm -g list
. 删除某一个依赖项：npm uninstall vue
. 清空安装缓存：npm clean cache

三. 开发工具：Visual Studio Code

网址：https://code.visualstudio.com/Download
安装成功后，需要下载插件：

汉化：Chinese Languange 中文简体
代码格式化：ESLint
git记录：GitLens
markdown文件工具：Markdown All in One

四. git安装

参考网址：https://www.liaoxuefeng.com/wiki/896043488029600/896067074338496

五. vue调试工具：devtools

网址：https://github.com/vuejs/vue-devtools

六. 接口调试工具：postMan

网址：https://www.getpostman.com/

七. hosts配置工具：SwitchHosts

网址：https://oldj.github.io/SwitchHosts/