从nodejs安装到第一个vuecli程序

1、下载安装node.js

图片展示的版本为16.13.2，我选择的版本是12.16.1

http://nodejs.cn/download/

在这里插入图片描述

直接打开下载好的安装包，除了修改自己的安装路径，其他的都默认下一步

修改自定义安装目录，下图所示

在这里插入图片描述
最后一步，可以不勾选。

安装完成

环境变量已经自动配置好了不用管它

确定安装成功（cmd最好使用管理员模式）

#查看node和npm的版本号
node -v 
npm -v

在这里插入图片描述

2、安装淘宝镜像（cnpm）

使用镜像会下载快一些

# -g 全局安装
npm install cnpm -g

在这里插入图片描述

然后出现三个警告第一个关于uuid版本问题的，搜索网上给出的回答是这样的，所以忽略这个问题

在这里插入图片描述

cnpm就安装的位置在 C:\Users\Administrator\AppData\Roaming\npm\node_modules下

**注意：**AppData目录是一个隐藏目录，展示隐藏项目

在这里插入图片描述

3、安装vue-cli

#安装vue-cli -g表示全局
cnpm install vue-cli -g

在这里插入图片描述

查看下载后的vue-cli文件，在C:\Users\Administrator\AppData\Roaming\npm\node_modules目录下

在这里插入图片描述

查看可以基于哪些模板创建vue应用程序(通常选择webpack)

vue list

在这里插入图片描述

此时vue-cli已经创建完毕

4、创建一个vue-cli程序

这里我将vue-cli创建到G盘下的vue_cli_dome文件中（位置自定义）
在这里插入图片描述

在cmd中进入当前文件下

#进入G盘
G:
#进入vue_cli_dome文件目录下
cd vue_cli_dome
#创建一个vue项目，项目名称是 myvue
vue init webpack myvue

在这里插入图片描述

下列操作中，回车表示默认配置

在这里插入图片描述

回车之后，变成这样，接着输入n

在这里插入图片描述

一路输入n，到达这一步
在这里插入图片描述
回车，完成

在这里插入图片描述

对应位置出现 myvue文件

在这里插入图片描述

5、初始化myvue并运行

1、初始化myvue

在cmd中进入myvue中

cd myvue

安装项目依赖环境

npm install

小插曲 ↓ ：

我的出现了下列的问题（如果没有出现下列情况直接跳过插曲部分）

关于下面情况的解释： Npm 安装包出现一大堆 WARN？？？

在这里插入图片描述

然后出现提示运行 npm audit fix 修复

使用npm audit fix修复后

在这里插入图片描述
我选择忽略这个，不管它。

小插曲结束 ↑

最后下载好的环境都在myvue下的node_modules下

在这里插入图片描述

2、运行myvue

两种方式运行

第一种、cmd命令

打开cmd，执行下列命令

npm run dev

运行成功，如下图所示 ↓

在这里插入图片描述

浏览器访问 http://localhost:8080，成功运行如下图

在这里插入图片描述

如何关闭该项目

在cmd中 Ctrl+C 出现如下图，键入 Y 回车即可结束运行

在这里插入图片描述

第二种、使用idea启动myvue

打开idea->“open”->“myvue”

在这里插入图片描述

右上角点击 Add Configuration…
在这里插入图片描述

点击左上角 + 号，点击 npm
在这里插入图片描述

输入 dev ，点击 OK 即可

在这里插入图片描述

控制台信息显示如下，直接访问 http://localhost:8080 即可

在这里插入图片描述

原文链接：https://blog.csdn.net/qq_44780229/article/details/122552960