前端配置环境和可能出现的问题

一、node

1.node官网（稳定版）：Node.js (nodejs.org)下载安装， 运行检查：node -v npm -v 命令

2.在node.js安装目录下（与node_modules同级）新建两个文件夹 node_global 和 node_cache

3.在命令行窗口下执行如下两个命令(注意路径，当前安装在c盘)：

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

4.控制面板\系统和安全\系统 ：高级系统设置 --环境变量 ->

系统变量中新建一个变量名为 “NODE_PATH”，值为“C:\ProgramFiles\nodejs\node_modules”，

编辑用户变量里的Path，将相应npm的路径改为：C:\Program Files\nodejs\node_global

环境变量：包含系统变量和用户变量，他首先是一个变量，它的值是一个路径，它的作用是简化终端内打开应用程序的操作。因为在终端内输入一串字符它会在当前目录查找该应用，若是没有找到它会到环境变量中查找，若还没有找到则报错，如若找到则打开应用。

5.提高npm下载速度:
cnpm替换npm:npm install -g cnpm --registry=https://registry.npm.taobao.org
或直接使用:npm install --registry=https://registry.npm.taobao.org

6.测试：cnpm安装vue脚手架：cnpm install -g @vue/cli

7.再检查是否安装cnpm

npm list --depth=0 -global

8.如果显示 ：执行npm install express

无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确 ，然后再试一次。执行下列代码

或者：no such file or directory, open 'C:\Program Files\nodejs\node_global\node_modules\cnpm\package.json

9.再检查是否安装cnpm

npm list --depth=0 -global

Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_global"

可以在记事本中写npmrc

prefix=D:\nodejs\node_global

cache=D:\nodejs\node_cache

二、npm

npm i -g npm

三、yarn

1、npm install -g yarn

2、yarn --version（显示版本号则安装成功）

3、如果有无法加载情况，参考文档

https://blog.youkuaiyun.com/qq_30376375/article/details/116139870

四、vue

1、npm install vue

2、创建新的vue环境包_Nikki_u的博客-优快云博客

3、如果出现报错

无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确， 然后再试一次 必

解决技巧：没有安装vue/cli

npm install vue-cli -g/yarn global add @vue/cli 

4、当创建vue项目时出现一下提示

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.

You may want to run the following to upgrade to Vue CLI 3: 

依次运行以下代码

npm uninstall -g vue-cli

npm install -g @vue/cli

五、webpack

安装步骤

Webpack安装教程_醋黄瓜的博客-优快云博客_webpack

参考文档

前端基础开发环境安装与配置 - 居老师的狗子 - 博客园

我的csdn

使用yarn进行webpack配置及简单使用_Nikki_u的博客-优快云博客_yarn 安装webpack

六、node-sass问题

1、node版本切换到14.17.3版本

2、node-sass切换到淘宝源npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

3、使用npm i或者yarn命令进行装包

4、开始运行即可

参考文档链接