NODEJS安装和vue安装及运行方法以及出现Cannot find module ‘node-sass‘ Require stack问题解决方法，以及npm和cnpm区别，以及使用cnpm安装教程

电玩女神 2023-09-30 23:06 15阅读 0赞

## 安装nodejs ##

官网下载：

https://registry.npmmirror.com/binary.html?path=node/

选择要下载的版本  
一般建议下载msi  
![在这里插入图片描述][3fccf6f41b3a4ac48028b24174e19bae.png]  
选择自己的安装位置一直下一步即可完成

### 检查一下是否安装成功 ###

打开cmd，输入如下指令

node -v

npm -v

![在这里插入图片描述][38897f7a2b6142398efbd8c6b38f2f7b.png]  
输出了版本号就说明安装成功了

![在这里插入图片描述][e37b581b7fe0441aa04d5b1128b66bca.png]

### 创建全局安装目录和缓存日志目录 ###

在我们的安装目录下，创建名为node\_cache和node\_global的两个文件夹。  
![在这里插入图片描述][879cfe31c5e6428789cf0f926f5abb3a.png]  
打开Dos窗口，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix "你的安装目录\node_global"
    
    npm config set cache "你的安装目录\node_cache"

![在这里插入图片描述][57f17cfa099f47d6aa5dc0cb4b0a0bca.png]  
为了以后下载包快速，修改源为淘宝镜像。（这里修改了，我们就不需要安装cnpm了，因为cnpm就是Node.js淘宝镜像加速器，这里配置了就不需要安装了）

npm config set registry https://registry.npm.taobao.org

查看npm配置修改是否成功

npm config list

![在这里插入图片描述][54514b75182b422d9c20f66502b8a184.png]  
详解  
![在这里插入图片描述][7cb6f7be3b0f4b5dbeb5ec2c901a9ffe.png]  
![在这里插入图片描述][95af33abb38a417dbe032cf63192c1e1.png]  
**检查一下镜像站行不行命令**

npm config get registry

同时我们会发现多了个文件：C:\\Users\\用户名\\下的.npmrc文件，可以理解为一个记录当前用户修改信息的配置文件。如果你把这个文件删了，那你刚刚修改的那些参数全没有了，回归默认配置。  
修改里面的内容（没有则添加）为刚才配置的两个文件夹  
![在这里插入图片描述][b100cb11a9f6441db4b8ffe964d99280.png]

### 编辑环境变量 ###

系统环境变量中配置这两个  
![在这里插入图片描述][8435bc98932248658f207f153b27c23e.png]

系统环境变量path中配置这些内容  
![在这里插入图片描述][3d05be9ce3494686a85a9a8a2ebbcf27.png]

环境变量path中配置  
![在这里插入图片描述][2993b840ec2b46309cf5b392a55c5b7e.png]

## 安装VUE ##

Win + s 搜索 “命令提示符”，右键以管理员身份运行。  
![在这里插入图片描述][469e1dc969c44f88bdea51cf4f9323be.png]  
运行命令安装

npm install vue -g

![在这里插入图片描述][ad93798a64bc4b1791858f43f4079648.png]  
![在这里插入图片描述][0a8c1324a0f44e38935a1b8e9497f5b1.png]  
查看是否安装成功

vue -V

![在这里插入图片描述][a0740e72fa1c4bdfb0ac78b964ac2efe.png]  
有时得在执行完npm install vue-cli -g 安装后，执行vue -V才有用，不然会出现vue不是内部或外部

### 安装vue-router ###

命令：

npm install vue-router -g

![在这里插入图片描述][e4928ebc30884a38b94d0368f3a3da4c.png]  
![在这里插入图片描述][763afcc62fed488882f91252dcfa492e.png]

### 安装vue脚手架 ###

npm install vue-cli -g

![在这里插入图片描述][83eea58cc01c4954bf27c3555b6fdd8c.png]

输入vue --version，能输出版本号就说明安装好了。

### 安装webpack模板 ###

npm install webpack -g

![在这里插入图片描述][c8e44d9fb9f542708785dfa2e7059a52.png]  
此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

npm install webpack-cli -g

![在这里插入图片描述][c708b638d3e44293a7a7f80e081d4db5.png]  
输入 webpack -v，能输出版本号就说明都安装好了

## 运行VUE项目 ##

打开cmd进入项目文件  
如果项目中有node\_modules和package-lock.json文件则  
删除“node\_modules”文件夹和“package-lock.json”  
![在这里插入图片描述][1b11c1ad40db4703883b65a14a98d650.png]

**清除npm缓存**  
npm有缓存时，常常出现安装依赖不成功的现象，且一旦出现这个问题，报错信息很完善，但根据报错信息一项一项去解决，却死活解决不了，还找不出原因。控制台输入下面命令清除npm缓存，npm有缓存时，常常出现安装依赖不成功的现象

npm cache clean -force

重新安装依赖

npm install

![在这里插入图片描述][377083661f124c85bac41fbd7ee85001.png]

运行项目

npm run serve

![在这里插入图片描述][b5185fad6f264b2db21aa1269637a207.png]  
成功：  
![在这里插入图片描述][9a6bfd49298641e482cacd33c966c789.png]

安装vue和环境以及运行vue

### 运行VUE出现Cannot find module ‘node-sass’ Require stack问题解决方法 ###

Syntax Error: Error: Cannot find module 'node-sass' Require stack: - G:\ceshi\ceshi\node_modules\sass-loader\dist\index.js - G:\ceshi\ceshi\node_modules\sass-loader\dist\cjs.js - G:\ceshi\ceshi\node_modules\loader-runner\lib\loadLoader.js - G:\ceshi\ceshi
    
    解决方法：
    npm install --save-dev node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
    
    或输入命令 npm install node-sass 或 cnpm install node-sass@latest 直接进行安装即可

参考文档：

https://blog.csdn.net/m0_57545353/article/details/124366678
    https://blog.csdn.net/weixin_44209743/article/details/128899429
    https://blog.csdn.net/weixin_43453621/article/details/126585793
    https://blog.csdn.net/dream_summer/article/details/108867317
    https://ymjin.blog.csdn.net/article/details/121788104

## 安装vue也可以通过cnpm来进行 ##

### npm 和 cnpm 的区别 ###

（1） 两者之间只是 node 中包管理器的不同。  
（2） npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。  
（3）如果因为网络原因无法使用npm下载，那cnpm这个就派上用场了。

一定切记切记，npm和cnpm只是下载的地址不同，npm是从国外下载东西，cnpm是从国内下载东西。

全部执行命令

# 安装 cnpm
    npm install -g cnpm -registry=https://registry.npm.taobao.org
    
    # 验证是否安装成功
    cnpm config get registry
    
    # 安装 vue.js
    cnpm install vue -g
    
    # 验证安装是否成功
    cnpm info vue 
    npm info vue
    
    #安装 webpack 模块
    cnpm install webpack -g
    
    # 安装 webpack-cli
    cnpm install --global webpack-cli
    
    # 安装vue-cli 3.x
    cnpm install @vue/cli -g

### 安装yarn ###

**一、yarn的简介：**  
Yarn是facebook发布的一款取代npm的包管理工具。

**二、yarn的特点：**  
速度超快。  
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。  
超级安全。  
在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。  
超级可靠。  
使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

**安装**

# 执行安装
    npm install -g yarn 
    
    # 查看版本
    yarn --version
    
    # 安装node.js,下载yarn的安装程序:
    # 提供一个.msi文件，在运行时将引导您在Windows上安装Yarn
    # Yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可
    
    yarn config set registry https://registry.npm.taobao.org -g 
    
    yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

![在这里插入图片描述][88c5b449dc23479780f9891ab4a4d93c.png]

如果出现C:\WINDOWS\system32>yarn --version
    'yarn' 不是内部或外部命令，也不是可运行的程序
    或批处理文件。

`先检查是否文件夹下安装了yarn，如下图，如果同下，则说明安装完成，但找不到yarn.cmd，则添加环境变量，注意配完环境变量要重新开一个cmd才能识别到`  
![在这里插入图片描述][9ad6c9b557bc4a1ab9f895224e784a65.png]

![在这里插入图片描述][f706df0e3f5f4e27998050fd85514619.png]  
![在这里插入图片描述][67f1c7c5ddf3493f81937d924f58acd3.png]  
![在这里插入图片描述][e03f5375366e4020852b7f4c5570146a.png]

![在这里插入图片描述][72d0dc9171de4e93bdae85284be8dd65.png]

### 安装完成主要文件夹内容 ###

![在这里插入图片描述][ae12dd3baa4f48c3880ab715b9525959.png]

![在这里插入图片描述][bec41ad4c7ee422fb065070171be136e.png]

![在这里插入图片描述][ae7ef04751d547caab057871fb309ef8.png]  
![在这里插入图片描述][db7fce18e27c4b20a5820e914fdd881a.png]  
![在这里插入图片描述][860323c486e04853b28b7cdbf0472f2e.png]  
![在这里插入图片描述][377216ae5d85466196561f508d3312a4.png]![在这里插入图片描述][50229468513e48d1908248025785fb4f.png]  
![在这里插入图片描述][55a33cef29d14ab7906c7afd912a07c7.png]  
![在这里插入图片描述][7486e12e35ef466598f06f47502c57c7.png]

### 安装过程详细图片 ###

![在这里插入图片描述][0d10142f527d4337b1b29909453a415f.png]  
![在这里插入图片描述][f10da00cf8a24dee83e055f3973bdea5.png]

![在这里插入图片描述][8b652ea212e640de8695a7eed3ff9de2.png]  
![在这里插入图片描述][2b85b65c37bb4a47859151ede8d201e8.png]  
![在这里插入图片描述][4ab5459f28f64eb0b9b454e0a8cb48d7.png]  
![在这里插入图片描述][f516ee25d57847968a37173da945b173.png]  
![在这里插入图片描述][a02f974e7ab940488325869dfaf0a67d.png]  
![在这里插入图片描述][80d454434bfe49949794194dd2a0ca5c.png]  
![在这里插入图片描述][5045b00bf0fc4c63a9db50ca0f5ac08b.png]  
![在这里插入图片描述][8f4cdd10d22b4adc811b9f116665b4f7.png]

![在这里插入图片描述][a05914bfd21d48e7bdea93af0a11c650.png]

[3fccf6f41b3a4ac48028b24174e19bae.png]: https://img-blog.csdnimg.cn/3fccf6f41b3a4ac48028b24174e19bae.png
[38897f7a2b6142398efbd8c6b38f2f7b.png]: https://img-blog.csdnimg.cn/38897f7a2b6142398efbd8c6b38f2f7b.png
[e37b581b7fe0441aa04d5b1128b66bca.png]: https://img-blog.csdnimg.cn/e37b581b7fe0441aa04d5b1128b66bca.png
[879cfe31c5e6428789cf0f926f5abb3a.png]: https://img-blog.csdnimg.cn/879cfe31c5e6428789cf0f926f5abb3a.png
[57f17cfa099f47d6aa5dc0cb4b0a0bca.png]: https://img-blog.csdnimg.cn/57f17cfa099f47d6aa5dc0cb4b0a0bca.png
[54514b75182b422d9c20f66502b8a184.png]: https://img-blog.csdnimg.cn/54514b75182b422d9c20f66502b8a184.png
[7cb6f7be3b0f4b5dbeb5ec2c901a9ffe.png]: https://img-blog.csdnimg.cn/7cb6f7be3b0f4b5dbeb5ec2c901a9ffe.png
[95af33abb38a417dbe032cf63192c1e1.png]: https://img-blog.csdnimg.cn/95af33abb38a417dbe032cf63192c1e1.png
[b100cb11a9f6441db4b8ffe964d99280.png]: https://img-blog.csdnimg.cn/b100cb11a9f6441db4b8ffe964d99280.png
[8435bc98932248658f207f153b27c23e.png]: https://img-blog.csdnimg.cn/8435bc98932248658f207f153b27c23e.png
[3d05be9ce3494686a85a9a8a2ebbcf27.png]: https://img-blog.csdnimg.cn/3d05be9ce3494686a85a9a8a2ebbcf27.png
[2993b840ec2b46309cf5b392a55c5b7e.png]: https://img-blog.csdnimg.cn/2993b840ec2b46309cf5b392a55c5b7e.png
[469e1dc969c44f88bdea51cf4f9323be.png]: https://img-blog.csdnimg.cn/469e1dc969c44f88bdea51cf4f9323be.png
[ad93798a64bc4b1791858f43f4079648.png]: https://img-blog.csdnimg.cn/ad93798a64bc4b1791858f43f4079648.png
[0a8c1324a0f44e38935a1b8e9497f5b1.png]: https://img-blog.csdnimg.cn/0a8c1324a0f44e38935a1b8e9497f5b1.png
[a0740e72fa1c4bdfb0ac78b964ac2efe.png]: https://img-blog.csdnimg.cn/a0740e72fa1c4bdfb0ac78b964ac2efe.png
[e4928ebc30884a38b94d0368f3a3da4c.png]: https://img-blog.csdnimg.cn/e4928ebc30884a38b94d0368f3a3da4c.png
[763afcc62fed488882f91252dcfa492e.png]: https://img-blog.csdnimg.cn/763afcc62fed488882f91252dcfa492e.png
[83eea58cc01c4954bf27c3555b6fdd8c.png]: https://img-blog.csdnimg.cn/83eea58cc01c4954bf27c3555b6fdd8c.png
[c8e44d9fb9f542708785dfa2e7059a52.png]: https://img-blog.csdnimg.cn/c8e44d9fb9f542708785dfa2e7059a52.png
[c708b638d3e44293a7a7f80e081d4db5.png]: https://img-blog.csdnimg.cn/c708b638d3e44293a7a7f80e081d4db5.png
[1b11c1ad40db4703883b65a14a98d650.png]: https://img-blog.csdnimg.cn/1b11c1ad40db4703883b65a14a98d650.png
[377083661f124c85bac41fbd7ee85001.png]: https://img-blog.csdnimg.cn/377083661f124c85bac41fbd7ee85001.png
[b5185fad6f264b2db21aa1269637a207.png]: https://img-blog.csdnimg.cn/b5185fad6f264b2db21aa1269637a207.png
[9a6bfd49298641e482cacd33c966c789.png]: https://img-blog.csdnimg.cn/9a6bfd49298641e482cacd33c966c789.png
[88c5b449dc23479780f9891ab4a4d93c.png]: https://img-blog.csdnimg.cn/88c5b449dc23479780f9891ab4a4d93c.png
[9ad6c9b557bc4a1ab9f895224e784a65.png]: https://img-blog.csdnimg.cn/9ad6c9b557bc4a1ab9f895224e784a65.png
[f706df0e3f5f4e27998050fd85514619.png]: https://img-blog.csdnimg.cn/f706df0e3f5f4e27998050fd85514619.png
[67f1c7c5ddf3493f81937d924f58acd3.png]: https://img-blog.csdnimg.cn/67f1c7c5ddf3493f81937d924f58acd3.png
[e03f5375366e4020852b7f4c5570146a.png]: https://img-blog.csdnimg.cn/e03f5375366e4020852b7f4c5570146a.png
[72d0dc9171de4e93bdae85284be8dd65.png]: https://img-blog.csdnimg.cn/72d0dc9171de4e93bdae85284be8dd65.png
[ae12dd3baa4f48c3880ab715b9525959.png]: https://img-blog.csdnimg.cn/ae12dd3baa4f48c3880ab715b9525959.png
[bec41ad4c7ee422fb065070171be136e.png]: https://img-blog.csdnimg.cn/bec41ad4c7ee422fb065070171be136e.png
[ae7ef04751d547caab057871fb309ef8.png]: https://img-blog.csdnimg.cn/ae7ef04751d547caab057871fb309ef8.png
[db7fce18e27c4b20a5820e914fdd881a.png]: https://img-blog.csdnimg.cn/db7fce18e27c4b20a5820e914fdd881a.png
[860323c486e04853b28b7cdbf0472f2e.png]: https://img-blog.csdnimg.cn/860323c486e04853b28b7cdbf0472f2e.png
[377216ae5d85466196561f508d3312a4.png]: https://img-blog.csdnimg.cn/377216ae5d85466196561f508d3312a4.png
[50229468513e48d1908248025785fb4f.png]: https://img-blog.csdnimg.cn/50229468513e48d1908248025785fb4f.png
[55a33cef29d14ab7906c7afd912a07c7.png]: https://img-blog.csdnimg.cn/55a33cef29d14ab7906c7afd912a07c7.png
[7486e12e35ef466598f06f47502c57c7.png]: https://img-blog.csdnimg.cn/7486e12e35ef466598f06f47502c57c7.png
[0d10142f527d4337b1b29909453a415f.png]: https://img-blog.csdnimg.cn/0d10142f527d4337b1b29909453a415f.png
[f10da00cf8a24dee83e055f3973bdea5.png]: https://img-blog.csdnimg.cn/f10da00cf8a24dee83e055f3973bdea5.png
[8b652ea212e640de8695a7eed3ff9de2.png]: https://img-blog.csdnimg.cn/8b652ea212e640de8695a7eed3ff9de2.png
[2b85b65c37bb4a47859151ede8d201e8.png]: https://img-blog.csdnimg.cn/2b85b65c37bb4a47859151ede8d201e8.png
[4ab5459f28f64eb0b9b454e0a8cb48d7.png]: https://img-blog.csdnimg.cn/4ab5459f28f64eb0b9b454e0a8cb48d7.png
[f516ee25d57847968a37173da945b173.png]: https://img-blog.csdnimg.cn/f516ee25d57847968a37173da945b173.png
[a02f974e7ab940488325869dfaf0a67d.png]: https://img-blog.csdnimg.cn/a02f974e7ab940488325869dfaf0a67d.png
[80d454434bfe49949794194dd2a0ca5c.png]: https://img-blog.csdnimg.cn/80d454434bfe49949794194dd2a0ca5c.png
[5045b00bf0fc4c63a9db50ca0f5ac08b.png]: https://img-blog.csdnimg.cn/5045b00bf0fc4c63a9db50ca0f5ac08b.png
[8f4cdd10d22b4adc811b9f116665b4f7.png]: https://img-blog.csdnimg.cn/8f4cdd10d22b4adc811b9f116665b4f7.png
[a05914bfd21d48e7bdea93af0a11c650.png]: https://img-blog.csdnimg.cn/a05914bfd21d48e7bdea93af0a11c650.png