node.js 安装配置及Vue项目创建

1.node下载

下载官网：Previous Releases | Node.js (nodejs.org)

2.node安装

安装目录更改：D:\Program Files\nodejs\

其余的直接 Next即可

2.1 查看是否安装成功

node -v  

npm -v

注意：node自带npm,npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

3.环境变量配置

为什么node要配置环境变量？

比如在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

在安装目录下新建文件夹

在安装目录下新建node_global、node_cache两个文件夹

在新建的node_global中新建node_modules文件夹

打开cmd执行以下语句

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


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

查看npm的本地仓库

npm list -global

对应的就是我们刚刚配置的全局安装目录，可以看到里面什么也没有

开始环境变量配置

系统变量：NODE_PATH

变量值：D:\Program Files\nodejs\node_global\node_modules(根据自己的目录配置)

用户变量

将用户变量中的 C:\Users\admin\AppData\Roaming\npm 修改为

D:\Program Files\nodejs\node_global

到这里环境配置就完成了。

4.安装Vue

cmd 配置npm淘宝镜像源

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

全局安装Vue

npm install vue -g

安装vue-cil脚手架

npm install –g @vue/cli

查看vue版本是否安装成功

vue -V

提示版本号证明安装成功。

5.创建Vue项目

这里使用vue3 提供的 UI界面 进行创建，可视化的界面我觉得比之前cmd界面创建更清晰

进入cmd,执行:

vue ui

会自动跳转浏览器

新建项目

这里直接选手动配置就好，前面的两个是我之前创建项目时预设的

通常选择这三个

版本根据自己需求选择2.X还是3.X，我这边选择2.X ，然后点击创建项目

可以保存预设下次就不需要手动配置了

点击创建之后就可以看到cmd窗口开始创建项目

创建完成，可以在里面添加插件和配置信息

配置完成后关闭窗口，一个简单的vue项目就算创建完成了。

6.运行vue项目

进入项目目录

打开cmd命令窗口

进入项目目录：

执行命令

npm run serve

正在启动项目：

启动完成：

浏览器访问链接，如下表示运行成功