我是靠谱客的博主 喜悦高跟鞋,最近开发中收集的这篇文章主要介绍使用Vue的可视化界面创建项目(含Node.js安装)使用Vue的可视化界面创建项目,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

使用Vue的可视化界面创建项目

在这里插入图片描述

如果你是新人,没接触过JavaScript,这里小生建议最好不要一开始就针对一个陌生的框架进行学习,先去熟悉基础是最好的

1.安装Node.js

如果你学习过html,css,JavaScript,接下来准备学习vue,那么第一步要安装
Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

Nodejs官网/en/

先下载
安装这个长期支持版本
在这里插入图片描述
下载完成后,打开安装包,点击next下一步
在这里插入图片描述
直到出现这个界面
在这里插入图片描述
(点击Add to PATH)Next下一步,准备就绪,然后安装

这一步是添加环境变量

确认无误后,点击Install,开始安装
在这里插入图片描述
在这里插入图片描述
检测是否安装成功

点击开始-运行-cmd(win+R),打开dos,输入“node --version”检查Node.js版本

在这里插入图片描述
到这里,node.js算是安装成功

接下来就是安装vue-cil脚手架

依然在cmd命令界面,键入下面的命令

npm install -g @vue/cli 
//或者
npm i -g @vue/cli  

安装完成之后,看看检测一下是否安装成功 (vue -V中的‘V’是大写

vue -V 

如果提示,那么恭喜你,安装成功
在这里插入图片描述
要使用可视化界面,那么得保证你安装的脚手架版本必须是3.0以上,如果你安装不是,那么你的卸载重装

//卸载
npm uninstall vue/cli -g
//安装
npm install  @vue/cil -g

等待安装完成即可
接下来在cmd命令界面输入

vue ui

就可以打开vue的图形界面了
在这里插入图片描述
按住键盘上的Ctrl键然后鼠标点击窗口里的链接,就能跳转浏览器并打开链接,这就vue的可视化图形界面。
在这里插入图片描述
单击这个create
在这里插入图片描述
选择好文件夹,然后单击下面的这个按钮
在这里插入图片描述
下一步
在这里插入图片描述
选择你使用的框架,小生这里就使用vue3,接下来等待就好
在这里插入图片描述
这是项目初始化完成的界面
在这里插入图片描述
左侧导航栏
在这里插入图片描述
项目依赖界面,可以用来装一些包,比如swiper,bootstrap之类的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Task部分
在这里插入图片描述
单击run按钮就可以启动你的项目
等待加载
在这里插入图片描述
然后
在这里插入图片描述
在这里插入图片描述
两个地址都行,单击就能再浏览器运行你的vue项目了
在这里插入图片描述

最后

以上就是喜悦高跟鞋为你收集整理的使用Vue的可视化界面创建项目(含Node.js安装)使用Vue的可视化界面创建项目的全部内容,希望文章能够帮你解决使用Vue的可视化界面创建项目(含Node.js安装)使用Vue的可视化界面创建项目所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(55)

评论列表共有 0 条评论

立即
投稿
返回
顶部