相关推荐recommended
Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量)
作者:mmseoamin日期:2023-12-25

本教程所使用的系统为Windows10 LTSC 64位;Node.js版本为18.17.1。 

注:截止到2023年09月15日Node.js-18.17.1为长期维护版的最新版本


目录

1 下载Node.js

2 安装Node.js

3 配置Node.js以及环境变量

4 安装Vue

5 创建Vue项目


1 下载Node.js

在Node.js官网下载最新版本的Node.js长期维护版。(根据系统实际情况选择32位或64位,这里选择的是64位的)

官网下载页链接:Node.js官网下载页

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第1张


2 安装Node.js

2.1 安装包下载完成后,选中单击鼠标右键点击 “安装” ,进入安装页面。如下图所示

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第2张

安装页面:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第3张

2.2  点击 “Next” 并 勾选 “I accept the terms in License Agreement”,然后继续点击 “Next” 至 “Tools for Native Modules”页面,如下图所示。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第4张

注: 安装路径使用默认路径,不要随意修改。不然后续在配置环境变量时可能会出现问题。

2.3  取消 “Automatically install the necessary tools.” 前面的勾,如下图所示,若没有勾选则直接点击“Next”即可。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第5张

2.4 点击 “Install”,并等待其安装完成。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第6张

2.5 完成后,点击 “Finish” 退出安装页面即可 。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第7张


2.6 检查node.js是否安装成功。分别依次输入如下命令

node -v
npm -v

 执行完成后,出现如下图所示,说明安装成功。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第8张


3 配置Node.js以及环境变量

3.1 找到并进入Node.js的安装目录,在Node.js的安装目录下新建node_global和node_cache两个空文件夹,如下图所示。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第9张

注:Node.js默认安装路径:C:\Program Files\nodejs

在新建的node_global文件夹内,新建node_modules文件夹,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第10张

3.2 修改并配置环境变量

※※※ 警告:在修改或添加环境变量如出现配错需要删除变量时,请不要删除原有的任何变量,否则会出现系统程序或软件无法被调用,甚至出现系统故障导致系统损坏! ※※※

3.2.1 选择 ”此电脑“右键,点击“属性”,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第11张

3.2.2 在打开的页面向下划,找到并点击 “高级系统设置”。进入“系统属性”页面,然后依次点击 “高级” ,“环境变量”。如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第12张

3.2.3 在打开的环境变量窗口中,新建系统变量,如下图所示:

变量名:NODE_PATH

变量值:C:\Program Files\nodejs\node_global\node_modules

变量值是之前新创建在node.js安装目录中node_global文件夹内的node_modules文件夹的位置(绝对路径)。

然后点击确定。

注:变量值建议使用“浏览目录”选项进行选择添加,防止出现路径错误。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第13张

3.2.4 选择系统变量中的 “Path” 并点击 ”编辑“,进入编辑环境变量窗口。点击 ”新建“,添加如下内容:

%NODE_PATH%

注:百分号一定是英文的,不可使用中文的

然后点击 ”确定“。

如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第14张

3.2.5 在用户变量中选择 “Path” 并点击 ”编辑“,进入编辑环境变量窗口。选中“C:\Users\Administrator\AppData\Roaming\npm” 然后点击编辑,将其修改为自己新建的node_global文件夹,完成后点击 “确定”。 

注:上文中的 “Administrator” 是此次教程电脑所使用的用户名,各电脑的用户名不一样。第1张图的变量是没有改之前的,注意分别。

如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第15张

修改完成后的,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第16张

3.2.6 到此环境变量修改完成,依次点击 “确定” 关闭环境变量窗口和系统属性窗口。

3.3 以管理员身份运行命令提示符或PowerShell。

注:一定要以管理员身份运行,不然部分命令可能无效。

3.3.1 方法一:在开始菜单 ”Windows系统“ 下找到命令提示符,右键选择更多并点击“以管理员身份运行”,如下图所示。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第17张

3.3.2 方法二:使用键盘的 Win键+X 点击”Windows PowerShell (管理员)“ 。有的这里是“命令提示符 (管理员)”,若是命令提示符则不需要继续操作此步骤。

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第18张

打开后,输入如下命令,切换成命令提示符模式。

cmd

如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第19张

3.4 配置npm本地仓库目录

在命令提示符窗口中分别依次输入如下命令:

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

执行成功后如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第20张

注:这里的引号、冒号和反斜线均为英文标点,不可使用中文标点,不然会报错。

检验仓库目录是否已经被修改,输入如下命令:

npm list -global

 出现如下图命令返回信息,说明仓库目录修改成功Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第21张

3.5 配置镜像站

# 官方镜像站
http://registry.npmjs.org
#淘宝镜像站(两个选一个即可)
http://registry.npm.taobao.org
https://registry.npm.taobao.org

注:如果有梯子可以使用官方镜像站;如果没有就使用国内的淘宝镜像站即可。

这里使用国内的淘宝镜像站进行此次配置。配置命令如下:

npm config set registry=http://registry.npm.taobao.org

执行成功后如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第22张

注:这里的冒号和斜线均为英文标点,不可使用中文标点,不然会报错。

3.6 检查配置

输入如下命令:

npm config list

执行成功后如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第23张

注:配置完成后需要重启命令提示符窗口,不然变量不生效。


4 安装Vue

需要按下面的步骤安装,顺序不可颠倒

注:1.“-g” 这个参数必须要加,这表示全局安装,会安装到global全局目录中,如果不加 “-g” 这个参数,那这个组件会被安装到当前目录下的node_modules文件夹内,若没有则会自动创建node_modules文件夹。

2.每执行一条命令后,确认该组件已经成功安装后再安装下一个。

4.1 vue组件

命令如下:

npm install vue -g

安装成功,返回信息如下图所示,同其自动将npm更新至最新版本:Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第24张

4.2 webpack组件

命令如下:

npm install webpack -g

安装成功,返回信息如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第25张

4.3 webpack-cli组件

命令如下:

npm install webpack-cli -g

安装成功,返回信息如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第26张

在这里需要检查webpack和webpack-cli组件是否成功安装,输入如下命令:

webpack -v

出现如下图显示表示安装成功:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第27张

4.4 @vue/cli组件

命令如下:

npm install @vue/cli -g

安装成功,返回信息如下图所示:(内容较长,仅截取部分内容)

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第28张Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第29张

 在这里需要检查vue和@vue/cli组件是否成功安装,输入如下命令:

vue -V
# 注:参数为大写的字母V

或者也可输入如下命令:

vue --version

出现如下图显示表示安装成功:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第30张

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第31张

4.5 vue-router组件

命令如下:

npm install vue-router -g

安装成功,返回信息如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第32张


到此Node.js的安装配置、环境变量的配置以及Vue环境的搭建全部完成。下面是Vue3项目的创建,本此使用默认自动配置。


5 创建Vue项目

5.1 找一个位置新建一个文件夹,作为所有Vue项目的根文件夹

注:文件夹的名字尽量是英语的,这样可防止后续出现某个组件不识别中文目录的情况。如需要使用分隔单词可以使用英文中的下划线,即“_”。

这里我创建文件夹的位置为:”C:\Users\Administrator\Documents\ “下,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第33张

5.2 进入刚创建的文件夹,在空白位置按住键盘中的"shift"键单击鼠标右键,点击“在此处打开PowerShell窗口”,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第34张

5.3 在PowerShell中输入如下命令,切换成命令提示符窗口:

cmd

执行成功如下图显示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第35张

5.4 输入如下命令创建Vue项目:

vue create vuedemo

注:这里的“vuedemo” 是项目名称,可随意更换,不必与此一样。此外,项目名称需小写,不可以大写,否则会报错。

当看到如下页面则说明成功进入vue项目创建选项列表:Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第36张

5.5 选择 "Default ([Vue_3 babel, eslint])" ,按下Enter键。此时项目开始创建,如下图所示:(因电脑和网络环境有所差异,所需时间可能长短不一,请耐心等待)

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第37张

注:项目在创建过程中需保证网络连接正常,不能断网,否则创建会因网络异常而中断。(创建时需要从网上下载所需文件以及配置)

创建成功如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第38张

5.6 进入项目目录,并输入启动命令即可

cd vuedemo
npm run serve

注:这里的“vuedemo” 是项目名称。

如在首次运行时弹出Windows安全中心警报(即windows Defender 防火墙网络拦截警报),务必将专用网络和公用网络全部勾上,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第39张

成功运行,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第40张

下图为chrome浏览器(即谷歌浏览器) 显示页面:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第41张

到此,Vue项目的创建就已全部完成。

如需终止,使用键盘上的 Ctrl键+C ,此时会出现提示询问是否要终止。如果需要,按"Y",再按Enter键;不需要,按"N",再按Enter键。这里选择终止,如下图所示:

Node.js脚手架安装配置、Vue环境搭建以及创建Vue项目 (包括配置环境变量),第42张


声明:本教程仅供学习研究使用,严禁以任何方式进行售卖或变相售卖此教程,一经发现查实将追究其法律责任。