我的新电脑前端配置

2,991 阅读4分钟

一、安装 node、npm、cnpm、yarn

彻底删除之前安装的 node(如果没有请忽略此步骤)
1)打开此电脑,选择卸载或更改程序,找到 node.js 并卸载它

image.png

image.png

2)删除额外的文件

image.png

image.png

3)查找.npmrc文件是否存在,有就删除

image.png

4)逐一查看一下文件是否存在,存在就删除

C:\Program Files (x86)\Nodejs

C:\Program Files\Nodejs

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

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

image.png

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

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

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

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

image.png

6)查看是否删除成功

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

image.png

image.png

原文章参考: blog.csdn.net/weixin_4643…

1、下载指定版本的 node

官网地址: nodejs.org/en

点击 download 下载

image.png 点击 Previous Releases(以前的版本)

image.png 我选择 16 的版本

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

image.png 更改安装路径

image.png 直接下一步

image.png

这里不勾选

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

image.png

到 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查看

image.png

环境配置

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

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

image.png

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

以管理员身份打开 CMD

image.png

查看 npm 默认路径

npm config ls

重设全局路径

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

重设缓存路径

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

image.png

新建 系统变量 NODE_PATH

image.png

路径:

"D:\nodejs\node_global\node_modules"

image.png

点开用户变量的 path

image.png

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

image.png

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

image.png image.png

更换npm源为淘宝镜像

启动cmd,输入如下命令
1、查看初始npm源,如图:

npm config get registry

image.png 2、更换镜像为淘宝镜像

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

3、检查配置是否成功

npm config get registry

image.png

全局安装基于淘宝源的cnpm

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

npm install cnpm@6.1.1 -g

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

image.png

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

cnpm -v

image.png

安装 yarn
cnpm install yarn -g
去掉报错

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

image.png

修改npm,npm.cmd文件

image.png

以管理员身份运行 vscode

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

image.png image.png

二、局部安装 vue2 和 vue3

1、在 D盘新建文件夹

image.png

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

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

image.png 修改后

image.png

设置 vue3 的环境变量

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

image.png

image.png 将%VUE_CLI3% 添加到用户变量里

image.png

image.png

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

3、局部安装vue2

在D 盘的 vue2 文件夹下

cnpm install vue-cli

image.png

修改名称和设置系统变量

image.png

image.png

image.png

这样就是成功了

image.png

创建项目

创建 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