webstorm运行Vue项目环境配置(如何从0配置运行一个写好的vue项目)

2.下载完成后解压至需要的文件夹下。
3.在此文件夹下新建两个文件夹:
node_cache:npm缓存路径
node_global:npm全局安装路径
4.配置环境变量
右击我的电脑 - 点击属性 - 点击高级系统设置 - 点击环境变量
在系统变量中新建变量。
变量名:NODE_HOME
变量值:node解压的文件夹地址
在系统变量的Path中新建两个变量
%NODE_HOME%
%NODE_HOME%\node_global
确定-确定-确定
5.配置 npm 全局路径和缓存路径
windows + R 打开命令行工具,输入cmd,点击确定打开。
点击右侧的v,点击 Windows PowerShell,以管理员身份打开命令行工具。
执行
npm config set cache "E:\node16.14\node-v16.14.0-win-x64\node_cache"
npm config set prefix "E:\node16.14\node-v16.14.0-win-x64\node_global"
6.验证是否安装成功
windows + R 打开命令行工具,输入cmd,点击确定打开。
执行
node -v
npm -v
出现版本即为安装成功。
7.cnpm安装
安装淘宝镜像(类似于阿里云的maven中央仓库镜像)
执行
npm install -g cnpm --registry=https://registry.npm.taobao.org
执行 cnpm -v
验证是否安装成功。
8.webpack安装
执行
cnpm install webpack -g
9.全局安装vue-cli
执行
npm install --global vue-cli
验证是否安装成功。执行
vue -V
注意“V”要大写!
10.项目配置
点击右上角框,点击 Edit Configurations
将Node interpreter修改为node包中的node.exe的地址。
将Package manager的地址修改为node包中node_modules包下npm的地址。
点击Apply应用后再点击ok。
11.安装依赖
删除原有的node_modules目录。
进入webstorm,在控制台,输入
npm install 或 cnpm
install
项目目录会自动生成node_modules目录
12.运行项目
点击出现的访问地址进行访问。
完成!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性