2024年vue 开发环境 Node.js于win10环境下的安装

2024年vue 开发环境 Node.js于win10环境下的安装

导航

文章目录

一、下载node.js

Node.js 官方网站下载:https://nodejs.org/en/download/![image-20240315104834917](https://file.jishuzhan.net/article/1786046508404051969/0b44d765d058361080d7809785317f22.webp)

二、安装node.js

  1. 双击安装包,会提示你是否安装这个可执行文件,选择是(我们在官网下的,不怕),点击next
  2. 选择接收,点击next
  3. 点击change改变安装位置(注意路径最好不要带中文),点击next
  4. 点击next
  5. 不选中,直接next
  6. 点击install安装
  7. 点击finish完成安装

三、测试(一)

win+r打开运行窗口,输入cmd并回车,在命令行界面输入以下代码:

复制代码
 输入:node -v     // 显示node.js版本

            npm -v      // 显示npm版本

有相关信息出来就成功了

四、环境配置

  1. 找到安装的目录,在安装目录下新建两个文件夹【node_global】和【node_cache】

  2. 以管理员身份运行cmd,输入以下代码

    复制代码
    ①npm config set prefix "你的路径\node_global" (复制你刚刚创建的"node_global"文件夹路径)
    ②npm config set cache "你的路径\node_cache" (复制你刚刚创建的"node_cache"文件夹路径)
    小技巧:打开你刚刚新疆的文件然后右击上面的地址就能复制了
  3. 在刚刚新建的文件夹node_global里再新建一个名为node_modules的文件夹,并复制它的地址

  4. 右击此电脑,选择属性,点击右边的高级系统设置,再点击下方的环境变量,在下方的系统变量中选择新建(不会的自行百度),变量名NODE_PATH,变量值就是刚刚复制的node_modules的地址

  5. 点击用户变量里的path,将默认的 C 盘下【 AppData\Roaming\npm 】修改成 【node_global】的路径

  6. 点击系统变量中的path,新建一个变量 %NODE_PATH%,确认即可

五、测试(二)

以管理员身份运行cmd,输入以下代码:npm install express -g

  • -g代表全局安装

六、安装淘宝镜像

cnpm 是通过镜像的方式来提升 npm 包的下载速度,特别是在国内网络环境下。

  1. 在命令行继续输入以下代码: npm config set registry https://registry.npmmirror.com
    • 查看是否成功的代码是:npm config get registry
  2. 输入代码:npm install -g cnpm --registry=https://registry.npmmirror.com
    • 查看是否成功的代码:cnpm -v

本篇参考的博客是这位老哥的https://blog.csdn.net/Python_0011/article/details/132109189

七、安装vue脚手架

  1. 依旧是管理员身份运行命令行,这里先安装webpack模板,输入以下命令进行安装

    复制代码
    npm install webpack -g
    npm install --global webpack-cli
  2. 之后之后再输入以下命令进行安装vue相关文件。

    复制代码
    npm install vue -g   //安装vue.js
    npm install vue-router -g   //安装vue-router
    npm install vue-cli -g   //安装vue脚手架
  3. 输入vue -V查看vue安装版本,如果成功显示版本号说明安装vue成功

  4. 安装以上之后,配置vue的环境变量,找到vue.cmd的目录所在(如果忘记了安装在哪里,可以全盘搜索),复制路径,在系统变量的path中新增环境变量

相关推荐
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷7 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript