vue ui Starting GUI 图形化配置web新项目

前言:在vue框架里面, 以往大家都是习惯用命令行 vue create 、vue init webpack创建新前端项目,而vue ui是一个可视化的图形界面,对于新手来说更加友好了,不但可以创建、管理、还可以更新vue项目,也可以下载各种需要的插件,比如elmentui、axios、vuex等,图形化更加直观的看到所安装的各种插件,以及安装卸载不用记命令写命令,鼠标点击web页面即可,下面就来介绍,如何使用vue ui创建新web项目。

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链,它现在处于维护模式。

09b3819fd76346e08697c79522427650.png

一、先配置node环境

1.1、参考使用nvm管理多个node.js版本

使用nvm管理nodejs环境,注意nodejs和npm的版本对应_npm和node版本对应-CSDN博客

npm install -g vue
npm ERR! Arborist is not a constructor

1.2、更换node版本

nvm ls

  * 16.20.2 (Currently using 64-bit executable)
    12.22.12
    11.15.0
    10.24.1
    8.7.0

nvm use 11.15.0
Now using node v11.15.0 (64-bit)

npm install -g vue
npm WARN vue@3.4.21 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.

+ vue@3.4.21
added 20 packages from 44 contributors in 1.746s

npm install -g @vue/cli
npm WARN deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

......


+ @vue/cli@5.0.8
updated 1 package in 15.315s

 

npm list vue -g
E:\MySoftWare\NvmNode\npm\npm_global
+-- @vue/cli@5.0.8
| `-- vue@2.7.16
`-- vue@3.4.21

 

npm config list
; cli configs
metrics-registry = "https://registry.npmmirror.com/"
scope = ""
user-agent = "npm/6.7.0 node/v11.15.0 win32 x64"

; userconfig C:\Users\admin\.npmrc
cache = "E:\MySoftWare\NvmNode\npm\npm_cache"
prefix = "E:\MySoftWare\NvmNode\npm\npm_global"
registry = "https://registry.npmmirror.com/"

; node bin location = E:\MySoftWare\NvmNode\nodejs\node.exe
; cwd = F:\code\SmartWaterConservancy
; HOME = C:\Users\admin
; "npm config ls -l" to show all defaults.

 

1.3、在用户变量中新建变量,变量名为vue ,变量值为 prefix 目录下对应的路径。

a14b4c64e20247e5a83248add0193950.png

 

1.4、点击系统变量的 Path 变量,增加prefix 目录下对应的路径

8b91141921bd4471a4721f742798bbd2.png

 

acd11a6477a9468aa69516ec70d73c6f.png

npm config set prefix ""

vue -V
You are using Node v11.15.0, but this version of @vue/cli requires Node ^12.0.0 || >= 14.0.0.
Please upgrade your Node version.

 

nvm ls

    16.20.2
    12.22.12
  * 11.15.0 (Currently using 64-bit executable)
    10.24.1
    8.7.0

 

nvm use 12.22.12
Now using node v12.22.12 (64-bit)

1.5、环境配置完成

vue -V
@vue/cli 5.0.8

二、使用UI指令创建新web项目

使用命令行cmd,先用管理员进入选择想要创建项目的文件夹,再运行 vue ui,就会出现图形化管理web界面。

2.1、执行 vue ui创建指令

vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

 

[Beta] 创建新项目 - Vue CLI

001a58c2bd644f8490832fbf2e869a21.png

35e425a027ee462da1c04b68d280b8a3.png

e4d0d616f41e48f1abc0c5ce6deae579.png

37715f6706ff478dbba5ddd7e30a5d8f.png

2.2、新web项目创建成功

71e06f79c6ea46e3922fc20704a77a08.png

4b212e2519274221b8a68b07f433e4d9.png

2.3、项目仪表盘

e67d7d69d5ce4f9c9f591ad913b9b657.png

2.4、项目插件

4018dff0e05c4d1e8f40a4665835b0e2.png

2.5、项目依赖

6281bcd1b85c481ba2495498ca0a023c.png

2.6、项目配置

9d41a3e562184aeb91ae3fe262fd1818.png

2.7、项目任务

8ae5224faf564046ab34d110e4ef0ff4.png

 

参见:

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Home | Vue CLI (vuejs.org)

工具链 | Vue.js

插件开发指南 | Vue CLI

UI 插件 API | Vue CLI

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/517499.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习Java的第三天

如何使用IDEA工具编写Java语言 上一节课已经讲过了,如何使用文本文档写出代码并在管理员控制台打印出来 接下来给大家分享的是使用IntelliJ IDEA工具 一、如何将IntelliJ IDEA设置成中文 1、点击右上角的图标,有人的图标会不一样,但位置是…

java SSM流浪宠物救助与领养myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM流浪宠物救助与领养管理系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系…

本地知识库搭建成功后,企业效率真的翻倍了

在如今这个快节奏的信息时代,对企业来说,拥有一套高效的知识管理系统早已不再是选项,而是必要。而本地知识库,它这个集信息存储、管理和查询于一体的平台,不仅改变了公司信息资源共享的方式,还帮助进一步提…

福派斯三文鱼猫粮的性价比怎么样?

亲爱的猫友们,你们是否也曾为挑选一款性价比高、适合自家猫咪的猫粮而犯愁呢?今天,就让我来给大家分享一下福派斯三文鱼猫粮的性价比如何吧!🐾 1️⃣ 首先,让我们从原料成分开始说起。福派斯三文鱼猫粮选用…

搭建拓扑图发送ARP及ICMP数据报文

文章目录 搭建拓扑图设备说明通过PC1 ping PC2小结:当arp表缓存过期,而mac学习表未过期当arp表缓存未过期,而mac学习表过期使用VLAN分割广播域 搭建拓扑图 设备说明 两台PC电脑 同理另外一台电脑也是同理配置 IP地址:192.168.1.…

html css 导航栏 2

鼠标划过会向上移动改变颜色 html文件 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>导航栏</title><link rel"stylesheet" href"css/dhl1.css" /></head><body><div …

python基础(11)《Allure报告中的组件用法》

使用 官方教程&#xff1a;https://docs.qameta.io/allure 入门 想要看到allure报告&#xff0c;需要做2个步骤&#xff1a; 1、pytest执行时关联allure&#xff1a;pytest命令带上--alluredir 结果存放目录或--alluredir结果存放目录&#xff1b; 2、打开执行报告&#xff…

【树上倍增】【割点】 【换根法】3067. 在带权树网络中统计可连接服务器对数目

作者推荐 视频算法专题 本文涉及知识点 树上倍增 树 图论 并集查找 换根法 深度优先 割点 LeetCode3067. 在带权树网络中统计可连接服务器对数目 给你一棵无根带权树&#xff0c;树中总共有 n 个节点&#xff0c;分别表示 n 个服务器&#xff0c;服务器从 0 到 n - 1 编号…

人工智能在信息系统安全中的运用

一、 概述 对于企业和消费者来讲&#xff0c;人工智能是非常有用的工具&#xff0c;那又该如何使用人工智能技术来保护敏感信息?通过快速处理数据并预测分析&#xff0c;AI可以完成从自动化系统到保护信息的所有工作。尽管有些黑客利用技术手段来达到自己的目的&#xff0c;但…

代码随想录第51天|● 300.最长递增子序列 ● 674. 最长连续递增序列 ● 718. 最长重复子数组

文章目录 ● 300.最长递增子序列思路代码&#xff1a; ● 674. 最长连续递增序列思路&#xff1a;代码&#xff1a; ● 718. 最长重复子数组思路&#xff1a;代码一&#xff1a;dp二维数组代码二&#xff1a;滚动数组 ● 300.最长递增子序列 思路 dp[i]表示i之前包括i的以nums…

Github 2024-03-07Go开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-07统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Go项目10TypeScript项目1Harbor - 开源的云原生注册表项目 创建周期:2908 天开发语言:Go协议类型:Apache License 2.0Star数量:21549 个For…

【SQL】176. 第二高的薪水 (IFNULL() + LIMIT OFFSET)

前述 知识点学习&#xff1a;推荐阅读 sql语句中limit、offset的用法 题目描述 题目链接&#xff1a;176. 第二高的薪水 写法一 去掉最大的&#xff0c;再取最大的 ⇒ 第二大的。 select max(B.salary) as SecondHighestSalary from Employee B where B.salary ! (select…