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中新增环境变量

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端