Vue-CLI最新详细安装教程【附安装包】

发布于:2024-11-29 ⋅ 阅读:(32) ⋅ 点赞:(0)

目录

初识:‌Vue CLI

一、Node.js及配置环境

1.安装vue-cli前需要先行安装Node.js

2.解压下载的安装包

3.打开解压的【node-v22.11.0-x64】文件夹

4.双击启动安装程序

5.点击【Next】

6.勾选【I accept the terms in the License Agreement】,然后点击【Next】

7.点击【Next】

8.点击【Next】

9.点击【Next】

10.点击【Install】开始安装

11.等待安装完成

12.安装完成,点击【Finish】

13.桌面开始菜单搜索【cmd】,右键命令提示符【以管理员身份运行】

14.输入命令【node -v】,按下回车键(Enter)

15.输入命令【npm -v】,按下回车键(Enter)

16.配置npm仓储和缓存

17.在node.js的安装目录创建cache 和 global文件夹

18.命令提示符依次执行下面命令,依次输入并按下回车键(Enter)

19.输入命令【npm config ls】查看配置是否成功

20.找到桌面【此电脑】

21.右键点击【属性】

22.下滑找到并点击【高级系统设置】

23.点击【环境变量】

24.点击【系统变量(S)】下的【新建】

25.新建变量名和变量值

26.确认无误之后点击【确定】

27.下滑找到变量【Path】,点击【编辑】

28.点击【新建】

29.依次新建下面三个变量,新建之后点击【确定】

30.再次点击【确定】保存更改

二、安装‌Vue CLI

1.管理员身份重新打开命令提示符,输入以下命令,并按下回车键(Enter)

2.等待自动下载安装完成

3.如下图所示,表示安装完成

4.关闭命令提示符窗口

5.验证检查【Vue CLI】是否安装成功

三、创建一个Vue项目

1.命令提示符输入【vue create 项目名】,并按下回车键(Enter)

2.选择你项目开发时需要使用的vue版本

3.按下回车键后,脚手架会自动帮我们创建项目

4.项目创建完成,会提示以下两个命令

5.输入命令【cd 项目名】,按下回车键进入目录

6.点击允许访问

7.项目启动成功,如图所示

8.打开任意浏览器,输入以下地址访问


初识:‌Vue CLI

‌Vue CLI(Vue.js Command Line Interface)是一个基于Vue.js框架的项目脚手架工具,用于快速生成Vue工程化项目的工具。‌ 它由Vue.js官方提供,旨在通过简单的命令行操作,帮助开发者快速搭建项目结构,包含项目所需的配置和依赖。‌


一、Node.js及配置环境

1.安装vue-cli前需要先行安装Node.js

Node.js安装包下载地址:https://pan.quark.cn/s/c788df7ef5e3

2.解压下载的安装包


3.打开解压的【node-v22.11.0-x64】文件夹


4.双击启动安装程序


5.点击【Next】


6.勾选【I accept the terms in the License Agreement】,然后点击【Next】


7.点击【Next】

这里不用修改安装路径,


8.点击【Next】


9.点击【Next】


10.点击【Install】开始安装


11.等待安装完成

中途有提示是否运行设备更改,点击是。没有的忽略。


12.安装完成,点击【Finish】


13.桌面开始菜单搜索【cmd】,右键命令提示符【以管理员身份运行】


14.输入命令【node -v】,按下回车键(Enter)

显示(v22.11.0)版本号则表示node.js安装成功。


15.输入命令【npm -v】,按下回车键(Enter)

显示版本号则表示npm安装成功。


16.配置npm仓储和缓存

npm config set registry https://registry.npmmirror.com/


17.在node.js的安装目录创建cache 和 global文件夹

C:\Program Files\nodejs


18.命令提示符依次执行下面命令,依次输入并按下回车键(Enter)

npm config set prefix “C:\Program Files\nodejs\global”
npm config set cache “C:\Program Files\nodejs\cache”


19.输入命令【npm config ls】查看配置是否成功


20.找到桌面【此电脑】


21.右键点击【属性】


22.下滑找到并点击【高级系统设置】


23.点击【环境变量】


24.点击【系统变量(S)】下的【新建】


25.新建变量名和变量值

NODE_PATH
C:\Program Files\nodejs\global\node_modules


26.确认无误之后点击【确定】


27.下滑找到变量【Path】,点击【编辑】


28.点击【新建】


29.依次新建下面三个变量,新建之后点击【确定】

变量【C:\Program Files\nodejs\】如果存在,就新建剩下的两个变量即可。

C:\Program Files\nodejs\
%NODE_PATH%
C:\Program Files\nodejs\global


30.再次点击【确定】保存更改


二、安装‌Vue CLI

1.管理员身份重新打开命令提示符,输入以下命令,并按下回车键(Enter)

npm install -g @vue/cli --no-fund
  • install:安装模块
  • -g:全局安装
  • @vue/cli:脚手架模块名称
  • --no-fund:不提示捐助信息


2.等待自动下载安装完成


3.如下图所示,表示安装完成


4.关闭命令提示符窗口

5.验证检查【Vue CLI】是否安装成功

再次以管理员身份打开命令提示符,输入命令:vue -V


三、创建一个Vue项目

1.命令提示符输入【vue create 项目名】,并按下回车键(Enter)

这里我以输入vue create demo为例。


2.选择你项目开发时需要使用的vue版本

小键盘上下方向键选择,回车键确认。这里我选择Vue 3。


3.按下回车键后,脚手架会自动帮我们创建项目


4.项目创建完成,会提示以下两个命令

  • cd demo:进入项目目录
  • npm run serve:启动项目


5.输入命令【cd 项目名】,按下回车键进入目录

我这里以输入【cd demo】为例。


6.输入命令【npm run serve】,按下回车键启动项目

npm run serve


6.点击允许访问

没有这个防火墙提示的直接看下一步。


7.项目启动成功,如图所示


8.打开任意浏览器,输入以下地址访问

http://localhost:8080/


至此,表示Vue CLI安装及项目配置全部成功!如果对你有帮助,不要忘记三连哟~!