我的新电脑前端配置

一、安装 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

js 复制代码
node -v
js 复制代码
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 默认路径

js 复制代码
npm config ls

重设全局路径

js 复制代码
npm config set prefix "D:\nodejs\node_global"

重设缓存路径

js 复制代码
npm config set cache "D:\nodejs\node_cache"
新建 系统变量 NODE_PATH

路径:

js 复制代码
"D:\nodejs\node_global\node_modules"

点开用户变量的 path

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

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

更换npm源为淘宝镜像

启动cmd,输入如下命令

1、查看初始npm源,如图:

js 复制代码
npm config get registry

2、更换镜像为淘宝镜像

js 复制代码
npm config set registry https://registry.npm.taobao.org/

3、检查配置是否成功

js 复制代码
npm config get registry

全局安装基于淘宝源的cnpm

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

js 复制代码
npm install cnpm@6.1.1 -g

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

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

js 复制代码
cnpm -v
安装 yarn
js 复制代码
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为全局安装)

js 复制代码
npm install @vue/cli

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

js 复制代码
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 文件夹下

js 复制代码
cnpm install vue-cli
修改名称和设置系统变量

这样就是成功了

创建项目

创建 vue2 项目

js 复制代码
vue2 init webpack v2-demo
js 复制代码
cnpm install
js 复制代码
cnpm i node-sass@4.14.1 sass-loader@7.3.1 --save-dev

创建 vue3 项目

js 复制代码
yarn create vite v3-demo

或者

js 复制代码
npm create vite@latest demo
js 复制代码
yarn install
js 复制代码
yarn add sass sass-loader
相关推荐
TttHhhYy1 分钟前
vue写后台管理系统,有个需求将所有的$message消息提示换成确认框来增强消息提示效果,遇到嵌套过多的情况,出现某些问题
前端·javascript·vue.js·anti-design-vue
FIRE32 分钟前
uniapp小程序分享使用canvas自定义绘制 vue3
前端·小程序·uni-app
四喜花露水33 分钟前
vue elementui el-dropdown-item设置@click无效的解决方案
前端·vue.js·elementui
jokerest1231 小时前
web——sqliabs靶场——第五关——报错注入和布尔盲注
前端
谢尔登1 小时前
前端开发调试之 PC 端调试
开发语言·前端
每天吃饭的羊1 小时前
在循环中只set一次
开发语言·前端·javascript
_默_4 小时前
adminPage-vue3依赖DetailsModule版本说明:V1.2.1——1) - 新增span与labelSpan属性
前端·javascript·vue.js·npm·开源
也无晴也无风雨6 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang7 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational8 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js