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.mzph.cn/news/735539.shtml

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

相关文章

LTspice(14) Noise仿真

LTspice(14) Noise仿真 好久没有更新LTspice的教程了,大家想了没? 截止目前LTspice已经更新到24.0.9。界面发生了一些变化,但主要功能并不受影响,新的版本改了UI,找东西更加方便了,界面如下图1所示。 图1…

LLVM TableGen 系统学习笔记

Basic TableGen 系统可以帮助记录领域特定的信息。它也可以认为是一种小型的编译系统。 TableGen 责负分析文件, 分析结果交给领域特定的后端进行处理。 重要的概念 records 一个 record 有一个独立的名称,一系列值和一系列父类。 它保存了特定领域…

【前沿技术】讲解

前沿技术 前沿技术是指处于科学研究和技术开发最前端的技术,这些技术具有高度的创新性和潜在的影响力,它们推动了科技进步和产业转型。讲解一些当前的前沿技术,我们可以从以下几个方面进行: 人工智能(AI):…

Unity InputField宽度自适应内容

在Unity中,InputField在我们输入内容时,只会显示适应初始宽度的最新内容,或者自定义长度内容。 那么,要实现宽度自适应内容就需要另寻他法了。 以下是通过一个控制脚本来实现的一个简单方法。 直接上脚本: using S…

linux Shell 命令行-02-var 变量

拓展阅读 linux Shell 命令行-00-intro 入门介绍 linux Shell 命令行-02-var 变量 linux Shell 命令行-03-array 数组 linux Shell 命令行-04-operator 操作符 linux Shell 命令行-05-test 验证是否符合条件 linux Shell 命令行-06-flow control 流程控制 linux Shell 命…

JAVA笔记15(程序控制结构)

1.程序控制结构 1.1 顺序控制 ​ *介绍:程序从上到下逐行地执行,中间没有任何判断和跳转 1.2 分支控制 ​ *分支控制If - else 1.单分支 ​ *基本语法: if(条件表达式){​ 语句;​ }​ 条件表达式为true时,会执行下面语句…

Leetcode 59.螺旋矩阵Ⅱ

1.题目 2.思路 (借用代码随想录的图) 1.我们将转一圈看作一个循环(1->2->3->4->5->6->7->8 这是一个循环) 2.在这个循环里,我们要画四条边(上右下左) 填充上行从左到右 填…

第三百九十三回

文章目录 1. 概念介绍2. 生命周期及其方法2.1 生命周期2.2 回调方法2.3 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"显示Snackbar的另外一种方法"相关的内容,本章回中将介绍如何监听组件的生命周期.闲话休提,让我们一起Talk Flu…

Vue扩展知识简单了解

引入vue-router 要引入vue-router,首先需要安装它。在项目目录下执行以下命令: npm install vue-router然后,在你的Vue项目中,可以通过以下方式引入和使用vue-router: // main.js import Vue from vue import App f…

基于Vue的预约停车位APP设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 Vue简介 3 1.2 Node.js简介 3 1.3 JavaScript基本介绍 4 1.4 Ajax基本介绍 4 1.5 本章小结 4 2 软件需求分析与体系结构设计 5 2.1 系统定义用户 5 2.2 系统功能需求描述 5 2.3 系统用例分析 6 2. 3. 1 用户用例分析 6 2.…

深入理解JavaScript内存泄漏:原因与解决方法

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

group by order by having where union

力扣题目链接 having where 区别 having子句用于分组后筛选,where子句用于行条件筛选 having一般都是配合group by 和聚合函数一起出现如(count(),sum(),avg(),max(),min()) where条件子句中不能使用聚集函数,而having子句就可以。 having只能用在group…

链表的基础

目录 顺序表 链表 需要注意的 链表的优势 单链表的实现 1.单链表的准备 2.单链表的结构体的创建 3.单链表的准备 4.前插 5.后插 6.后删 7.前删 8.任意位置前插 9.任意位置后插 10.删除 11.修改 12.打印 13.释放链表 总说链表难,但我感觉只要认真听讲…

栈和队列算法题

232. 用栈实现队列 题目 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作(push、pop、peek、empty): 实现 MyQueue 类: void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回元…

Docker基础—CentOS中卸载Docker

要卸载已经安装好的 Docker,可以按照以下步骤进行: 1 停止正在运行的 Docker 服务 sudo systemctl stop docker 2 卸载 Docker 软件包 sudo yum remove docker-ce 3 删除 Docker 数据和配置文件(可选) sudo rm -rf /var/lib…

1572.矩阵对角线元素的和

刷算法题: 第一遍:1.看5分钟,没思路看题解 2.通过题解改进自己的解法,并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步,下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

(南京观海微电子)——Gamma调试

1.什么是Gamma? Gamma的概念源自于CRT响应曲线,最开始是用于反映显像管的图像亮度与输入电子枪的信号电压之间,非线性关系的一个参数。对于CRT显示器而言,电子流大小影响显示的图像亮度大小,而电子流大小与输入电压间…

刷题DAY17 | LeetCode 110-平衡二叉树 257-二叉树的所有路径 404-左叶子之和

110 平衡二叉树(easy) 给定一个二叉树,判断它是否是平衡二叉树。 (平衡二叉树 是指该树所有节点的左右子树的深度相差不超过 1。) 思路:递归法,用返回值为-1来表示非平衡二叉树 递归三步曲分…

力扣每日一题 找出数组的第 K 大和 小根堆 逆向思维(TODO:二分+暴搜)

Problem: 2386. 找出数组的第 K 大和 文章目录 思路复杂度💖 小根堆💖 TODO:二分 暴搜 思路 👨‍🏫 灵神题解 复杂度 时间复杂度: 添加时间复杂度, 示例: O ( n ) O(n) O(n) 空间复杂度: 添加空间复杂…

【最新版】ChatGPT/GPT4科研应用与AI绘图论文写作(最新增加Claude3、Gemini、Sora、GPTs技术及AI领域中的集中大模型的最新技术)

2023年随着OpenAI开发者大会的召开,最重磅更新当属GPTs,多模态API,未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…