安装node.js以及搭建vue项目过程中遇到的问题详解

目录
  • 一、node.js安装
  • 二、如何找node.js历史版本
    • 1.点击DOWNLOADS
    • 2.点击页面下方
    • 3.翻页找到历史版本
  • 三、检查是否安装成功？
  • 四、安装成功后需要配置环境变量：
  • 五、环境搭建
  • 六、项目创建
  • 总结

一、node.js安装

进入官网 https://nodejs.org/en/download/

直接点击下载安装！安装过程直接下一步就行；

二、如何找node.js历史版本

(https://nodejs.org/en/download/)

1.点击DOWNLOADS

2.点击页面下方

3.翻页找到历史版本

找到合适的版本点击下载：

下载后缀为 .msi 的文件进行安装；

三、检查是否安装成功？

1.打开命令窗口（win+R 输入cmd）

2.输入 node -v 然后回车显示版本号即安装成功；

四、安装成功后需要配置环境变量：

以下内容参考文章:https://www.jb51.net/article/251052.htm

1.在安装目录下新建两个空的文件夹在我安装的文件夹 node_global 及 node_cache

2.创建完两个空文件夹之后，打开cmd命令窗口，输入（填写自己的安装路径）

npm config set prefix "F:\Software\nodejs\node_global"
npm config set cache "F:\Software\nodejs\node_cache"

3.设置环境变量，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”：

① 在【系统变量】下新建【NODE_PATH】，输【F:\Software\nodejs\node_modules】；

② 将【用户变量】下的【Path】中原来npm路径修改为【F:\Software\nodejs\node_global】

4.测试环境变量配置是否成功

cmd输入cnpm -v

五、环境搭建

（1）安装淘宝镜像

cmd输入 npm install -g cnpm --registry=https://registry.npm.taobao.org

报错：

解决办法：降低版本 cmd输入 npm install npm@4.6.1 -g

（2）安装vue-cli 脚手架 在cmd命令窗口中：输入 cnpm install vue-cli -g

测试是否安装成功

直接输入vue -V 回车，若显示vue版本即安装成功

（3）全局安装webpack-cli

输入命令：npm install -g webpack

六、项目创建

1.创建一个存放项目的文件夹，在vscode中打开这个文件夹：

菜单栏–【文件】–【打开文件夹】，然后点击【终端】—【新建终端】；

2.进入该目录下的终端 输入 vue init webpack demo

出现project name 时需要手动回车往下走

此处报错：

npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:
npm ERR! F:\Software\nodejs\node_cache_logs\2022-03-14T08_24_28_433Z-debug.log

解决办法：npm版本过旧

windows下cmd安装指令：cnpm install -g npm

重新在项目终端输入，此处需切换到创建的项目目录下运行 npm run dev

报错：

解决办法：

在终端输入 npm i webpack-dev-server -D 运行

最后重新运行 npm run dev

出现nodejs访问请求，允许即可在浏览器打开页面；也可手动复制地址在浏览器打开；

总结

到此这篇关于安装node.js以及搭建vue项目过程中遇到的问题详解的文章就介绍到这了,更多相关安装node.js及搭建vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    目录 1.使用vue-cli脚手架搭建vue项目 2.使用koa搭建node后端 3.Vue项目中添加后端请求 参考资料: 前言:本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,仅作自己从头到尾搭建项目的记录 1.使用vue-cli脚手架搭建vue项目 1.在桌面运行 cmd,使用命令vue create demo创建一个vue项目demo,插件依赖等使用默认配置2.项目创建成功之后,使用命令 cd demo,进入 demo 文件夹,然后使用命令 npm run se

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • 安装node.js以及搭建vue项目过程中遇到的问题详解

    目录 一.node.js安装 二.如何找node.js历史版本 1.点击DOWNLOADS 2.点击页面下方 3.翻页找到历史版本 三.检查是否安装成功? 四.安装成功后需要配置环境变量: 五.环境搭建 六.项目创建 总结 一.node.js安装 进入官网 https://nodejs.org/en/download/ 直接点击下载安装!安装过程直接下一步就行: 二.如何找node.js历史版本 (https://nodejs.org/en/download/) 1.点击DOWNLOADS 2.

  • 解决新建一个vue项目过程中遇到的问题

    我就废话不多说了,大家还是直接看代码吧~ /usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev --scripts-prepend-node-path=auto > mytodolists@1.0.0 dev /Users/chenqiurui/WebstormProjects/myVue > webpack-dev-server --inline --progress --config build

  • Vue项目全局配置微信分享思路详解

    这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库 全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在

  • vue学习笔记五：在vue项目里面使用引入公共方法详解

    今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台

  • Node.js基础入门之回调函数及异步与同步详解

    Node.js基础入门之回调函数及异步与同步详解

    目录 回调函数 1. 什么是回调函数? 2. 回调函数实现机制 3. 回调函数用途 4. 回调函数示例 异步与同步 1. 什么是异步与同步? 2. 同步示例 3. 异步示例一 4. 异步示例二 异步的实现 1. 回调函数的同步示例 2. 异步事件示例 3. 异步示例截图 Promise基础 1. 什么是Promise ? 2. Promise特点 3. 异步的缺点 4. Promise保证异步顺序 经过前面两天的学习,已经对Node.js有了一个初步的认识,今天继续学习其他内容,并加以整理分享,

  • 使用 Node.js 实现图片的动态裁切及算法实例代码详解

    背景&概览 目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片. 一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用.所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片. URL 的设计 图片 URL 需要包含图片 id.尺寸.质量等信息.有两种

  • Node.js实战之Buffer和Stream模块系统深入剖析详解

    Node.js实战之Buffer和Stream模块系统深入剖析详解

    目录 正文 写入缓冲区 从流中读取数据 管道流 链式流 模块系统 正文 JavaScript语言本身只有字符串数据类型,没有二进制数据类型. 但是,在处理TCP流或文件流时必须使用二进制数据. 因此,在node JS中,定义了一个缓冲区类来创建用于存储二进制数据的缓冲区. const buf = Buffer.from('runoob', 'ascii'); 在node JS中,缓冲区类是与node内核一起发布的核心库. 缓冲库是node JS带来的一种存储原始数据的方法,它允许节点JS. co

  • 在Vue mounted方法中使用data变量详解

    如下所示: data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用this对data中变量进行调用 vue生命周期参照官方:点击进入 vue渲染页面的时候,可能会对某些数据进行字典操作,比方性别,数据中是0和1,字典值是男和女,这个时候就需要在mounted进行"性别"字典的获取,然后

  • Node.js事件循环（Event Loop）和线程池详解

    Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程 理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互,所以使用基于事件

  • Node.JS获取GET,POST数据之queryString模块使用方法详解

    无论是前端还是后端,经常出现的应用场景是URL中参数的处理.nodeJS的queryString模块提供了一些处理 query strings 的工具.本文将详细介绍nodeJS中的queryString var querystring = require('querystring'); /* { unescapeBuffer: [Function], unescape: [Function: qsUnescape], escape: [Function], encode: [Function]

随机推荐