(1)Windows安装Node.js

登录node官网(https://nodejs.org/en/)可以看到各种平台node版本下载。
在这里插入图片描述
①如何查看计算机系统类型?
在这里插入图片描述
②选择对应的安装包点击下载
③双击下载好的安装包
在这里插入图片描述
④点击以上的Run(运行),将出现如下界面
在这里插入图片描述
⑤勾选接受协议选项,点击 next(下一步) 按钮 :
在这里插入图片描述
⑥Node.js默认安装目录为 “C:\Program Files\nodejs” , 你也可以修改目录,不推荐放到C盘,例如本次安装到D盘nodejs文件夹下,点击 next(下一步):
在这里插入图片描述
⑦点击树形图标来查看模式 默认安装以下四项, 然后点击下一步 next(下一步)
在这里插入图片描述
⑧点击Install(安装)开始安装Node.js。也可以点击 Back返回来修改先前的配置。然后点击 next(下一步):
在这里插入图片描述
⑨点击 Finish(完成)按钮退出安装向导

⑩查看版本
进入node文件夹,查看node及npm版本
1、检测node版本
CMD=>输入指令node --version或者node -v
在这里插入图片描述
2、检测npm版本
CMD=>输入指令npm --version或者npm -v
显示npm版本说明node.js自带的npm已经安装成功。Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西
3、检测环境变量
检测path环境变量是否配置了Node.js,打开cmd => 输入命令"path",输出如下结果:
在这里插入图片描述

(2)配置环境

安装完成后的目录如下所示
在这里插入图片描述
这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到当前跟盘路径中,容易造成混乱(比如nodejs放到了D盘,当前在E盘操作则会下载到E盘,下次在C盘操作又会下载到C盘,容易造成混淆)。
例如:我希望将全模块所在路径和缓存路径放在node.js安装的文件夹中,则在安装的文件夹【D:\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图:
(1)创建文件夹
在这里插入图片描述
1、node_global为npm安装的全局模块所在的路径
2、node_cache缓存cache的路径
(2)cmd添加配置
创建完两个空文件夹之后,打开cmd命令窗口,输入
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
在这里插入图片描述
(3)设置环境变量
关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
在这里插入图片描述
①系统变量:进入环境变量对话框,在系统变量下新建NODE_PATH,输入D:\nodejs\node_global\node_modules
②用户变量:将用户变量下的Path修改为D:\nodejs\node_global
在这里插入图片描述
(4)测试
配置完后,安装个module模块测试下,安装个最常用的express模块,打开cmd窗口
使用npm安装个模块测试下,npm 安装 Node.js 模块语法格式如下:
npm install
接下来使用npm命令安装常用的 Node.js 的web框架模块 express,输入如下命令进行模块的全局安装:
npm install express -g # -g是全局安装的意思global
在这里插入图片描述
特别说明:如果安装时不加-g参数,则模块就会安装到当前路径下。拿上面的express模块举例,如果不加参数-g,则会将express模块下载到当前目录下的node_modules文件夹里,即使文件夹不存在也会自动生成。
在这里插入图片描述
在这里插入图片描述

(3)配置淘宝NPM镜像—淘宝镜像cnpm

由于npm服务器在国外,所以每次下载速度都会受到限制,且由于防火墙拦截,可能经常性丢失下载文件,出现各种报错。所以这里推荐使用国内淘宝NPM镜像
淘宝 NPM 镜像是一个完整镜像,同步频率目前为 10分钟一次以保证尽量与官方服务同步。
1、在安装时可以手动指定从哪个镜像服务器获取资源,可以使用阿里巴巴在国内的镜像服务器,命令如下:
npm install cnpm -g --registry=https://registry.npm.taobao.org
在这里插入图片描述
测试输入cnpm -v或者cnpm --version检测版本及是否安装成功

(4)全局安装vue-cli脚手架

前提条件: Node.js (>=4.x, 6.x preferred), npm>version 3(必须安装Node.js)
全局安装:
cnpm install -g vue-cli
脚手架:vue-cli是vue的脚手架工具,可以自动生成目录。
在这里插入图片描述
在这里插入图片描述

(4)vue-工程化

①与node环境同级下创建工程
vue init webpack vue6.12
在这里插入图片描述
webpack为引用的模板名称,vue6.12为项目名称
1.设置项目相关配置
在这里插入图片描述
2.设置项目相关配置,设置完毕后点击回车,开始下载
在这里插入图片描述
3.下载完毕后会出现以下提示
在这里插入图片描述
4.此时,D盘下的项目工程便已经创建完毕
在这里插入图片描述
5.运行项目
项目初始化完毕,执行npm run dev或cnpm run dev命令运行项目
在这里插入图片描述
接下来便可以在http://localhost:8080查看项目(可以手动配置端口,限制不能大于65535)
②目前为止,还少了个目录,就是dist打包输出的文件目录。这个目录其实是动态生成的,输入命令:在这里插入图片描述
在这里插入图片描述

常遇问题

vue项目端口号被占用
8080端口被占用,无法访问http://localhost:8080网址
解决方案:
打开项目,找到config中的index.js文件,打开并找到dev中的port:8080端口修改为4040或其他(随便写,只要这个端口号不被占用就行)
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐