我的新电脑前端配置

一、安装 node、npm、cnpm、yarn

彻底删除之前安装的 node（如果没有请忽略此步骤）

1）打开此电脑，选择卸载或更改程序，找到 node.js 并卸载它

2）删除额外的文件

3）查找.npmrc文件是否存在，有就删除

4）逐一查看一下文件是否存在，存在就删除

C:\Program Files (x86)\Nodejs

C:\Program Files\Nodejs

C:\Users\用户名\AppData\Roaming\npm

C:\Users\用户名\AppData\Roaming\npm-cache

5） 打开系统设置，检查系统环境变量，将node相关的配置都删掉

一般系统会自动把node环境变量删掉了，可以不用管这步。

环境变量打开方式：我的电脑->属性->高级->环境变量->

用户变量的Path删除->系统变量的NODE_PATH里的node删掉

6）查看是否删除成功

在键盘上按下win + R ，输入cmd ，然后点击回车键，在命令行中输入node -v

原文章参考： blog.csdn.net/weixin_4643...

1、下载指定版本的 node

官网地址： nodejs.org/en

点击 download 下载

点击 Previous Releases（以前的版本）

我选择 16 的版本

此时界面，选择所需的系统、版本和安装包形式，选择 x64.msi

更改安装路径

直接下一步

这里不勾选

安装完成后，.msi格式的安装包已经将node启动程序添加到系统环境变量path中,咱们能够查看系统变量进行验证：在【个人电脑】右键→【属性】→【高级系统设置】

到 cmd 页面，查看 node 和 npm 是否安装成功

win + R 搜索 cmd

node -v

npm -v

默认状况下，咱们在执行npm install -g XXXX时，下载了一个全局包，这个包的默认存放路径C:\Users\Administrator\AppData\Roaming\npm\node_modules下，能够经过CMD指令npm root -g查看

环境配置

① 打开安装的目录（默认安装情况下在C:\Program Files\nodejs）我这里是 在 D盘

② 在安装目录下新建两个文件夹【node_global】和【node_cache】

重新设置 npm 的安装目录和缓存目录

以管理员身份打开 CMD

查看 npm 默认路径

npm config ls

重设全局路径

npm config set prefix "D:\nodejs\node_global"

重设缓存路径

npm config set cache "D:\nodejs\node_cache"

新建 系统变量 NODE_PATH

路径：

"D:\nodejs\node_global\node_modules"

点开用户变量的 path

将默认的 C 盘下 APPData\Roaming\npm 修改成 "D:\nodejs\node_global"，点击确定

最后别忘了在Path里面添加NODE_PATH

更换npm源为淘宝镜像

启动cmd，输入如下命令

1、查看初始npm源，如图：

npm config get registry

2、更换镜像为淘宝镜像

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

3、检查配置是否成功

npm config get registry

全局安装基于淘宝源的cnpm

1、全局安装基于淘宝源的cnpm

npm install cnpm@6.1.1 -g

2、下载完后，我们在本地就能看到cnpm模块

3、执行命令查看cnpm是否安装成功

cnpm -v

安装 yarn

cnpm install yarn -g

去掉报错

原因：npm 的全局配置--global, --local已弃用。需使用--location=global替代 。

修改npm，npm.cmd文件

以管理员身份运行 vscode

把文件中prefix -g修改成prefix --location=global

二、局部安装 vue2 和 vue3

1、在 D盘新建文件夹

2、局部安装vue3

1）、在vue3文件夹下执行命令 npm install @vue/cli（不加-g，代表是局部安装，反之npm install -g @vue/cli为全局安装）

npm install @vue/cli

2）、查看是否安装成功 在vue3.0文件夹中找到路径 \node_modules.bin并且使用cmd打开并执行 （显示版本号即为安装成功）

vue -V

3）、修改vue3.0文件夹中node_modules/.bin中vue和vue.cmd 的文件名称，修改为vue3和vue3.cmd，方便以后与vue2.0混淆

修改后

设置 vue3 的环境变量

新增名为 VUE_CLI3 的系统变量 路径选择 "D:\vue3.0\node_modules.bin"

将%VUE_CLI3% 添加到用户变量里

以上，就可以全局使用 vue3 创建项目了

3、局部安装vue2

在D 盘的 vue2 文件夹下

cnpm install vue-cli

修改名称和设置系统变量

这样就是成功了

创建项目

创建 vue2 项目

vue2 init webpack v2-demo

cnpm install

cnpm i node-sass@4.14.1 sass-loader@7.3.1 --save-dev

创建 vue3 项目

yarn create vite v3-demo

或者

npm create vite@latest demo

yarn install

yarn add sass sass-loader