Logo

[VUE] Vue-CLI的安装、使用及环境配置(超详细)

photo

2024年03月29日

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

9d9d1520a43a4edd93bd81a164353859.png

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

da8d686f5a714ca5818d61a7863b6efb.png

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

 cd one-project

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

npm run serve

41d7ee32714448ceb8e6598dd5bdcbba.png

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

5075c0aa492e4f14ad81269440e0e1ab.png

 

2、图形化工具创建项目

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

vue ui

905ccba664a94bfa91ba43e6cfba2d37.png

 浏览器页面如下图所示:

d28a9090d6eb4e64b7f536c457358eec.png

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

dd875d2dbeec4f108506a3fa839effc8.png

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

4437d00ee60b4e6092b3bf5a0816da1a.png

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

3632502d054a422cb89368a499443611.png

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

3fabe4105c7d463fa0cc4cf6ca71cef1.png

接下来就可以进行开发啦

c897d2e229c3413192885fb7d3c4be33.jpeg

 

 

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!

热门文章

无法握住的故土 在我们心灵最温暖的角落,总有一寸土地是属于故乡的。虽然我们看似已远离故土,可骨子里对故乡的依恋却是从未冷却过。我们无论漂泊他乡,还是在繁华都市平步青云,可故乡的悠悠情思总会潜入梦乡与你缠绵。是儿时那一缕缕茉莉的清香萦绕在梦境,也是邻家那已锈迹斑斑的铁壶里,开出艳丽的花儿在梦的边缘摇曳。故土就这样根深蒂固地在我们的灵魂深处烙下深深的印记。 作者:Pastore Antonio
1596 浏览量
EWS(Exchange Service)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 最近公司要求和exchange服务对接,所以稍微研究了一下官方文档,做出以下总结,欢迎大家补充。先...EWS(ExchangeService)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 作者:Pastore Antonio
1585 浏览量
Sql Server 部署SSIS包完成远程数据传输 本篇介绍如何使用SSIS和作业完成自动更新目标数据任务。**温馨提示:如需转载本文,请注明...SqlServer部署SSIS包完成远程数据传输 作者:Pastore Antonio
1578 浏览量
SQL Server AG集群启动不起来的临时自救大招 背景前晚一朋友遇到AG集群发生来回切换不稳定的情况,情急之下,朋友在命令行使用命令重启WSFC集群...SQLServerAG集群启动不起来的临时自救大招 作者:Pastore Antonio
1572 浏览量
windows 下安装 memcahce 官网上并未提供Memcached的Windows平台安装包,我们可以使用以下链接来下载,你需...windows下安装memcahce 作者:Pastore Antonio
1566 浏览量