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

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰6 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询