Vue前端开发环境配置指南 (持续更新...)

目录

安装node.js

安装vue-cli

安装nvm (node.js版本管理工具)

查看当前node版本

查看安装的node列表

安装指定版本的node.js

切换node.js版本

安装whistle.js (调试)

安装HbuilderX

npm配置

重置npm配置

查看npm配置

淘宝源镜像配置

方式一：使用CNPM

方式二：设置npm镜像源

全局配置

临时配置

npm与node的对应关系

更新npm版本

常建问题以及解决方案

安装node-sass时,node-gyp 报node版本错误

解决方案：

方式一：cnpm安装

第一步：安装cnpm

第二步：使用cnpm 安装

方式二：临时设置源镜像

Failed At @sentry/cli@1.75.0 install: `node ./scripts/install.js`

解决方案：安装时忽略脚本

image-webpack-loader安装失败

解决方案卸载后设置对应host再重新安装

第一步：卸载

第二步：配置host

第三步：重启

第四步：重新安装

---

安装node.js

下载安装地址：nodejs/Release: Node.js Release Working Group (github.com)

根据需要选择对应的版本即可

安装vue-cli

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)

node.js安装好后在命令行执行如下命令

npm install -g @vue/cli

安装nvm (node.js版本管理工具)

windows下载地址：Releases · coreybutler/nvm-windows (github.com)

查看当前node版本

nvm current

查看安装的node列表

node list

安装指定版本的node.js

nvm install 14.17.6

切换node.js版本

nvm use 14.17.6

若切换报错关闭正在使用nodejs的程序并使用管理员的方式打开cmd再试即可

安装whistle.js (调试)

一键安装：

npm i -g whistle && w2 start --init

这样安装好后默认会设置全局代理和安装根证书 全局代理地址127.0.0.1:8899

若要关闭系统代理在命令行执行以下命令即可

w2 proxy --off

需要再次开启时执行以下命令即可

w2 proxy 

使用截图：

启动：

w2 start

关闭：

w2 stop

安装HbuilderX

下载地址：HBuilderX-高效极客技巧 (dcloud.io)

npm配置

重置npm配置

npm config delete [key]

key属于配置对象的key

查看npm配置

npm config ls -l --json

淘宝源镜像配置

方式一：使用CNPM

安装cpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装时用 cnpm 代替 npm

方式二：设置npm镜像源

全局配置

npm config set registry https://registry.npm.taobao.org

临时配置

npm --registry https://registry.npm.taobao.org install

npm与node的对应关系

更多版本及npm对应关系请查看：https://nodejs.org/dist/index.json

更新npm版本

npm install -g npm@6.14.15

npm版本不能随便更新，需要与node.js版本相对应

常建问题以及解决方案

安装node-sass时,node-gyp 报node版本错误

注意版本：

解决方案：

方式一：cnpm安装

第一步：安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：使用cnpm 安装

cnpm install -D node-sass@4.14.1

方式二：临时设置源镜像

npm install --registry=https://registry.npm.taobao.org node-sass@4.14.1

Failed At @sentry/cli@1.75.0 install: `node ./scripts/install.js`

解决方案：安装时忽略脚本

npm install --ignore-scripts

image-webpack-loader安装失败

解决方案卸载后设置对应host再重新安装

第一步：卸载

npm uninstall image-webpack-loader

第二步：配置host

185.199.108.133    raw.githubusercontent.com

hosts所在目录：C:\Windows\System32\drivers\etc
若该ip失效 再重新查询 raw.githubusercontent.com 的ip地址即可
推荐IP地址查询网站： ipaddress.com|ipaddress.com的IP地址_IP地址查询 (900cha.com)

第三步：重启

第四步：重新安装

npm install --registry=https://registry.npm.taobao.org image-webpack-loader