首页IT科技安装vue cli4(Vue-CLI的安装、使用及环境配置(超详细))

安装vue cli4(Vue-CLI的安装、使用及环境配置(超详细))

时间2025-06-15 22:25:05分类IT科技浏览6835
导读:Vue CLI 是一个基于 Vue 进行快速项目开发的工具。它可以提供可交互式的项目脚手架和运行时的服务依赖,帮助你快速完成一个风格统一、拓展性强的现代化 web 单页面应用。...

Vue CLI 是一个基于 Vue 进行快速项目开发的工具               。它可以提供可交互式的项目脚手架和运行时的服务依赖               ,帮助你快速完成一个风格统一               、拓展性强的现代化 web 单页面应用                       。

Vue-CLI  所需环境

Vue-CLI 是一个需要全局安装的NPM包                     ,安装需要在 Node.js 环境下进行      。

检查 Node 环境:

node -v

执行上面的命令之后        ,如果终端输出版本号            ,表示 Node.js 已安装;反之则无; 

可 Node.js 官网自行下载:https://nodejs.org/zh-cn/

 详细安装指南可参考:Node.js的安装及环境配置【超详细】_huangfuyk的博客-CSDN博客

安装 Vue-CLI

1                     、全局安装

执行 npm install -g @vue/cli 全局安装

npm install -g @vue/cli

如果安装过程中出现错误如下:

Unhandled rejection Error:EACCES:permission denied

表示当前的操作系统权限不足                     ,可输入以下命令重新安装:

sudo npm install -g @vue/cil

添加 sudo 表示使用超级管理员权限进行安装            ,过程中需要你输入设备的启动密码           。

2        、检查是否安装完成

执行 vue --version 或 vue-V 检查是否安装完成        ,如果终端输出版本号                     ,表示 Node.js 已安装;反之则无; 

vue --version

快速搭建项目

1            、命令行创建项目

(1)执行vue create one-project                 ,创建一个项目名称为 one-project 的项目;

vue create one-project

(2) 可选择 Vue2                     、Vue3 版本或者自定义设置    ,出现 $ cd one-project 和 $ npm run serve                     ,代表已安装完成                        。如下图所示:

(3)执行 cd one-project 进入文件

 cd one-project

(4)执行 npm run serve 即可运行项目

npm run serve

(5) 打开链接即可看到                   ,domo 页面

2            、图形化工具创建项目

(1)命令行输入 vue ui ,获取图形化页面创建工程的链接                  ,在浏览器中打开;

vue ui

 浏览器页面如下图所示:

(2)点击【创建】 ==》点击【+在此创建新项目】 

(3)输入项目信息(项目名:two-project)==》点击【下一步】

 (4)选择版本或自定义                      ,点击【创建项目】

(5)等待创建完成即可    ,如下图

接下来就可以进行开发啦

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
css轮播图怎么制作(【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )) vue项目怎么在别人的电脑上运行(第一次运行Vue项目 怎么运行别人的Vue项目)